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 image command is used to display images on an SAP screen, and also you can display images dynamically on the screen. This command also creates a recognizable context for users. In this article, you will learn how to display an image based on the value entered in the input field. we'll guide you through the following steps.

1. Delete the unnecessary screen elements
2. Add an input field to enter a material number.
3. Add a push button to display the image
4. Add a function to display the image.

User Interface

//Create this file inside your script folder for customizing the SAP Easy Access screen. SAPLSMTR_NAVIGATION.E0100.sjs.

//Now, let's add the Liquid UI script to the above file and save it.

Screen Script

1. Delete the image container using the del command
    

   //Delete ActiveX Container on the SAP Easy Access screen
   del('X[IMAGE_CONTAINER]');

    
   
    
2. Add an input field “Material” to search for the desired material number.
    

   //Creates an input field Material along with search help.
   inputfield([2,4],"Material",[2,16],{"name":"z_mm01_material","size":18,"searchhelp":"MAT1"});

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

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

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

   //Adds a 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. Logon to SAP. On the SAP Easy Access screen, you can see an input field Material, and a pushbutton labeled Display image. Now, enter the number in the input field and click on the Display image push button, then it displays the image of the specified material number, as shown below.