使用 JSON 資料配置格點
除了小器具內容與欄組態內容以外，您還可以使用 JSON 資料動態配置格點小器具內容，方法如下：
• 建立產生組態資料的自訂資料服務。
• 將組態資料手動新增至 Mashup Builder 中的小器具 Configuration 內容。
使用 JSON 資料服務
欲在使用動態組態的格點上顯示資料，您必須以下列方式之一建立組態資料：
• 在 Composer 中的物件上建立新服務，並編寫 JavaScript 資料服務。您可以使用可用的程式碼片段和其他有用的快捷方式。
• 使用您偏好的任何文字編輯器編寫 JavaScript 服務，然後將其複製到 Composer 中物件上的新資料服務的程式碼編輯器中。
• 將可用於格點 (進階) 的樣本輸出變更為 JSON 格式。
欲在 ThingWorx Composer 中使用匯入的範例組態服務，請遵循下列步驟：
1. 從 Composer 中，瀏覽至「建模」/「物件」，並開啟 GridAdvancedExampleServices 物件。
2. 開啟左側面板中的「服務」標籤，可用範例服務即會顯示在右側。
3. 選取其中一個組態服務，然後按一下「編輯」以檢視指令集程式碼。
4. 編輯指令集，然後予以儲存。如需詳細資訊，請參閱 JSON 組態內容部份。
欲使用資料服務配置格點：
1. 在 Composer 中，建立新的物件實體與資料服務，以儲存動態組態資料。
2. 在服務中，建立 JavaScript 組態並將輸出設定為 JSON。
3. 在 Mashup Builder 中，使用「資料」面板針對您在步驟 1 中建立之物件新增組態服務。
4. 在「資料」面板中，展開資料服務，然後在「傳回的資料」下，展開「所有資料」，並將 JSON 輸出繫結至「格點」小器具的 Configuration 內容。
 |
當您將組態服務繫結至格點時，小器具內容會自動隱藏。如果未繫結組態服務，其他內容將會再次顯示。
|
5. 儲存並檢視完成的混搭
欲使用 JSON 資料手動設定格點：
1. 在 Mashup Builder 中，選取畫布上的「格點」小器具或使用「檔案總管」面板。
2. 在「內容」面板中，按一下 Configuration 內容旁邊的「新增」。組態對話方塊即會開啟。
3. 鍵入或貼上包含格點所需組態資料的 JSON 物件。
4. 按一下「完成」。即會將組態套用至格點。
5. 按一下「儲存」，儲存混搭。
JSON 組態內容
以下幾節將介紹格點的可用 JSON 組態內容。
欄組態內容
此內容包含格點上欄的定義，例如欄標題與排序順序。
大多數欄定義內容與 Mashup Builder 中可用的對應內容都很容易匹配。不過，只有當網格的資料來源與資料形式相關聯時，下列欄定義內容才能在 Mashup Builder 中使用。下列內容對應於「配置格點欄」對話方塊中的類似選項：
• hidden - 定義特定網格欄最初對於檢視而言是可見還是隱藏。在執行時間，您可以使用欄顯示選單來顯示或隱藏欄。此內容對應於小器具組態對話方塊中的「顯示」內容。
• inLayout - 定義特定格點欄在執行時間是否可見。若設定為 false，終端使用者在執行時間將看不到欄，且無法控制其可見度。但是，仍然可使用欄資料進行狀態格式化。此內容對應於小器具組態對話方塊中的 Exclude 內容。
|
|
您可以將當地語系化權杖置於雙方括號內，來本地化 JSON 指令集中的欄標題。在執行時間，會使用儲存在當地語系化表中的值來翻譯權杖化的值。
|
"columns": {
"idFieldName": "id",
"header": {
"hide": false,
"singleLine": true,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"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,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"columnDefs": [
{
"targets": 0,
"fieldName": "max_temp",
"title": "Max Temp",
"width": "95px",
"autoWidth": false,
"inLayout": true,
"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"
}
在 ThingWorx 9.3.6 或更新版本中，您可以使用 routeLinks 內容來使用 LinkClicked 事件路由連結資料。
"columnFormatter": {
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
"format":"_blank",
"type":"hyperlink",
"routeLinks": true,
"params": {
"textFormat":"Link",
"dependentField":"events"
}
}
在 ThingWorx 9.4 或更新版本中，您可以在動態組態中使用 showRowNumbers 內容。
"columns":{},
"showRowNumbers": true,
"treeGridSettings":{}
列組態內容
配置列內容，例如預設列選取、列高度與以列為基礎的狀態格式。
"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',
"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',
"rowFormatter": {
"stateDefinition": {
…
}
}
樹格點組態內容
下列組態適用於 ThingWorx 9.3.4 或更新版本：
"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":{
"actionsData": ""
"actionsPosition": "after"
}
"actionsData": ""
"actionsPosition": "after"
}
樣式組態內容
用於控制格點外觀的選用樣式內容，例如背景顏色、邊框樣式、字型以及狀態特定樣式。您可以定義並使用樣式來套用狀態格式。
"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": ""
}
}
|
|
只有在使用服務進行配置時，才可以控制字型內容。字型選取不是 Mashup Builder 中的可用內容。
|
小器具標籤
"label": {
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
"label": "Grid Widget",
"type": "body",
"alignment": "center"
}
編輯模式與按鈕
您可以在 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": ""
}
欄組態選單
"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" : {
"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"
}
一般選項
"filter": {
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true
"show": true
},
"resetButton": {
"enabled": true
},
"resizeColumns": true,
"reorderColumns": true