17.11 Display required image

Prerequisites

• Products: Liquid UI WS,  Liquid UI Designer, Liquid UI Server or Local DLL, Client Software
• Commands: image(), inputfield(), pushbutton()

Purpose

The article demonstrates how to use image() to dynamically display an image on an SAP screen based on the values entered. Furthermore, it also creates a recognizable context for users, focusing on the SAP Easy Access screen we will walk you through the following actions:

1. Delete the image container on the SAP Easy Access screen.
2. Add an input field to enter a material number.
3. Add a push button that on click displays the image.
4. Add a function to display the image.

User Interface

//Create the file SAPLSMTR_NAVIGATION.E0100.sjs inside your scripts folder for customizing the SAP Easy Access screen.
//Now, add the Liquid UI script to the above file and save it.

Customization

1. Delete the image container on the SAP Easy Access screen using del().
   
    

   //Deletes the image container on the SAP screen
   del('X[IMAGE_CONTAINER]');
   

    
   

    
2. Add an input field labeled Material to enter the material number.
   
    

   //Creates an input field to enter the number
   inputfield([2,4],"Material",[2,16],{"name":"z_mm01_material","size":18,"searchhelp":"MAT1"});
   

    
   

    
3. Add a push button labeled Display Image to display an image of the value specified in the material input field on click.
   
    

   //Creates a pushbutton to display the image.
   pushbutton([4,12],"Display Image","?"); image([6,10],'&V[z_mm01_material].jpg',{'nostretch':true});
   

    
   

    
4. Add the mm01 function to display the image of the desired material number.
   
    

   //Function to display image
   function mm01(){
       onscreen 'SAPLSMTR_NAVIGATION.0100'
       del("X[IMAGE_CONTAINER]");
   inputfield([2,4],"Material",[2,16],{"name":"z_mm01_material","size":18,"searchhelp":"MAT1"});
       pushbutton([4,12],"Display Image",{"process":mm01});    image([6,10],'C:\\LiquidUI\\scripts\\find_image\\&V[z_mm01_material].png',{'nostretch':true});
   }
   

SAP Process

1. Refresh the SAP screen, enter the material number in the Material input field, and click the Display Image push button. Then, you can see the image of the specified material number displayed on the SAP screen, as shown below.