Liquid UI - Documentation - 5.06 image()

5.06 image()

Purpose

With the image() command, you can display images on the SAP screen or toolbar. These images provide a recognizable context for users, help navigate within the screen, and allow customization of specific screens. They can also convey useful information, particularly when they are data-dependent. Moreover, images can be used as links to open various windows, such as help windows, launch webpages, or open files like Word, PDF, and more.

 

Note: The use of the image is restricted to design scripts - it will not be available in functions.


Prerequisite

Pinnacle.dll is a SAP GUI viewer component, installed in your SAPgui folder. It shows HTML and RTF files in SAP GUI and also runs the image command.

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


Syntax

You can display an image at the specified row and column on the SAP screen. Here the coordinates (row, column) indicate the upper left corner of the image.

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

Note: You can specify the position of the image in different ways. Learn more about positioning the screen elements.

 

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 coordinates
  • 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 the image path instead of reading it from buffer or cache.

"nostretch":".."

"nostretch": true - This option 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" - This option adds a link to an image. The path can be a URL or location of the executable file in the 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 determine where the viewhelp window appears on the screen.

"viewhelp_width":".."

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


Options Detail

nobuffer

  1. This option updates images directly from their path. It's useful when new versions of images arrive from external programs like SAP or timers. This ensures the image is fetched from the file system every time it's displayed, rather than being stored.

  2. //Displays image on the SAP Easy Access screen 
image([1,1],"guixt.bmp",{"nobuffer":true});

  4. The nobuffer option is useful in scenarios where image updates often. It refreshes the SAP GUI image by reading it from the path, skipping any cached copies.

nostretch

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

  2. //Displays original image without streching
image([1,1],[20,100],"guixt.bmp",{"nostretch":true});
  4. As per the code, the image is displayed in a specified size without losing its pixel ratio.

plain

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

  2. //Displays image without any frame around it
image([1,1],"orca.bmp",{"plain":true});
  4. As per the code, the plain option will remove the frame around the image.

start

  1. This option adds a link to an image, allowing users to open a website or an executable file from an image. It supports .BAT and .EXE file types.

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

TOOLBAR

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

  2. //Displays image on toolbar
image([TOOLBAR],"liquid.bmp");
  4. As per the code, the image is displayed on the toolbar. It re-sizes the image according to the toolbar size before placing it on a toolbar.

viewhelp

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

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

viewhelp_height

  1. Using this option, the user can set the height of the Help window that appears on the screen with a click on the image. 

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

viewhelp_position

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

  2. //Displays viewhelp window at specified coordinates
image([1,1],"liquidui.jpg",{"viewhelp":"E:\\WS Commands Scenarios\\Scripts\\IMAGE\\ViewHelp.html","viewhelp_position":"[8,30]"});
  4. As per the code, a viewhelp window opens when an image is clicked at specific coordinates, with a predetermined size.

viewhelp_width

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

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


Example

This example demonstrates the usage of the image command. Here we are using the SAP Easy Access screen, to display the following usages of image() 

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


Script

//Adds URL link to the image
image([4.4,23.7],[13,103.5],"http://www.guixt.com/images/ws_documentation/onscreen.jpg");

//Deletes Image Container 
del("X[IMAGE_CONTAINER]");

//Adds image on toolbar and URL link to it
image([TOOLBAR],"http://www.guixt.com/images/ws_documentation/createnotification.jpg/toolbarimage.jpg");

//Adds URL link to the image
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"});
 

Figure: Image on the SAP Easy Access screen


Tips and Tricks

  • Display images dynamically on the screen

    Image command is used to display images on the SAP screen.

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

    Learn more about how to display images dynamically on the SAP screen. 

  • Data-dependent images

    Before the image is loaded, the variables in the image file name can be replaced with their values.  Example:

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

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


Usage Details

Can't find the answers you're looking for?




Leave Feedback

Have a Question?

Ask the Community