モーダルでのコンポーネントの表示

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間:2分
  • UI アクションを使用してモーダルでカスタムコンポーネントを起動するため、エージェントはタスクを実行するために別の画面に移動する必要がありません。

    始める前に

    必要なロール:workspace_admin

    このタスクについて

    モーダルでカスタムコンポーネントを起動するため、エージェントは現在の画面から離れる必要はありません。たとえば、オープンレコードで名前が指定された顧客の連絡先情報を含むモーダルを起動して、エージェントが発信者に本人確認を求めることができます。次の例は、モーダルのリストを示しています。

    モーダルにリスト

    手順

    1. カスタムコンポーネントを開発し、インスタンスに展開します。
      詳細については、「 カスタムコンポーネント」を参照してください。
    2. 登録済みスクリプティングモーダルでエントリーを作成します。
      1. フィルターナビゲーターで、 sys_aw_registered_scripting_modal.list このテーブルを開きます
      2. [新規] をクリックします。
      3. 検索アイコン ( 検索アイコン) を使用してコンポーネントを選択します。この場合は、 sn-workspace-header を使用します。
      4. API の名前 (この場合は showHeader) を入力します。
      5. パブリック API は次のように自動入力されます。
        モーダルを登録
      6. [保存] をクリックします。
    3. コンポーネントをモーダルでレンダリングするための UI アクションを作成します。
      1. 適切なテーブルの新しい UI アクションを作成し、[ ワークスペース ] タブで、UI アクションを表示する方法と場所に応じて [ ワークスペースフォームボタン ] または [ワークスペースメニューボタン ] を選択します。

        UI アクションの作成については、「 従来のワークスペースでのカスタム UI アクションの設定」を参照してください。

        ワークスペースフォームボタンまたはメニュー

        いずれかのチェックボックスをオンにすると、[ ワークスペースクライアントスクリプト ] テキストボックスが表示されます。
      2. [ワークスペースクライアントスクリプト] テキストボックスに次のコードを入力します。
        function onClick(g_form) {
          g_modal.global.showHeader({
            title: 'Test custom modal',
            confirmTitle:'YES',
            params: {
              primaryValue: 'THIS IS A PRIMARY VALUE',
              secondaryItems:{}
            }
          }).then(function(result){
            alert('confirm:'+result);
          }, function(error) {
            alert('cancel:'+error);
          });
        }
    4. 次に、この UI アクションの作成時に選択したテーブルのレコードを ワークスペース で開いて、UI アクションをテストします。
      UI アクションが [Form] ペインに表示されます。