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

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月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] ペインに表示されます。