進行状況トラッカー (テーマ指定可能)
進行状況トラッカーウィジェットでは、複雑なレイアウトを複数のビューに分割できます。このウィジェットを使用して、ワークフローを線形ステップに分割することで、複雑なプロセスを簡略化できます。進行状況トラッカーのステップごとに、別個のウィジェットが表示される組み込みマッシュアップを表示できます。組み込みマッシュアップウィジェットを使用して、現在のステップ番号に対応するマッシュアップを表示できます。現在のステップがハイライトされ、ユーザーはステップ間を移動できるので、フォームやプロセスの進行状況をより簡単に把握できます。
データ形式
ステップのデータ構造を表すフィールド定義を含むインフォテーブルを作成する必要があります。インフォテーブルには、ステップの番号、ラベル、関連マッシュアップのフィールド定義が含まれている必要があります。次のテーブルに、インフォテーブルのデータ形式を示します。
|
ステップ番号
|
ステップラベル
|
ステップマッシュアップ名
|
ステップ対話形式
|
ステップ状態
|
|
|---|---|---|---|---|---|
|
フィールド定義
|
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 軸に 4 つのフィールド定義があるインフォテーブルから返されたデータの例を示しています。
マッシュアップへの進行状況トラッカーウィジェットの追加
1. レイアウト内の空のコンテナに進行状況トラッカーを追加します。
2. 2 つ目のコンテナに組み込みマッシュアップを追加します。
3. 「データ」パネルで、返されるインフォテーブルの All Data プロパティをウィジェットの Data プロパティにバインドします。
4. 「プロパティ」パネルで、以下のプロパティを設定します。
◦ StepNumberField - ステップ番号のインフォテーブル列を選択します。
◦ StepLabelField - ステップラベルのインフォテーブル列を選択します。
◦ StepMashupNameField - マッシュアップ名のインフォテーブル列を選択します。マッシュアップ名が存在することを確認します。
◦ StepInteractiveField - ステップが対話形式であるかどうかを指定するときに使用するインフォテーブル列を選択します。
◦ StepStateField - 現在のステップを指定するときに使用するインフォテーブル列を選択します。
5. 必要に応じて、IsInteractive ウィジェットプロパティを True に設定して、ユーザーがステップラベルをクリックすることでステップ間を移動できるようにします。
6. CurrentStepMashup ウィジェットプロパティを組み込みマッシュアップウィジェットの Name プロパティにバインドします。
7. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
ランタイムで、現在のステップに関連付けられているマッシュアップが表示されます。
対話形式ステップの有効化
デフォルトでは、ステップでのユーザー操作のサポートはランタイムでは無効になっています。ステップ間の移動のサポートを追加するには、マッシュアップ内のウィジェットまたはサービスからのイベントを使用する必要があります。たとえば、ユーザーが次または前のステップに移動できるようにするボタンを追加できます。
IsInteractive プロパティを有効にすると、ユーザーはステップラベルをクリックすることで、ランタイムでステップ間を移動できるようになります。これにより、ユーザーはステップ間をランダムな順序で移動することも可能になります。次のイメージは、対話形式の進行状況トラッカーを示しています。
ウィジェットのプロパティ
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド
|
ローカリゼーション
|
|---|---|---|---|---|---|
|
CurrentStepMashup
|
現在のステップのマッシュアップ名を取得します。
|
STRING
|
該当なし
|
Y
|
N
|
|
CurrentStepNumber
|
ランタイムに現在のステップ番号を設定または取得します。
|
NUMBER
|
該当なし
|
Y
|
N
|
|
Data
|
ウィジェットに表示するステップの定義に使用されるインフォテーブルデータソース。
|
INFOTABLE
|
Y
|
N
|
|
|
DisableAutoStepCompletion
|
進行状況トラッカーでステップ間を移動するときの、ステップの自動完了を無効にします。有効にすると、ステップの状態は常に StepStateField プロパティで指定されているインフォテーブルデータを使用して設定されます。
|
BOOLEAN
|
False
|
N
|
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
|