Data
- Last UpdatedOct 10, 2025
- 3 minute read
The Information Card List widget uses this property to pass parameter values that are specified in a supported data structure that contains an array of column definitions.
cardLayoutMapping
The following object property is an array of column definitions. Each array defines the rows that the columns contain.
cardLayoutMapping: [
["TEXT", "TEXT", "TEXT"], //column 1
["TEXT", "TEXT", "TEXT"], //column 2
["IMAGE"] //column 3
]
cardAttributeSetting
The following object property defines all the card attributes.
cardAttributeSetting: {
textRowHeight: "30px", //TEXT row height
imageRowHeight: "30px", //IMAGE row height
minimumColumnWidth: ["150px", "150px", "200px"] // minimum column width },
For the minimumColumnwidth, the number of items in this array must match with the column definitions under the cardLayoutMapping object. The card width is the sum of all column width. If any of the specified width is empty, the default value of 150 pixels is used.
rowLayoutStyling
The following object defines the CSS style for each item in the card. You can provide any valid CSS style that you want to apply to the individual row items in the card. The structure in this object property must match the cardLayoutmapping.
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;"]
]
cards
This defines the card data and includes an array of card object, where each card object contains two mandatory properties, displayData and primaryData.
|
Property |
Description |
|---|---|
|
displayData |
This is an array of columns for the card. Its property structure should match the cardLayoutMapping.
|
|
primaryData |
This is a user-defined card object. This object is passed back to the selectedCard's card property when a user selects a card in the widget. For example script, see Information Card List widget events. |
Example
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
}
},
]
externalImageLibrary
This object property is an array of external image objects. The properties of the image object include:
-
img_id - A string that uniquely identifies the image.
Note: There are images delivered with the widget that you can use and they are part of an internal image library. For more information, see Internal icons for Information Card List widget.
-
img_data - A base64 encoded image data. The browser reads this data and loads the image.
-
img_alt_txt - The alternate text that the browser displays if it's unable to display the image.
Example
externalImageLibrary: [{
img_id: "Delay",
img_data: "<data:image/png;base64>",
img_alt_txt: "Delayed",
}, ],
Sample of the complete data property for reference
See Information Card List widget events.
Error scenario
If there should be a list of three cards, but one of them has an invalid data, the widget will only display two cards together with the following error:
Cannot display one or more cards due to invalid input. For more information, see console.
It's necessary that the data you pass to the information follows the structure described in the example section of the data property.