Configuring the Grid using JSON Data
In addition to the widget properties and column configuration properties, you can configure the Grid widget properties dynamically using JSON data in the following ways:
• Create a custom data service that generates configuration data.
• Add configuration data manually to the widget Configuration property in Mashup Builder.
Using a JSON Data Service
To show data on a grid that uses dynamic configuration, you must create configuration data in one of the following ways:
• Create a new service on a Thing in Composer and write a JavaScript data service. You can use the available code snippets and other helpful shortcuts.
• Write a JavaScript service in any text editor you prefer, and then copy it into the code editor of a new data service for a Thing in Composer.
• Change the output of the samples that are available for the Grid (Advanced) to a JSON format.
To use an imported sample configuration services in ThingWorx Composer, follow these steps:
1. From Composer, browse to Modeling/Things and open the Thing GridAdvancedExampleServices.
2. Open the Services tab in the left panel and the available sample services appear on the right.
3. Select one of the configuration services, and then click Edit to view the script code.
4. Edit the script and then save it. For more information, refer to the JSON Configuration Properties section.
To configure the grid using a data service:
1. In Composer, create a new Thing entity and a data service to store the dynamic configuration data.
2. In the service, create a JavaScript configuration service and set the output to JSON.
3. In the Mashup Builder, use the Data panel to add the configuration service of the Thing you created in Step 1.
4. On the Data panel, expand the data service, then under Returned Data, expand All Data and bind the JSON output to the Configuration property of the Grid widget.
 |
