ステッパー

ステッパーウィジェットを使用して、複数のステップからなるワークフローをユーザーに案内します。このウィジェットはステップの順序と完了済みのステップを表示し、アクティブなステップをハイライトします。

設定オプション

ウィジェット設定パネルのウィジェットの設定タブで、次のオプションを設定できます。

タイプ
- 順番どおり： 設定された完了状態の変数に基づいて、ユーザーが選択できるステップを制限します。どのステップにも完了済みの変数が設定されていない場合、ユーザーは任意のステップを選択できます。それ以外の場合、ユーザーは完了済みの最も先のステップの次のステップまでを選択でき、完了済みの変数が設定されていないステップは未完了として扱われます。たとえば、完了済みの最も先のステップがステップ3の場合、ユーザーはステップ1から4までを選択できます。完了済みのステップがない場合、ユーザーはステップ1のみを選択できます。
- 自由な順番： ユーザーは任意の順序でステップ間を移動し、完了できます。
ステップ：****ステップを追加を選択して、ワークフローの各段階に対応するステップを追加します。各ステップに次のオプションを設定します。
- ラベル： ステップに表示するテキストを設定します。
- クリック時の動作： ユーザーがステップを選択したときにトリガーする Workshop イベントを1つ以上追加します。どのステップにもクリック時の動作のイベントが設定されていない場合、ユーザーはどのステップも選択できません。特定のタブが選択されている間、そのステップをアクティブ時の色で表示するには、そのタブの {tab name} に切り替えイベントを追加します。特定のページが開いている間、そのステップをアクティブ時の色で表示するには、そのページの {page name} に切り替えイベントを追加します。詳しくは、アクティブなステップを参照してください。
- 完了済み： ステップが完了しているかどうかを示すブール変数を設定します。変数が true の場合、ステップには番号やアイコンの代わりにチェックマークが表示され、完了時の色が使用されます。ステップがアクティブな場合は、アクティブ時の色が使用されます。
- アイコン：****テンプレートでアイコンを使用を選択した場合に、ステップに表示するアイコンを設定します。デフォルトは円形シンボルです。
スタイル
- クラシック： 各ステップを円形のマーカーとして表示します。順番どおりのステッパーでは、マーカーを線でつなぎます。
  - 方向：****横方向または縦方向を選択します。
  - テンプレート： 各ステップに番号を表示するにはテキストのみを選択し、各ステップに設定したアイコンを表示するにはアイコンを使用を選択します。順番どおりのステッパーでは、アイコンを使用を選択すると、各ステップのラベルの上に「ステップ 1」などのキャプションも表示されます。
- 強調： ステップを塗りつぶされたセグメントとして表示します。順番どおりのステッパーでは山形のセグメントを表示し、自由な順番のステッパーでは平らなセグメントを表示します。
  - テンプレート： 各ステップに番号を表示するにはテキストのみを選択し、各ステップに設定したアイコンを表示するにはアイコンを使用を選択します。
  - ステップ番号を表示： オンにすると、各ステップのラベルの上に「ステップ 1」などのキャプションが表示されます。このオプションは、アイコンを使用テンプレートを使用する順番どおりのステッパーに適用されます。
完了時の色： 完了済みのステップの色を設定します。デフォルトはグリーン 3です。
アクティブ時の色： アクティブなステップの色を設定します。デフォルトはブルー 3です。ステップをこの色で表示できるのは、クリック時の動作の設定に {tab name} に切り替えまたは {page name} に切り替えイベントが含まれている場合のみです。詳しくは、アクティブなステップを参照してください。

アクティブなステップ

ステッパーウィジェットは、タブウィジェットが選択中のタブを判定する方法と同じ方法で、アクティブなステップを判定します。ステップがアクティブになるには、クリック時の動作の設定に、選択中のタブに対応する {tab name} に切り替えイベントが含まれている必要があります。現在のページに対応する {page name} に切り替えイベントもこの条件を満たします。ステップを選択するだけでは、そのステップはアクティブになりません。一致するイベントを持つステップがない場合、ウィジェットはアクティブ時の色を表示しません。一致するイベントを持つステップの中からウィジェットがどのステップを選ぶかなど、詳しくは選択状態とその制限事項を参照してください。

アクティブなステップが完了済みでもある場合、そのステップにはチェックマークが表示され、完了時の色の代わりにアクティブ時の色が使用されます。

ステッパーウィジェットは、アクティブなステップを変数として出力しません。

タブを切り替えるステップを設定する

タブを使用するワークフローで、ユーザーが現在どのステップにいるかを表示するには、次の手順を実行します。

ページに少なくとも2つのセクションがあることを確認してください。たとえば、空のセクションでレイアウトを設定を選択し、列を選択します。詳しくは、セクションレイアウトを参照してください。
空のセクションの1つで、レイアウトを設定を選択し、タブを選択します。ワークフローの各ステップに対応するタブを追加します。
別のセクションで、ウィジェットを追加を選択し、ステッパーウィジェットを追加します。ウィジェットをタブ付きセクションの外に配置すると、選択中のタブが変わってもウィジェットが表示され続けます。
ステップを追加を選択して、各タブに対応するステップを追加します。各ステップのクリック時の動作の設定で、イベントを追加を選択し、対応するタブの {tab name} に切り替えイベントを選択します。たとえば、Tab 1 という名前のタブには、Tab 1 に切り替えを選択します。
必要に応じて、各ステップの完了済みの設定に、ユーザーがステップを完了すると true になるブール変数を設定します。順番どおりのステッパーでは、ユーザーは完了済みの最も先のステップの次のステップまでしか選択できません。

モジュールが読み込まれると、デフォルトのタブに対応するステップがアクティブ時の色で表示されます。ユーザーが別のステップを選択すると、モジュールはそのステップのタブに切り替わり、ウィジェットはそのステップをハイライトします。