JSON データを使用したグリッドの設定
ウィジェットプロパティと列コンフィギュレーションプロパティに加え、以下の方法で JSON データを使用してグリッドウィジェットのプロパティを動的に設定できます。
• コンフィギュレーションデータを生成するカスタムデータサービスを作成します。
• Mashup Builder でウィジェットの Configuration プロパティにコンフィギュレーションデータを手動で追加します。
JSON データサービスの使用
動的コンフィギュレーションを使用するグリッドにデータを表示するには、以下のいずれかの方法でコンフィギュレーションデータを作成しなければなりません。
• Composer で Thing に新規サービスを作成し、JavaScript データサービスを記述します。使用可能なコードスニペットおよびその他の便利なショートカットを使用できます。
• 任意のテキストエディタで JavaScript サービスを記述し、それを Composer 内にある Thing の新規データサービスのコードエディタ内にコピーします。
• グリッド (アドバンス) で使用可能なサンプルの出力を JSON フォーマットに変更します。
インポートしたサンプルコンフィギュレーションサービスを ThingWorx Composer で使用するには、次の手順に従います。
1. Composer から、「モデリング」/「Thing」をブラウズし、Thing GridAdvancedExampleServices を開きます。
2. 左側のパネルで「サービス」タブを開くと、使用可能なサンプルサービスが右側に表示されます。
3. いずれかのコンフィギュレーションサービスを選択し、「編集」をクリックしてスクリプトコードを表示します。
4. スクリプトを編集して保存します。詳細については、「JSON コンフィギュレーションプロパティ」のセクションを参照してください。
データサービスを使用してグリッドを設定するには、次の手順に従います。
1. Composer で、新規 Thing エンティティとデータサービスを作成して、動的コンフィギュレーションデータを保存します。
2. サービスで、JavaScript コンフィギュレーションサービスを作成し、出力を JSON に設定します。
3. Mashup Builder で、「データ」パネルを使用して、手順 1 で作成した Thing のコンフィギュレーションサービスを追加します。
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,
"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,
"maxHeight": 20,
"selectionCheckboxAlignment": "bottom",
"sortSelectionColumn": true
},
"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"
}
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"
}
}
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": {
…
}
}
ツリーグリッドのコンフィギュレーションプロパティ
"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