進度滑動條 (主題化)
「進度滑動條」小器具可讓您將複雜的版面配置分割為多個檢視。您可使用此小器具將工作流程分割為線性步驟，來簡化複雜流程。進度滑動條中的每個步驟都可以顯示已包含混搭，其中顯示不同小器具。您可以使用「已包含混搭」小器具來顯示目前步驟編號的特定混搭。目前步驟會反白顯示，使用者可以在步驟之間導覽，這樣更容易瞭解表單或流程的進度。
資料格式
您必須使用表示步驟資料結構的欄位定義建立資料負載。資料負載必須包括步驟編號、標籤與關聯混搭的欄位定義。下表列出資料負載的資料格式：
|
步驟編號
|
步驟標籤
|
步驟混搭名稱
|
步驟互動
|
步驟狀態
|
|
|---|---|---|---|---|---|
|
欄位定義
|
StepNumber: {name: 'StepNumber', baseType: 'NUMBER'}
|
StepLabel: {name: 'StepLabel', baseType: 'STRING'}
|
StepMashupName: {name: 'StepMashupName', baseType: MASHUPNAME'}
|
StepInteracive: {name: 'StepInteracive', baseType: 'BOOLEAN'}
|
StepState: {name: 'StepState', baseType: 'STRING'}
|
|
使用
|
定義步驟編號。
|
定義步驟標籤。
|
定義與步驟相關聯的混搭名稱。
|
定義步驟的互動狀態。
|
定義步驟的狀態。選項：Complete、Inactive、Current、Error
|
|
基礎類型
|
NUMBER
|
STRING
|
NUMBER
|
BOOLEAN
|
STRING
|
|
列範例
|
StepNumber: 1
|
StepLabel: 'Step 1'
|
StepMashupName: 'Mashup1'
|
StepInteractive: true
|
StepLabel: 'current'
|
下圖顯示具有 y 軸四個欄位定義之資料負載中已傳回資料的範例：
將進度滑動條小器具新增至混搭
1. 將進度滑動條新增至版面配置中的空白容器。
2. 將「已包含混搭」新增至第二個容器。
3. 在「資料」面板中，將所傳回資料負載的 All Data 內容繫結至小器具的 Data 內容。
4. 在「內容」面板上，配置下列內容：
◦ StepNumberField - 選取步驟編號的資料負載欄。
◦ StepLabelField - 選取步驟標籤的資料負載欄。
◦ StepMashupNameField - 選取混搭名稱的資料負載欄。請確定混搭名稱存在。
◦ StepInteractiveField - 選取用來指定步驟是否為互動的資料負載欄。
◦ StepStateField - 選取用來指定目前步驟的資料負載欄。
5. 或者，將 IsInteractive 小器具內容設定為 True，以允許使用者透過按一下步驟標籤來在步驟之間導覽。
6. 將 CurrentStepMashup 小器具內容繫結至「已包含混搭」小器具的 Name 內容。
7. 按一下「儲存」，然後按一下「檢視混搭」。
在執行時間，會顯示與目前步驟相關聯的混搭。
啟用互動步驟
依預設，對於使用者與步驟互動的支援在執行時間為禁用。欲新增在步驟之間導覽的支援，您必須使用混搭中小器具或服務中的事件。例如，您可以新增可讓使用者移至下一步或上一步的按鈕。
您可啟用 IsInteractive 內容，以讓使用者可以透過按一下步驟標籤來在執行時間於步驟之間導覽。這也可以讓使用者以隨機順序在步驟之間導覽。下圖顯示了互動式進度滑動條。
小器具內容
屬性名稱 | 描述 | 基礎類型 | 預設值 | 繫結 | 當地語系化 |
|---|---|---|---|---|---|
CurrentStepMashup | 擷取目前步驟的混搭名稱。 | STRING | N/A | Y | N |
CurrentStepNumber | 在執行時間設定或擷取目前步驟編號。 | NUMBER | N/A | Y | N |
Data | 用來定義要顯示在小器具上之步驟的資料負載資料來源。 | INFOTABLE | Y | N | |
ErrorStateIcon | 指定要在進度滑動條資料無法載入時顯示的圖示。 | MEDIALINK | error | Y | N |
ErrorStateText | 指定要在進度滑動條資料無法載入時顯示的文字。 | STRING | [[ProgressTracker.unableToLoadData]] | Y | Y |
IsInteractive | 指定步驟是否可為互動式步驟。 | BOOLEAN | False | Y | N |
MinStepSpacing | 設定進度滑動條上分隔步驟的最小水平線長度。 | NUMBER | 90 | N | N |
NoBindingIcon | 指定要在進度滑動條未繫結至資料來源時顯示的圖示。 | MEDIALINK | bind | N | N |
NoBindingText | 指定要在進度滑動條未繫結至資料來源時顯示的文字。 | STRING | [[ProgressTracker.noDataToDisplay]] | N | Y |
NoDataIcon | 指定進度滑動條資料不包含任何步驟時顯示的圖示。 | MEDIALINK | not visible | Y | N |
NoDataText | 指定進度滑動條資料不包含任何步驟時顯示的文字。 | STRING | [[ProgressTracker.noStepData]] | Y | Y |
SelectedData | 表示所選步驟資料的資料負載。 | INFOTABLE | Y | N | |
StepClicked | 當按一下步驟時觸發的可繫結事件。 | 事件 | Y | N | |
StepInteractiveField | 指定定義步驟是否為互動式步驟的資料負載欄位。 | 資料負載欄位 | N | N | |
StepLabelField | 指定包含步驟標籤的資料負載欄位。 | 資料負載欄位 | N | N | |
StepMashupNameField | 指定定義要針對每個步驟顯示之混搭的資料負載欄位。 | 資料負載欄位 | N | N | |
StepNumberField | 指定包含步驟編號的資料負載欄位。 | 資料負載欄位 | N | N | |
StepSize | 設定步驟圖示大小。選項：「小」、「中」、「大」 | STRING | 「中」 | Y | N |
StepStateField | 指定定義步驟狀態的資料負載欄位。 | 資料負載欄位 | N | N | |
TabSequence | 設定使用者按下 Tab 鍵時小器具的反白順序。 | NUMBER | 0 | N | N |
Height | 設定當將小器具新增至具有固定大小的容器時的小器具高度。 | NUMBER | 90 | N | N |
Width | 設定當將小器具新增至具有固定大小的容器時的小器具寬度。 | NUMBER | 600 | N | N |