14.06 Display OData service details in Liquid UI Table

Prerequisites

• Products: Liquid UI WS, Liquid UI Server or Local DLL, Client Software
• Commands: inputfield(), pushbutton(), wsCurl, set()
• Files: wscurl.dll

Purpose

Learn how to consume the OData service details and display them in the Liquid UI columns using wscurl. We will walk you through the following steps.

1. Delete unnecessary elements on the SAP Easy Access screen using the del command.
2. Load wscurl.dll file
3. Change the title of the screen using the title command
4. Add a groupbox
5. Add a non-editable inputfield
6. Assigning web URL to a variable
7. Assigning a function to the variable
8. Add a Liquid UI table.
9. Add a function to retrieve values from a web URL using wscurl
10. Assigning values to Liquid UI columns

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

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

1. Delete an image container on the SAP Easy Access screen using the del command, as shown in the image below.
   
    

   // Deletes an image container 
   del('X[IMAGE_CONTAINER]');    
   

    
   
    
    
2. Use the load command to add the wscurl.dll file; this allows you to access the functions included in it.
   
    

   // Loads wscurl.dll file 
   
   load('wscurl.dll');
   

    
3. Change the title of the SAP Easy Access screen to Consuming oData Service using the title command.
   
    

   // Changes the title to Consuming oData Service
   
   title('Consuming oData Service');
   

    
   
    
4. Add a group box with the title Consuming oData Service, as shown below.
   
    

   // Adds a groupbox titled Consuming oData Service
   box([1,1],[18,102],'Consuming oData Service');
   

    
   
    
5. Add a non-editable input field with oData Service as label, and z_oData_Service as its technical name.
   
    

   //Adds a non-editable input field with title oData Service
   inputfield([2,2], "oData Service", [2,20],  {"name":"z_oData_Service", "size":80,"readonly":true});
   

    
   
    
6. Now, assign a web URL containing Northwind customer details to the created input field, as shown below:
   
    

   //Assigns URL containing Northwind customer details to the input field
   z_oData_Service = "https://services.odata.org/V4/Northwind/Northwind.svc/Customers";
   

    
   
    
7. Declaring and assigning an odata_GetCustomers function to a variable.
   
    

   Assigns custObj to the function
   var custObj = odata_GetCustomers();
   

    
8. Add a function to retrieve values from the oData Service web URL using wsCurl.
   
    

   function odata_GetCustomers() {
      // Use Curl to retrieve oData response 
   
      var wsCurl = new Curl();
      var baseURL = encodeURI("https://services.odata.org/V4/Northwind/Northwind.svc/Customers");
       wsCurl.setopt(Curl.CURLOPT_URL, baseURL);
      wsCurl.setopt(Curl.CURLOPT_HEADER,0);
       wsCurl.setopt(Curl.CURLOPT_VERBOSE,1);
      var response = wsCurl.exec();
      wsCurl.close();
   
      /* Remove any reference for Garbage Collection*/
      wsCurl= NULL;
      response = eval("(" + response + ")");
      return response;
   }
   

    
9. Add a Liquid UI table (Northwind) with three non-editable columns and labels as Company, City, and Country, as shown in the image below.
   
    

   // Display customer table
   table([4,3],[17,101], {"title":"Northwind Customers","name":"tbl_customers","rows":custObj.value.length});
   column("Company",{"size":40,"name":"z_company","readonly":true});
   column("City",{"size":30,"name":"z_city","readonly":true});
   column("Country",{"size":20,"name":"z_country","readonly":true});

    
10. Add a for loop to assign values retrieved from the URL to the Liquid UI columns, and then display the customer details in the created Liquid UI table on an SAP screen, as shown in the image below.
    
     

    for (var j = 0; j < custObj.value.length; j++) { 
       var c = custObj.value[j];
       tbl_customers.z_company[j] = unescape(encodeURI(c.CompanyName));
       tbl_customers.z_city[j] = unescape(encodeURI(c.City));
       tbl_customers.z_country[j] = unescape(encodeURI(c.Country));
       
    };