Liquid UI - Documentation - 19.29 Custom function to select the file

19.29 Custom function to select the file


Prerequisites


Purpose

Learn how to select a file using a custom function with ActiveXObject. This function prompts a dialog box, allowing users to designate a file name. Upon activation, it triggers the standard Windows dialog box for selecting files. We’ll be demonstrating this process, considering the SAP Easy Access screen as an instance.

  1. Delete unnecessary elements on the SAP Easy Access screen
  2. Add a push button to fetch the file path
  3. Add a function to select a file from the system


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.


Customization

  1. Delete the image container on the SAP Easy Access screen using del().
     
    // Deletes an image container on SAP Easy Access screen 
    del("X[IMAGE_CONTAINER]");
    
     
     
  2. Add a push button labeled Select file that executes the function test_selectfile.
     
    //Creates a push  button labeled Select file that executes a test_selectfile process on click
    pushbutton([TOOLBAR], "Select File",{"process":test_selectfile});
    
     
     
  3. Add an input field with no label and z_filename as its technical name. Set the input field to 50.
     
    //Creates an input field with a technical name of z_filename and a size of 50 with no label name. 
    inputfield([5, 49], {"name":"z_filename", "size":"50", "nolabel":true});
     
     
  4. Add a comment as a Selected file path using the text box below the input field.
     
    // Creates "Selected file path” text below the input field
    text[6,49], 'Select the file desired');
    
     
     
  5. Add a function test_selectfile to the call custom function selectFile.
     
    function test_selectfile() {
    var filename = selectFile();
    // Assigns value in the filename variable to z_filename
    set("V[z_filename]", filename);
    }
    
     
  6. Add selectFile function to select a file and create a new ActiveXObject named 'dialog', which allows you to make calls to the file system through the wsoffice.dll. By using the methods of the 'dialog' object, you can open a file and select it when this function is called with a push button.
     
    function selectFile(){
    //This function is for selecting a file
    //SaveBox method-- String function. Displays the File Save As dialogue box.
    //filter and setting a title is not possible
    
    // Runs wsoffice.dll file existing in your script folder whenever the selectFile function is executed load("wsoffice.dll");
    // Creates a new ActiveX Object (dialog) var dialog = new ActiveXObject('MsComDlg.CommonDialog'); dialog.Filter='All Files(*.*)|*.*'; dialog.MaxFileSize=32767; dialog.DialogTitle=Open; dialog.Flags=0x200|0x800|0x4|0x200000 // Common Dialog Flags More Flags dialog.ShowOpen(); // Common Dialog Open Box More Methods var ret = dialog.FileName; dialog = void 0; println("-------Specified File--------" + ret + "--------"); dlg = void 0; return ret; }
     
     
    Note: You need to place wsoffice.dll file in your scripts folder
     

SAP Process

  1. Refresh the SAP Easy Access screen. Click the Select File push button to open the Open File dialog box. Then, choose the file you need and click OK.
     
     
  2. You will see the selected file path displayed on the input field, as shown below.
     
     

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