Author Topic: Displaying Object data into Liquid UI Table  (Read 3413 times)

Ashfaq Ahmed

  • Administrator
  • Newbie
  • *****
  • Posts: 32
    • View Profile
Displaying Object data into Liquid UI Table
« on: October 28, 2024, 10:58:30 AM »
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....
« Last Edit: October 29, 2024, 10:28:35 AM by Ashfaq Ahmed »