モーダルでのコンポーネントのレンダリング

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

    始める前に

    必要なロール:workspace_admin

    このタスクについて

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

    モーダルのリスト

    手順

    1. カスタムコンポーネントを開発してインスタンスに展開します。
      詳細については、「 カスタムコンポーネント」を参照してください。
    2. 登録したスクリプティングモーダルでエントリーを作成します。
      1. フィルターナビゲーターで、次のように入力します。 sys_aw_registered_scripting_modal.list そのテーブルを開きます。
      2. [New] をクリックします。
      3. 検索アイコン ( 検索アイコン) を使用してコンポーネントを選択します。この場合は sn-workspace-header を使用します。
      4. API の名前 (この場合は showHeader) を入力します。
      5. パブリック API が自動入力されます。
        モーダルの登録
      6. [Save (保存)] をクリックします。
    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 アクションが [フォーム] ペインに表示されます。