範例：範例工具列組態
建立資料服務
1. 在 Composer 中，建立物件或物範本，然後開啟「服務」標籤。
2. 按一下「新增」，為工具列建立新服務。
3. 在「服務資訊」下，鍵入服務的名稱，然後按一下「儲存並繼續」。
4. 在程式碼編輯器中，使用 ToolbarAction 資料形式定義新資料負載。
或者，您可以使用可用的程式碼片段：
a. 在左窗格中，展開「片段」。在「程式碼片段」下，展開 Infotable。
b. 選取 Create Infotable from datashape 片段以建立資料負載。對話方塊即會開啟。
c. 在對話方塊中，選取 ToolbarAction 資料形式，然後按一下「插入程式碼片段」。程式碼片段即會新增至程式碼編輯器。
5. 使用資料形式為每個資料負載欄位新增包含值的列，來定義工具列動作。定義列的語法如下所示：
<infotable_name>.AddRow(<Row_Object>);
6. 完成定義服務後，按一下「完成」。
7. 按一下「儲存」，儲存對實體的變更。
 |
按一下「執行」，預覽從資料服務傳回的輸出。
|
建立動作資料負載
下列資料服務顯示了使用 ToolbarAction 資料形式建立工具列的範例。
在第一個部份中，使用 CreateInfoTableFromDataShape() 方法建立資料負載：
var toolbarData = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(toolbarData);
接下來，使用 ToolbarAction 資料形式中動作類型的可用選項來定義工具列動作。您可以使用 AddRows() 資料負載方法，將資料欄位值作為 JSON 物件傳遞。將資料負載資料儲存在名為 result 的變數中。下列服務定義了一個資料負載，其中包含「工具列」小器具的多個動作。
var toolbarData = {
infoTableName: "InfoTable",
dataShapeName : "ToolbarAction"
};
var toolbarData = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(toolbarData);
// Link Action
toolbarData.AddRow({
actionId: "L1",
actionType: "link",
actionLabel: "Link",
actionTooltip: "A link to an external resource.",
actionDisabled: false,
actionVisible: true,
linkDestination: 'https://www.ptc.com/',
linkType: "Primary",
actionMaxWidth: 100
});
// Toggle Button Action
toolbarData.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Hide Header",
actionTooltip: "Hides the grid header row.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'left',
actionMaxWidth: 160
});
// Dropdown Action
toolbarData.AddRow({
actionId: "DD2",
actionType: "dropdown",
actionLabel: "Row Height:",
actionTooltip: "Controls the height of the body rows.",
actionDisabled: false,
actionVisible: true,
dropdownLabelPosition: "left",
dropdownData: [{label:" Compact 32px", value: "32"}, {label:"Default 48px", value: "48"}, {label:"Tall 64px", value: "64"}],
dropdownSelectedText: "48",
actionMaxWidth: 220,
alignRight: true
});
// Button Action
toolbarData.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Edit",
actionTooltip: "The tooltip for the Edit button.",
buttonIcon: "ResetIcon",
actionDisabled: true,
actionVisible: true,
buttonType: "transparent",
actionMaxWidth: 140,
alignRight: true,
});
// Button Action
toolbarData.AddRow({
actionId: "B2",
actionType: "button",
actionLabel: "Reset",
actionTooltip: "The tooltip for the Reset button.",
actionDisabled: false,
actionVisible: true,
buttonType: "transparent",
buttonIcon: "EditIcon",
actionMaxWidth: 140,
alignRight: true
});
result=toolbarData;
infoTableName: "InfoTable",
dataShapeName : "ToolbarAction"
};
var toolbarData = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(toolbarData);
// Link Action
toolbarData.AddRow({
actionId: "L1",
actionType: "link",
actionLabel: "Link",
actionTooltip: "A link to an external resource.",
actionDisabled: false,
actionVisible: true,
linkDestination: 'https://www.ptc.com/',
linkType: "Primary",
actionMaxWidth: 100
});
// Toggle Button Action
toolbarData.AddRow({
actionId: "T1",
actionType: "toggle",
actionLabel: "Hide Header",
actionTooltip: "Hides the grid header row.",
actionDisabled: false,
actionVisible: true,
toggleChipIcon: true,
toggleState: false,
toggleLabelPosition: 'left',
actionMaxWidth: 160
});
// Dropdown Action
toolbarData.AddRow({
actionId: "DD2",
actionType: "dropdown",
actionLabel: "Row Height:",
actionTooltip: "Controls the height of the body rows.",
actionDisabled: false,
actionVisible: true,
dropdownLabelPosition: "left",
dropdownData: [{label:" Compact 32px", value: "32"}, {label:"Default 48px", value: "48"}, {label:"Tall 64px", value: "64"}],
dropdownSelectedText: "48",
actionMaxWidth: 220,
alignRight: true
});
// Button Action
toolbarData.AddRow({
actionId: "B1",
actionType: "button",
actionLabel: "Edit",
actionTooltip: "The tooltip for the Edit button.",
buttonIcon: "ResetIcon",
actionDisabled: true,
actionVisible: true,
buttonType: "transparent",
actionMaxWidth: 140,
alignRight: true,
});
// Button Action
toolbarData.AddRow({
actionId: "B2",
actionType: "button",
actionLabel: "Reset",
actionTooltip: "The tooltip for the Reset button.",
actionDisabled: false,
actionVisible: true,
buttonType: "transparent",
buttonIcon: "EditIcon",
actionMaxWidth: 140,
alignRight: true
});
result=toolbarData;
下圖顯示執行資料服務後的資料負載輸出：
資料負載包含五列，用來定義及配置五個動作。下圖顯示了執行時間在「工具列」小器具中的動作。
動作會根據它們在資料負載中的順序以及 alignRight 選項的值，顯示在工具列上的不同區域中。您可以使用各種不同組態建立工具列，以在混搭中為小器具、服務或功能提供精簡控制項。例如，您可以在「工具列」小器具與「格點」小器具之間建立繫結，以在執行時間配置及篩選格點。