Information Card List widget events
- Last UpdatedOct 10, 2025
- 2 minute read
The Information Card List widget supports the following events:
On Initialize
Use scripts on the onInitialize event of a widget to accomplish a specific operation after the widget is initialized but before it's rendered to the UI.
Example
var testData = {
//card contents design
cardLayoutMapping: [
["TEXT", "TEXT", "TEXT"], //column 1
["TEXT", "TEXT", "TEXT"], //column 2
["IMAGE"] //column 3
],
// card Attribute setting
cardAttributeSetting: {
textRowHeight: "30px", //TEXT row height
imageRowHeight: "30px", //IMAGE row height
minimumColumnWidth: ["150px", "150px", "200px"] // min. column width
},
// CSS style for individual items
// user to provide valid css style to be applied to the items
// it will be applied to the items
rowLayoutStyling : [
["font-size:16px;font-weight: bold;", "font-size:14px;", "font-size:14px;"],
["font-size:16px;font-weight: bold;", "font-size:14px;", "font-size:14px;"],
["font-size:16px;font-weight: bold;"]
],
//data input for cards begin
cards: [
//card 1
{
"displayData":
[
["Lemonade 300ml", "Sequence: 0 ", "Assigned"],
["72852", "2400/4000", "Customer 3 "],
[{
"img_id": "cardLibraryStopped",
"status_text": "Stopped"
}]
],
"primaryData":
{
"ID":1,
"Customer":1,
"Sequence":1
}
},
//card 2
{
"displayData":
[
["Citrus 100ml", "Sequence: 2 ", "Produced"],
["32456", "400/1000", "Customer 1 "],
[{
"img_id": "cardLibraryRunning",
"status_text": "Running"
}]
],
"primaryData":
{
"ID":2,
"Customer":2,
"Sequence":2
}
},
//card 3
{
"displayData":
[
["Grape 200ml", "Sequence: 1 ", "Requested"],
["11835", "3000/4000", "Customer 2 "],
[{
"img_id": "cardLibraryPaused",
"status_text": "Paused"
}]
],
"primaryData":
{
"ID":3,
"Customer":3,
"Sequence":3
}
}
],
//cards input end
// external image library content mapping
externalImageLibrary: [{
img_id: "Delay",
img_data: <For example image value, see the sample configuration file>
img_alt_txt: "Delayed",
}, ],
};
control.findByXmlNode("Widget1").widgetProperties.data = JSON.stringify(testData);
On Selection Change
Use scripts for the onSelectionChange event of the widget to accomplish a specific operation such as populating the selectedCard property with data associated to a new selection made.
Note: The card selection is retained when the user selects the card, either by mouse click or using the selectCard property.
Example
The following script retrieves the ID and card information of a selected card.
var card = control.findByXmlNode("Widget1").widgetProperties.selectedCard;
if(card !=null && card != "")
{
try
{
var cardData = JSON.parse(card);
var id = cardData.ID ; // zero based index
var cardPrimaryData = cardData.card; //retrieve the card primary data object
console.log("index: " + id);
console.log("cardprimaryData:"+ cardPrimaryData);
//user can log the different properties if required e.g
for (const property in cardPrimaryData) {
console.log(`${property}: ${ cardPrimaryData[property]}`);
}
}
catch(ex)
{
}
}
On Refresh
Use scripts for the onRefresh event of a widget to refresh the widget. This event is triggered when the refresh property is set. You can use this with the data property.
For example script, see On Initialize.