Custom Table
Overview
Custom Table charts render Excel-like display effects by reading data sources. In the chart, you can display text, images, QR codes, barcodes, etc.
Settings
| Setting | Description |
|---|---|
| Data Source Type | Configure the type of data source. Options: Call Automation, Use Expression Calculation |
| Call Automation Return Data | The automation to be called when the data source type is Call Automation. Return data through the Set Automation Return Value step |
| Use Expression Calculation Data | The expression to be executed when the data source type is Use Expression Calculation. |
| Table Style - Border | |
| Call Automation After Click | Automation triggered after clicking on custom chart content. |
| Call Automation After Double Click | Automation triggered after double-clicking on custom chart content. |
| Allow Export Excel | When enabled, supports exporting custom table Excel data |
| Refresh Chart When the Following Data Tables Change | Refresh card data when the configured data table data changes (including Data table record creation, Data table record deletion, Data table record modification) |
Data Format
The data format returned by automation is a two-dimensional array, representing cells displayed in the table. Each element in the array is a Cell object
javascript
[
[{v:11},{v:12}],
[{v:21},{v:22}],
[{v:31},{v:32}]
]Cell Property Cell
| Property | Type | Description |
|---|---|---|
| v | Object | Cell value |
| t | String | Cell type, optional values: txt text, img image, barcode barcode, qrcode QR code, date date type |
| s | Style | Cell style |
| cs | Integer | How many cells to merge to the right, for example, when cs=2, the cell occupies 2 spaces |
| rs | Integer | How many cells to merge to the bottom, for example, when rs=2, the cell occupies 2 spaces |
Cell Style Property Style
| Property | Type | Description |
|---|---|---|
| fmt | String | When t equals date, fmt sets the displayed date format, for example, yyyy-MM-DD is in year-month-day format, specific formats can refer to the moment library |
| barcode | String | Barcode type, optional values: CODE39 CODE128 CODE128A CODE128B CODE128C ISBN EAN13 EAN8 EAN5 EAN2 UPC ITF ITF14 MSI MSI11 MSI1010 MSI1110 pharmacode codabar |
| fs | Integer | Font size |
| f | String | Font |
| c | String | Cell color |
| bg | String | Cell background color |
| w | Integer | Cell width |
| h | Integer | Cell height |
| ph | Integer | Cell horizontal padding |
| pv | Integer | Cell vertical padding |
| bwTop | Integer | Cell top border width |
| bsTop | Integer | Cell top border style, optional values: solid solid line, dashed dashed line |
| bcTop | String | Cell top border color |
| bwBottom | Integer | Cell bottom border width |
| bsBottom | Integer | Cell bottom border style, optional values: solid solid line, dashed dashed line |
| bcBottom | String | Cell bottom border color |
| bwLeft | Integer | Cell left border width |
| bsLeft | Integer | Cell left border style, optional values: solid solid line, dashed dashed line |
| bcLeft | String | Cell left border color |
| bwRight | Integer | Cell right border width |
| bsRight | Integer | Cell right border style, optional values: solid solid line, dashed dashed line |
| bcRight | String | Cell right border color |
| ha | String | Horizontal layout, optional values: left left aligned, center center aligned, right right aligned |
| va | String | Vertical layout, optional values: top top aligned, middle center aligned, bottom bottom aligned |
| italic | Boolean | Whether it is italic |
| bold | Boolean | Whether it is bold |
The following is a simple example
javascript
[
[{v:'Header',cs:3,s:{fs:20,bold:true}}],//Header spans three columns, centered, bold, font size 20
[{v:'0123456789',t:'barcode',s:{barcode:'CODE39'}},{v:2,s:{w:100,h:100}},{v:'Right Aligned',s:{w:100,ha:'right'}}],//First column shows barcode
[{v:'https//informat.cn',t:'qrcode',s:{w:200,w:200}},{v:2},{v:3}],//First column shows QR code
[{v:'https://www.informat.cn/assets/images/logo.png',t:'img',s:{w:200,w:200}},{v:2},{v:3}],//First column shows image
[{v:'Red Font',s:{c:'#ff0000',bg:'#00ff00'}},{v:2},{v:3}],//First column red font, green background
[{v:'Red Border',s:{bw:1,bc:'#ff0000',bs:'dashed'}},{v:2},{v:3}],//Red border
[{v:new Date(),t:'date',s:{fmt:'yyyy-MM-DD'}},{v:2},{v:3}],//Date type
[1,2,'Text']//Return data directly
]Data Acquisition
Custom tables obtain data through automation programs. The automation program accepts a parameter, type Record, representing the filtering parameters passed by the dashboard
Interaction
Clicking or double-clicking a cell in the table can trigger an automation program, which accepts a parameter of the following type
javascript
{
row:Number,//Clicked row
col:Number,//Clicked column
value:Object//Clicked value
}Usage Example
Suppose you need to generate an inventory statistics table according to the time period selected by the user
Dependent Data Tables
The following is the structure of the data tables dependent on the example:
Product Table
| Name | Identifier | Type | Description |
|---|---|---|---|
| Product Name | name | Single Line Text | |
| Barcode | code | Single Line Text |
Inventory Record Table
| Name | Identifier | Type | Description |
|---|---|---|---|
| Product | good | Related Record | |
| Barcode | goodCode | Related Record Field | |
| Inventory Operation | type | List Selection | Options: Outbound, Inbound |
| Quantity | quantity | Integer | |
| Operation Time | time | Date |
Generate Custom Table Data
The automation program adds a parameter of type Record to obtain the parameters defined in the card, queries the Inventory Record Table according to the start and end time, processes the query data, generates custom table data, and finally returns the data through the Set Automation Return Value step.
The following is the generated custom table data:
javascript
[
[
{"rs":2,"v":"Product","w":100},
{"rs":2,"v":"Barcode","w":50},
{"cs":9,"v":"Inventory Status"}
],
[
{"cs":2,"v":"Total","w":30},
{"v":"2023-04-01","w":30},
{"v":"2023-04-02","w":30},
{"v":"2023-04-03","w":30},
{"v":"2023-04-04","w":30},
{"v":"2023-04-05","w":30},
{"v":"2023-04-06","w":30},
{"v":"2023-04-07","w":30}
],
[
{"rs":2,"v":"Coca-Cola (500ml)"},
{"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"049000050120"},
"Inbound Quantity",2374,282,261,378,435,327,274,417
],
["Outbound Quantity",2597,282,261,378,435,327,274,417],
[
{"rs":2,"v":"Wahaha AD Calcium Milk (250ml)"},
{"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6902083890256"}
,"Inbound Quantity",2207,323,198,335,359,198,401,393
],
["Outbound Quantity",2182,323,198,335,359,198,401,393],
[
{"rs":2,"v":"Three Squirrels Pecan Nuts (110g)"},
{"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6970349130014"},
"Inbound Quantity",1008,58,68,186,289,75,171,161
],
["Outbound Quantity",1072,58,68,186,289,75,171,161],
[
{"rs":2,"v":"Qiaqia Sunflower Seeds (208g)"},
{"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6901668026551"},
"Inbound Quantity",2363,510,282,219,363,436,335,218
],
["Outbound Quantity",2379,510,282,219,363,436,335,218],
[
{"rs":2,"v":"Master Kong Instant Noodles (Beef Flavor, 105g)"},
{"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6920155402703"},
"Inbound Quantity",2422,147,431,440,394,281,444,285
],
["Outbound Quantity",2600,147,431,440,394,281,444,285],
[
{"rs":2,"v":"Mizone Vitamin Drink (Lime Flavor, 600ml)"},
{"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6902083885559"},
"Inbound Quantity",1297,295,122,228,87,219,173,173
],
["Outbound Quantity",977,295,122,228,87,219,173,173],
[
{"rs":2,"v":"Red Bull Energy Drink (Original, 250ml)"},
{"rs":2,"s":{"barcode":"CODE39"},"t":"barcode","v":"6920202888885"},
"Inbound Quantity",2194,289,231,275,188,520,366,325
],
["Outbound Quantity",2178,289,231,275,188,520,366,325]
]