Liquid UI - WS Reference Library

image()


Purpose

With image(), you can display images on SAP screens.

Using image() command, you can put an image on a screen toolbar, use an image as link to help window, launch a website or open an file such as word, pdf, etc.

The use of image is restricted to design scripts and will not be available in functions.


Prerequisite

Pinnacle.dll is a viewer component of SAPGUI. The purpose of this file is to display html and rtf files in SAPGUI. The pinnacle.dll file is required to run image command and is installed in SAPgui folder located in your local drive. 

If you find trouble in loading the image on SAPGUI, please update .dll file to newer version.


Syntax

image([startrow,startcol],"Image name",{"options":"value"...});

The image command supports the following file types:

  • BMP
  • GIF
  • JPG
  • PNG
Note: It is recommended to use the BMP format for small images (e.g. icons) and GIF or JPG format for large images.


Properties

  • startrow,startcol - row and column co-ordinates
  • Image name - image filename/path


Available Option

You can use the following options with the image:

"nobuffer":".."

"nobuffer":true - This option updates an image from image path instead of reading it from buffer or cache.

"nostretch":".."

"nostretch":true - Maintains the height/width ratio of the original image.

"plain":".."

"plain":true - This option will remove the 3D frame displayed around the image.

"start":".."

"start":"path" - To add link to an image. The path can be a URL or location of the image in local drive.

"TOOLBAR":".."

This option will place an image on the SAP toolbar.

"viewhelp":".."

"viewhelp":"HTML/RTF" - You can specify HTML or RTF file. Clicking on the image will display the specified file on the SAP window.

"viewhelp_height":".."

"viewhelp_height":"X" - X specifies the height of the window to be displayed.

"viewhelp_position":".."

"viewhelp_position":"[Row,Column]" - Row and Column coordinates specifies the position on the screen where the viewhelp window will be displayed.

"viewhelp_width":".."

"viewhelp_width":"X" - X specifies the width of the window to be displayed.


Options Detail

nobuffer

  1. This option is useful if new versions of the image are provided by external programs (e.g. from SAP or timer controlled). The image will be read from the file system each time it is displayed instead of being held in a buffer.

  2. image([1,1],"guixt.bmp",{"nobuffer":true});
  3. The nobuffer option is useful in the scenarios where image updates occur. It updates the image on SAPGUI by reading it from the image path instead of reading it from cache or buffer.

nostretch

  1. This option maintains the height-to-width ratio of an original image, irrespective of the image size specified by the user.

  2. image([1,1],[20,100],"guixt.bmp",{"nostretch":true});
  3. As per the code, if nostretch is not applied, the image will display in specified size coordinates by losing its pixels ratio.

plain

  1. This option will remove the 3D frame displayed around the specified image.

  2. image([1,1],"orca.bmp",{"plain":true});
  3. As per the code, the plain option will remove the frame around the image.

start

  1. This option enables users to launch a website or an executable file from an image. It supports .BAT and .EXE file types.

  2. image([1,1],"liquidui.jpg",{"start":"http://www.liquid-ui.com"});
  3. When a user clicks on image, it navigates to a website, an executable file, or opens file of formats such as word, pdf and so on.

TOOLBAR

  1. This option will place an image on the SAP toolbar.

  2. image([TOOLBAR],"liquid.bmp");
  3. As per the code, the image displayed on the toolbar. Re-size the image according to the toolbar size before placing on a toolbar.

viewhelp

  1. This option will display a viewhelp window when a user clicks on an image.

  2. image([1,1],"liquidui.jpg",{"viewhelp":"E:\\WS Commands Scenarios\\Scripts\\IMAGE\\ViewHelp.html"});
  3. As per the code, a viewhelp window is opened on image click. This option supports only HTML and RTF file formats. You can use the viewhelp option only in a local environment with SAP GUI and not in a server-based environment.

viewhelp_height

  1. This option will set the height of the help window that appears on image click.

  2. image([1,1],"liquidui.jpg",{"viewhelp":"E:\\WS Commands Scenarios\\Scripts\\IMAGE\\ViewHelp.html","viewhelp_height":"15"});
  3. As per the code, a viewhelp window with specified height is opened on image click.

viewhelp_position

  1. This option will set the position of the help window that appears on image click.

  2. image([1,1],"liquidui.jpg",{"viewhelp":"E:\\WS Commands Scenarios\\Scripts\\IMAGE\\ViewHelp.html","viewhelp_position":"[8,30]"});
  3. As per the code, a viewhelp window in specified size coordinates is opened on image click.

viewhelp_width

  1. This option will set the width of the help window that appears on image click.

  2. image([1,1],"liquidui.jpg",{"viewhelp":"E:\\WS Commands Scenarios\\Scripts\\IMAGE\\ViewHelp.html","viewhelp_width":"30"});
  3. As per the code, a viewhelp window with specified width is opened on image click.


Example

Image usage 

  • Image on toolbar
  • On image click - navigating to website
  • On image click - viewing help

Figure: Image on Easy Access screen


Script

image([4.4,23.7],[13,103.5],"http://www.guixt.com/images/ws_documentation/onscreen.jpg");
del("X[IMAGE_CONTAINER]");
image([TOOLBAR],"http://www.guixt.com/images/ws_documentation/createnotification.jpg/toolbarimage.jpg");
image([18,120],"http://www.guixt.com/images/ws_documentation/createnotification.jpg/toolbarimage.jpg",{"viewhelp_height":"15","viewhelp":"E:\\WS Commands Scenarios\\Scripts\\IMAGE\\ViewHelp.html","viewhelp_position":"[15,140]","viewhelp_width":"30"});
image([8,120],"http://www.guixt.com/images/ws_documentation/createnotification.jpg/salesorder.jpg",{"start":"http://www.guixt.com"});


Tips and Tricks

  • Display images dynamically on the screen

    Image command is used to display images on SAP screen.

    image([6,10],"&V[z_mm01_material].jpg",{"nostretch":true});

    Learn more about how to display image dynamically on SAP screen. 

  • Data dependent images

    The image file name can contain variables that are replaced by their values before the image is loaded. Example:

    image([1,1],"C:\guixt\orca&F[Material].jpg");

    In the field name, 'F[Material]', if the user enters the value '2168', then the filename of the image becomes 'orca2168.jpg.