Purpose: Displaying Object Data into Liquid UI Table:
This is useful for displaying object data (e.g., in JSON format) that can be read and shown directly in a Liquid UI table, making it easier to visualize structured data such as event logs, device information, and analytics data.
Please follow the below steps:
Step-1: Open the Script file "SAPLSTMTR_NAVIGATION.E0100.sjs" or Create it if it is not present in the WS Directory as configured in the "guixt.sjs" file.
Step-2: Add the below Code Snippet and Save it.
//Deleting the Screen Controls
//Liquid UI Code:
del("X[IMAGE_CONTAINER]");
//Design Screen
if(z_flag==1){
title("Event Data - Screen Modified using Liquid UI");
text([8,1],"Total Count: &V[totalRows]");
// Create a new table with the appropriate number of rows based on results length
table([1, 1], [4, 96], { "name": "event_table", "title": "Event Data", "rows":totalRows,"rowselection":true,"columnselection":true});
// Add columns to the table
column("Sl.No", { "size": 5, "name": "slno_column" });
column("Timestamp", { "size": 25, "name": "timestamp_column" });
column("Device ID", { "size": 25, "name": "deviceid_column" });
column("Temperature (Sample)", { "size": 18, "name": "temperature_column" });
column("Temperature (Alert)", { "size": 15, "name": "alert_column" });
// Populating the Liquid UI table with the extracted data
for(var j=0;j<totalRows;j++){
event_table.slno_column[j] = Eventdata[j][0];
event_table.timestamp_column[j] = Eventdata[j][1];
event_table.deviceid_column[j] = Eventdata[j][2];
event_table.temperature_column[j] = Eventdata[j][3];
event_table.alert_column[j] = Eventdata[j][4];
}
}
//Defining the Eventdata Array and Processing Results
function GetEventData(){
// Task Event Data
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
}
}
}
]
};
Eventdata = [];
totalRows = objTaskEventList.results.length;
// Values Containing all relevant data for each record
for (var j=0,idx=1;j<totalRows;j++,idx++) {
var result = objTaskEventList.results[j];
var Values = [
idx, // Sl.No
result.event.timestamp, // Timestamp
result.event.deviceId, // Device ID
result.decode.temperature.sample, // Temperature (Sample)
result.decode.temperature.alert // Temperature (Alert)
];
Eventdata.push(Values);
}
set("V[z_flag]","1");
}
// Calling the function to display the event data
pushbutton([TOOLBAR],"@6S@Get Event Data","?",{"process":GetEventData});
Refer to the Attachment for clarity....
