UI インタラクションの作成

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:4分
  • UI インタラクションを作成し、 UI ビルダー のコンポーネントイベントに添付します。UI インタラクションは、UI、ロジック、およびスクリプトを 1 つのユニットにまとめた再利用可能なフローであり、コンポーネントビルダーでビルドされたカスタム UI も含まれており、ページ上の任意のコンポーネントイベントからトリガーできます。

    始める前に

    必要なロール:ui_builder_admin

    このタスクについて

    このタスクでは、ダイアグラムエディターを使用して UI インタラクションを作成し、その動作を定義します。インタラクションタイプを選択し、ステップを追加および構成し、ロジックと分岐を定義し、実行時にインタラクションに必要な入力を指定します。

    重要:
    UI インタラクションは単独では実行されません。インタラクションを作成したら、そのイベントが発生したときに実行できるように、そのインタラクションをコンポーネントまたはページイベントに添付する必要があります。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. UI ビルダーホームページから、 作成/挿入 > UI インタラクション.
      図 : 1. UI インタラクションを作成
      UI インタラクションが選択された [作成] ドロップダウンメニュー。
    3. 作成モーダルで、インタラクションの名前を入力します。

      たとえば、UI インタラクションでナレッジギャップを報告する場合は、「 ナレッジギャップを報告」と入力します。名前は、後で UI インタラクション設定で変更できます。

      図 : 2. UI インタラクション作成モーダル
      UI インタラクション作成モーダル
    4. インタラクションタイプを選択します。

      汎用インタラクションは、フォームまたはリストコントローラーデータに依存せずに使用されます。フォームインタラクションでは、レコードの検証や保存などのフォーム固有の手順が使用されます。リストインタラクションでは、リストの更新やクエリなど、リスト固有のステップを使用します。

    5. オプション: インタラクションの実行内容と実行時期を要約した説明を入力します。
      たとえば、 レコードを削除する前に確認モーダルを表示します
    6. [Create (作成)] を選択します。
      図 : 3. UI インタラクションエディター
      UI インタラクションエディター。
      ダイアグラムエディターが開き、開始ノードと終了ノードが追加アイコン で接続されます。ツールボックスで使用できるステップは、選択したインタラクションタイプによって異なります。
    7. 開始ノードと終了ノードの間にある追加アイコン を選択し、ツールボックスからステップを追加して、インタラクションを構築します。
      1. [ + ] を選択してツールボックスを開きます。
        図 : 4. UI インタラクションツールボックス
        ステップツールボックスが開いた UI インタラクションエディター。
      2. 利用可能なステップをカテゴリ別に参照するか、名前で検索します。
        開始ノードと終了ノードの間に最初のステップを追加すると、ツールボックス内の [利用不可] セクションに And 分岐が表示されます。少なくとも 1 つのステップがメイン分岐に追加されるまで、 And 分岐を追加できません。既存の 2 つのステップの間にステップを挿入すると、ナビゲーションステップなど、送信イベントのないステップがツールボックス内の [利用不可] セクションに表示されます。これらのステップは既存のステップの前に挿入することはできません。また、End ノードに直接接続する And 分岐を介して追加する必要があります。
      3. ステップを選択してキャンバスに追加します。
        開始ノードと終了ノードの間にステップを追加するか、既存のステップの前にステップを挿入します。デフォルトでは、既存のステップの前に新しいステップを挿入すると、フローは最上位の送信イベントで続行されます。変更するには、イベントノードを選択して別のイベントを選択します。
        注:
        各イベントは 1 つの送信分岐をサポートします。イベントをスワップすると、イベントに依存するダウンストリームバインディングがデフォルト値にリセットされ、ビジュアルインジケーターにリセットが表示されます。
      4. 構成パネルでステッププロパティを構成します。
      5. 手順を繰り返して、ステップを順番に追加します。
        ステップを並列に実行するには、ツールボックスから [And ] ステップを選択します。分岐は上から下の順に実行されます。条件付きパスを定義するには、ツールボックスの [ロジック] セクションから If/Else ステップを追加します。既存のステップの前に If/Else ステップを挿入すると、Else 分岐に下流フローが保持されます。条件は、計算式の作成またはスクリプトを使用して定義できます。分岐は上から下に評価され、true と評価された最初の分岐が実行されます。
      6. インタラクションで実行時にデータが必要な場合は、[入力] ピルを選択し、インタラクションに必要なデータを追加して入力を定義します。
        サポートされている入力タイプは、文字列、True/False、選択肢、参照、および JSON です。
      7. [Save (保存)] を選択します。
      8. オプション: [削除] アイコン を選択して、いつでもインタラクションからステップを削除できます。
      9. オプション: ダイアグラム上のイベントを削除するには、イベント 削除アイコンを選択します。
        イベントを削除すると、接続と下流のステップが削除されます。

    タスクの結果

    UI インタラクションが作成され、コンポーネントまたはページイベントに添付する準備ができました。アタッチされると、指定されたイベントが発生するたびに、設定されたステップが実行されます。「ページイベントからの UI インタラクションのトリガー」を参照してください。

    宣言アクションを使用してフォームまたはリストボタンからこの UI インタラクションをトリガーするには、「 Trigger a UI interaction from a declarative action」を参照してください。