Mashup Builder > ウィジェット > 標準ウィジェット > 進行状況トラッカー (テーマ指定可能)
進行状況トラッカー (テーマ指定可能)
進行状況トラッカーウィジェットでは、複雑なレイアウトを複数のビューに分割できます。このウィジェットを使用して、ワークフローを線形ステップに分割することで、複雑なプロセスを簡略化できます。進行状況トラッカーのステップごとに、別個のウィジェットが表示される組み込みマッシュアップを表示できます。組み込みマッシュアップウィジェットを使用して、現在のステップ番号に対応するマッシュアップを表示できます。現在のステップがハイライトされ、ユーザーはステップ間を移動できるので、フォームやプロセスの進行状況をより簡単に把握できます。
データ形式
ステップのデータ構造を表すフィールド定義を含むインフォテーブルを作成する必要があります。インフォテーブルには、ステップの番号、ラベル、関連マッシュアップのフィールド定義が含まれている必要があります。次のテーブルに、インフォテーブルのデータ形式を示します。
ステップ番号
ステップラベル
ステップマッシュアップ名
ステップ対話形式
ステップ状態
フィールド定義
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'}
使用
ステップ番号を定義します。
ステップラベルを定義します。
ステップに関連付けられているマッシュアップ名を定義します。
ステップの対話状態を定義します。
ステップの状態を定義します。オプション: CompleteInactiveCurrentError
ベースタイプ
NUMBER
STRING
NUMBER
BOOLEAN
STRING
行の例
StepNumber: 1
StepLabel: 'Step 1'
StepMashupName: 'Mashup1'
StepInteractive: true
StepLabel: 'current'
次のイメージは、y 軸に 4 つのフィールド定義があるインフォテーブルから返されたデータの例を示しています。
ウィジェットに必要なデータを表示する Composer でのサービス出力。
マッシュアップへの進行状況トラッカーウィジェットの追加
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
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
これは役に立ちましたか?