Prerequisites
- Products: Liquid UI WS, Liquid UI Server or Local DLL, Client Software
- Commands: del(), pushbutton(), comment(), table(), column().
Purpose
This article describes retrieving data from a given object and displaying it in a structured format in a Liquid UI table. The table presents relevant information for each event, including fields such as Timestamp, Device ID, Temperature, and Alert status. To demonstrate this process, we will guide you through the following steps considering the SAP Easy Access screen:
- Delete the image container from the SAP Easy Access screen.
- Add a push button to execute the process.
- Add a comment to let the user know about the process.
- Insert a table with the necessary columns.
- Implement a function to retrieve data from a data object.
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
- Delete the image container on the SAP Easy Access screen using del().
//Deletes the image container on the SAP screen del("X[IMAGE_CONTAINER]");
- Add a push button labeled Extract Data to execute the retrievedata process on click.
//Creates a push button to execute the process pushbutton([1,65],"@CF@Extract Data",{"process":retrievedata});
- Add a comment labeled Click the push button to retrieve data to instruct the operation.
//Creates a comment to instruct the operation comment([0,55], "Click the push button to retrieve data");
- Add a table named Data Retrieve Table with columns to display the data, as shown below.
//Creates a Liquid UI table with appropriate columns to display the object data table([1,1],[9,60],{"name":"taskTable","title":"Data Retrieve Table","rows":10,"rowselection":true}); column("Timestamp", {"table":"taskTable","size":20,"name":"z_timestamp",'readonly':true}); column("Device ID", {"table":"taskTable","size":25,"name":"z_deviceId",'readonly':true}); column("Temperature", {"table":"taskTable","size":5,"name":"z_temperature",'readonly':true}); column("Alert", {"table":"taskTable","size":5,"name":"z_alert",'readonly':true});
- Add retrievedata function to retrieve data from an object and populate it into the Liquid UI table.
//Function to retrieve data from object function retrievedata() { var arrData = []; for (var i = 0; i < objTaskEventList.results.length; i++) { //Access the individual object in the array var result = objTaskEventList.results[i]; //Access the required properties var g_timestamp = result.event.timestamp; var g_deviceId = result.event.deviceId; var g_temperature = result.decode.temperature.sample; var g_alert = result.decode.temperature.alert; //Create a row of data var arrRow = [g_timestamp, g_deviceId, g_temperature, g_alert]; arrData.push(arrRow); } //Populate the table with the retrieved data for (var idx = 0; idx < arrData.length; idx++) { taskTable.z_timestamp[idx] = arrData[idx][0]; taskTable.z_deviceId[idx] = arrData[idx][1]; taskTable.z_temperature[idx] = arrData[idx][2]; taskTable.z_alert[idx] = arrData[idx][3]; } } //Data Object var objTaskEventList = { "results": [ { "type": "beacon", "event": { "id": "a308c3f0-bf50-4180-a315-6f5f91a5decc", "timestamp": "2024-10-25T15:39:21Z", "deviceId": "59b0e8c2-87c4-4109-9b4c-bead14ed1f97", "data": { "format": "beacon", "id": "DLN233301440", "rssi": -46, "value": "17.59" } }, "analytics": { "tenant": "f9339f76a7f1143dc30f587a46e09a6e", "recordedTimestamp": "2024-10-25T15:39:37.618Z", "resourceId": "db8597cd-6176-415c-bff4-90583a77f9a6", "timestamp": "2024-10-25T15:39:21Z", "meta": { "data": { "taskId": "3aabc8ea-00f1-4780-9256-817f024d0bd3", "task_alarm": false, "notes": "", "assetIds": [] } }, "coordinates": { "global": { "lat": 37.522003, "lng": -121.953835 } } }, "decode": { "temperature": { "sample": 17.59, "deviation": 0.0, "format": "celsius", "taskId": "3aabc8ea-00f1-4780-9256-817f024d0bd3", "alert": false } } }, { "type": "beacon", "event": { "id": "b32a6d08-cffc-4fd3-b1bb-06a3218a1c2c", "timestamp": "2024-10-25T15:38:51Z", "deviceId": "59b0e8c2-87c4-4109-9b4c-bead14ed1f97", "data": { "format": "beacon", "id": "DLN233301440", "rssi": -46, "value": "17.59" } }, "analytics": { "tenant": "f9339f76a7f1143dc30f587a46e09a6e", "recordedTimestamp": "2024-10-25T15:39:37.618Z", "resourceId": "db8597cd-6176-415c-bff4-90583a77f9a6", "timestamp": "2024-10-25T15:38:51Z", "meta": { "data": { "taskId": "3aabc8ea-00f1-4780-9256-817f024d0bd3", "task_alarm": false, "notes": "", "assetIds": [] } }, "coordinates": { "global": { "lat": 37.522003, "lng": -121.953835 } } }, "decode": { "temperature": { "sample": 17.59, "deviation": 0.0, "format": "celsius", "taskId": "3aabc8ea-00f1-4780-9256-817f024d0bd3", "alert": false } } }, { "type": "beacon", "event": { "id": "4d0357c7-5e57-49c8-b819-f22ba3210405", "timestamp": "2024-10-25T15:38:21Z", "deviceId": "59b0e8c2-87c4-4109-9b4c-bead14ed1f97", "data": { "format": "beacon", "id": "DLN233301440", "rssi": -46, "value": "17.59" } }, "analytics": { "tenant": "f9339f76a7f1143dc30f587a46e09a6e", "recordedTimestamp": "2024-10-25T15:39:37.618Z", "resourceId": "db8597cd-6176-415c-bff4-90583a77f9a6", "timestamp": "2024-10-25T15:38:21Z", "meta": { "data": { "taskId": "3aabc8ea-00f1-4780-9256-817f024d0bd3", "task_alarm": false, "notes": "", "assetIds": [] } }, "coordinates": { "global": { "lat": 37.522003, "lng": -121.953835 } } }, "decode": { "temperature": { "sample": 17.59, "deviation": 0.0, "format": "celsius", "taskId": "3aabc8ea-00f1-4780-9256-817f024d0bd3", "alert": false } } }, { "type": "beacon", "event": { "id": "3c0cf20f-9c6e-4e4b-95d1-d3b0b8b60cc4", "timestamp": "2024-10-25T15:37:51Z", "deviceId": "59b0e8c2-87c4-4109-9b4c-bead14ed1f97", "data": { "format": "beacon", "id": "DLN233301440", "rssi": -46, "value": "17.59" } }, "analytics": { "tenant": "f9339f76a7f1143dc30f587a46e09a6e", "recordedTimestamp": "2024-10-25T15:39:37.618Z", "resourceId": "db8597cd-6176-415c-bff4-90583a77f9a6", "timestamp": "2024-10-25T15:37:51Z", "meta": { "data": { "taskId": "3aabc8ea-00f1-4780-9256-817f024d0bd3", "task_alarm": false, "notes": "", "assetIds": [] } }, "coordinates": { "global": { "lat": 37.522003, "lng": -121.953835 } } }, "decode": { "temperature": { "sample": 17.59, "deviation": 0.0, "format": "celsius", "taskId": "3aabc8ea-00f1-4780-9256-817f024d0bd3", "alert": false } } } ] }
SAP Process
- Refresh the SAP screen, and click the Extract Data push button to display the data in the Liquid UI table, as shown in the image below.