When you bind the configuration service to the grid, widget properties are automatically hidden. If the configuration service is unbound, the other properties appear again.
|
5. Save and view the completed mashup
To configure the grid using JSON data manually:
1. In Mashup Builder, select a Grid widget on the canvas or using the Explorer panel.
2. On the Properties panel, click Add next to the widget Configuration property. A configuration dialog box opens.
3. Type or paste a JSON object that contains the required configuration data for the grid.
4. Click Done. The configurations are applied to the grid.
5. Click Save to save the mashup.
JSON Configuration Properties
The following sections describe the available JSON configuration properties for the Grid.
Column Configuration Properties
This property contains definitions for a column on the grid, such as the column header and the sorting order.
Most of the column definition properties are easy to match with the corresponding properties available in the Mashup Builder. However, the following column definition properties are only available in the Mashup Builder when the data source for the grid is tied to a Data Shape. Then, the following properties correspond to similar options in the Configure Grid Columns dialog box:
• hidden–Defines whether a specific grid column is initially visible or hidden from view. At run time, you can show or hide columns using the columns display menu. This property corresponds to the Show property in the widget configuration dialog box.
• inLayout–Defines whether a specific grid column is visible at run time. When set to false, the end user will not see the column and will have no control over its visibility at run time. However, you can still use the column data for state formatting. This property corresponds to the Exclude property in the widget configuration dialog box.
|
|
You can localize column header titles in the JSON script by placing a localization token in double square brackets. At run time, the tokenized value is translated using the values stored in the localization table.
|
"columns": {
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"verticalAlignment: "top", // *{string} controls the row selection. Options: 'top', 'center', 'bottom'
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true,
"sortSelection": false
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"sortable": true,
"initialSort": "descending",
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"verticalAlignment: "top", // *{string} controls the row selection. Options: 'top', 'center', 'bottom'
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true,
"sortSelection": false
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"sortable": true,
"initialSort": "descending",
"cellHorizontalAlignment": 'center',
"cellVerticalAlignment": 'center',
"headerHorizontalAlignment": 'center',
"headerVerticalAlignment": 'center'
"columnFormatter": {
“format": "0.00F",
"type": "number",
"stateDefinition": {
"name": "weather_eventsConf",
"fieldName": "events",
"type": "non-fixed",
"states": [
{
"name": "Rain",
"value": "Rain",
"comparator": "==",
"styleName": "tableHeaderStyle"
},
{
"name": "Fog",
"value": "Fog",
"comparator": "==",
"styleName": "FogStyle"
}
In ThingWorx 9.3.6 or later, you can use the routeLinks property to route link data using a LinkClicked event.
"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
You can use the showRowNumbers to show or hide the row numbers.
"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}
Row Configuration Properties
Configures row properties, such as default row selection, row height, and row-based state formatting.
"rows": {
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"verticalAlignment":"top", // *{string} controls the vertical alignment of content within rows. Options: 'top', 'center', 'bottom'
"rowFormatter": {
"stateDefinition": {
…
}
}
"selectedRowsChangedCallback": true,
"minHeight": 60,
"maxHeight": 100,
"singleLine": true,
"selection": "multi", // *{string} controls the row selection. Options: 'none', 'single', 'multi'
"defaultSelectedRows": "2,4",
"selectionCheckboxAlignment": 'bottom',
"verticalAlignment":"top", // *{string} controls the vertical alignment of content within rows. Options: 'top', 'center', 'bottom'
"rowFormatter": {
"stateDefinition": {
…
}
}
Tree Grid Configuration Properties
"treeSettings": {
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}
"parentIdFieldName": "parentUid",
"hasChildrenFieldName": "hasChildren",
"maxRowCacheSize": 100000,
"alwaysExpanded": false,
"expandCollapseAll": false,
"expandCollapseIcon": "plus/minus",
"focusNavigationMode": "cell-only",
"selectFocusedItem": false,
"primaryColumnFixedSize": true,
"allowDisabledNodes": true,
"disabledStateField": "disabled",
"disableChildNodes": true,
"expandAllLoadedLevels": false,
"maxExpandedRows": 6,
"preserveRowExpansion": false,
"expandRowOnDoubleClick": false,
"includeRowExpansionParents": true,
"idPathSeparator": '--'
}
Toolbar Configuration Properties
"toolbar":{
"actionsData": ""
"actionsPosition": "after"
}
"actionsData": ""
"actionsPosition": "after"
}
Style Configuration Properties
Optional style properties that control the appearance of the grid, such as background colors, border styles, fonts, and state-specific styles. You can define and use styles to apply for state formatting.
"styles": {
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
"rowStyle1": {
"image": "",
"backgroundColor": "#90ee90",
"fontFamily": [
"helvetica",
"arial"
],
"lineThickness": "1",
"foregroundColor": "#ffffff",
"textDecoration": "",
"lineColor": "#ff0000",
"fontSize": "11px",
"lineStyle": "solid",
"fontStyle": "normal",
"fontWeight": "bold",
"secondaryBackgroundColor": ""
}
}
|
|
Control of font properties is only available when configuring with a service. Font selection is not a property available from the Mashup Builder.
|
Widget Label
"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
Editing Mode and Buttons
You can configure editing on the grid under editButtons.
"editButtons": {
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}
"enabled": true,
"editButton": true,
"editLevel": "row", //* Controls the edit level. Options: "row", "cell", "grid"
"DeleteButton": true,
"rowAddButton": true
"editControlVisibility": "hover", // Controls the visibility of the edit controls on the grid. Options: 'hover', 'always', 'never'}
"editControlType": "link",
"editControlLabel": "Edit",
"editControlIcon": ""
}
Columns Configuration Menu
"columnsMenu": {
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
"options": "both", // Controls the options that are available within the menu. Options: "none", "reorder", "show", "both"
"visibleItems": 6,
"label": "Data View"
}
Validation
"validation" : {
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
"showSuccess": true,
"successIcon": "/Thingworx/MediaEntities/SuccessIcon",
"showFailure": true,
"failureIcon": "/Thingworx/MediaEntities/FailureIcon",
"showCriteria": true,
"criteriaIcon: "/Thingworx/MediaEntities/CriteriaIcon"
}
General Options
"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true