Liquid UI - Documentation - 5.06 image()

5.06 image()

Purpose

The image() is used to display images on SAP screens or toolbars, improving the user experience by providing context, assisting navigation, or linking to related resources. These images can also be configured to open help windows, webpages, or files (such as PDF or Word documents) when clicked.

 

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

 

Prerequisites

To ensure HTML and RTF files display correctly in SAP GUI and the image() is supported, verify that Pinnacle.dll is present in your SAP GUI folder. If images do not load, update the .dll to its latest version.

Syntax

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

startrow, startcol: Row and column coordinates where the image appears (upper-left corner).

Image name: Name or path of the image file.

 

Note: You can specify the image position in various ways. Click here for details on positioning the screen elements.

 

The image command supports the following file types:

  • BMP
  • GIF
  • JPG
  • PNG
 

Note: For optimal image handling, the .BMP format is recommended for smaller images, such as icons. For larger images, GIF or JPG formats are more suitable.

 

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 - Always load the image from the file path instead of cache. Useful for frequently updated images.

"nostretch":".."

"nostretch": true - Maintain the image’s original aspect ratio, ignoring the defined dimensions.

"plain":".."

"plain": true - Removes the 3D frame around the image.

"start":".."

"start": "path" - Makes the image clickable. It can launch a file or URL (supports .exe, .bat, web links, etc)..

"TOOLBAR":".."

Displays the image on the SAP toolbar.

"viewhelp":".."

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

"viewhelp_height": "X" - Sets the height of the help window.

"viewhelp_position":".."

"viewhelp_position":"[row, column]" - Sets the screen position of the help window.

"viewhelp_width":".."

"viewhelp_width":"X" -Sets the width of the help window.

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.
     
    //Displays image on the SAP screen 
image([1,6],[4,14],"C:\\Users\\divya\\Pictures\\Screenshots\\liquiduitoolbar.png",{"nobuffer":true});
     
    Updates image from file path each time it’s displayed, ensuring the latest version is shown
     
  2. 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. Preserves the original aspect ratio of the image, ensuring it isn’t stretched or out of proportion, even if a different size is specified.
     
    //Displays original image without streching
image([1,1],[20,100],"guixt.bmp",{"nostretch":true});
     
    Maintains original image aspect ratio, preventing distortion when resized
     
  2. As per the code, the image is displayed in a specified size without losing its pixel ratio.

plain
  1. Removes the default 3D frame around the image, displaying it without any border or styling.
     
    // Displays image without any frame around it
image([1,1],[15,21],"C:\\Users\\divya\\Pictures\\Screenshots\\3Dframe.jpg",{"plain":true});
     
    Displays image without 3D frame, border, or styling
     
  2. As per the code, the plain option will remove the frame around the image.

start
  1. Adds a hyperlink to the image, enabling users to open a website or launch executable files (.BAT, .EXE) directly from the image.
     
    // Adds hyperlink to an image
image([2,5],[4,10],"C:\\Users\\divya\\Pictures\\Screenshots\\information.png",{"start":"https://www.guixt.com"});
     
    Image includes hyperlink to open a website or launch executable files
     
  2. As per the code, when the user clicks on an image, it opens the linked website, executable file, or document (e.g., Word, PDF).

TOOLBAR
  1. Display an image on the SAP toolbar.
     
    // Displays image on toolbar
image([TOOLBAR],"liquid.bmp");
     
    Displays image on the toolbar
  2. As per the code, the image appears on the toolbar and is automatically resized to fit its dimensions.

viewhelp
  1. This option will display a viewhelp window when a user clicks on an image.
     
    //Displays viewhelp window on click
image([2,5],"C:\\Users\\divya\\Pictures\\Screenshots\\information.png",{"viewhelp":"C:\\Users\\divya\\Pictures\\Screenshots\\Functionkeys.png"});
     
    Clicking the image opens a viewhelp window
     
  2. As per the code, clicking the image opens a viewhelp window. This option supports only HTML and RTF file formats and works exclusively in the local SAP GUI setup, not in a server-based one.

viewhelp_height
  1. This option sets the height of the Help window triggered by clicking the image.
     
    // Displays viewhelp window at specified height 
image([2,5],"C:\\Users\\divya\\Pictures\\Screenshots\\information.png",{"viewhelp_height":"15", "viewhelp":"C:\\Users\\divya\\Pictures\\Screenshots\\Functionkeys.png"});
     
    Sets the height of the Help window opened by clicking the image
     
  2. As per the code, clicking the image opens a viewhelp window with a specified height.

viewhelp_position
  1. This option sets the position of the help window triggered by clicking the image.
     
    // Displays viewhelp window at specified coordinates
image([2,5],"C:\\Users\\divya\\Pictures\\Screenshots\\information.png",{"viewhelp":"E:\\WS Commands Scenarios\\Scripts\\IMAGE\\ViewHelp.html","viewhelp_position":"[8,30]"});
     
    Sets the position of the Help window opened by clicking the image
     
  2. As per the code, clicking the image opens a viewhelp window at specified coordinates with a defined size.

viewhelp_width
  1. This option sets the width of the help window triggered by clicking the image.
     
    // Displays viewhelp window with specified width
image([2,5],"C:\\Users\\divya\\Pictures\\Screenshots\\information.png",{"viewhelp_height":"15", "viewhelp":"C:\\Users\\divya\\Pictures\\Screenshots\\Functionkeys.png","viewhelp_width":"30"});
     
    Sets the width of the Help window opened by clicking the image
     
  2. As per the code, clicking the image opens a viewhelp window at the specified coordinates with a defined size.

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
 
// 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 on the SAP screen 
del("X[IMAGE_CONTAINER]");

// Adds hyperlink to an image
image([2,5], [4,10], "C:\\Users\\divya\\Pictures\\Screenshots\\information.png",{ "start":"https://www.guixt.com"});

/// Displays viewhelp window at specified coordinates
image([7,1], [10,10], "C:\\Users\\divya\\Pictures\\Screenshots\\information.png",{ "viewhelp_height":"15", "viewhelp":"C:\\Users\\divya\\Pictures\\Screenshots\\Functionkeys.png","viewhelp_position":"[8,30]"});
 
Demonstrates image command usage on SAP Easy Access - website link, and viewhelp on click
 

Tips and Tricks

  • Display images dynamically on the screen

    The image() is used to display images dynamically on the SAP screen.

     
    // Displays images on the SAP screen
image([6,10],'C:\Users\divya\Pictures\Screenshots\&V[z_mm01_material].png',{'nostretch':true});
     
    Uses image() to display images dynamically on the SAP screen
     

    Click here for details on how to display images dynamically on the SAP screen.

  • Data-dependent images

    Before the image is loaded, the variables used in the image file path are automatically replaced with their corresponding values at runtime.

     
    //image([6,10],'C:\\LiquidUI\\scripts\\find_image\\&V[z_mm01_material].png');
     

    If the user enters 1157 in the F[Material] input field, and z_mm01_material holds that value, the image path becomes: C:UsersdivyaPicturesScreenshots1157.png

     
    Replaces variables in image path with actual values at runtime before loading the image
     

Usage Details

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




Leave Feedback

Have a Question?

Ask the Community