エージェントワークスペース へのコンポーネントの追加

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む5読むのに数分

    • カスタムコンポーネントを使用して、会社のエージェントの特定のニーズを満たすカスタム ワークスペース インターフェイスを作成します。

    複数のチャネルを介した顧客とのコミュニケーションには時間がかかります。これらのオムニチャネルインタラクションを効率的に行うには、複数のツール間でのコンテキストの切り替えを減らすために、エージェントが顧客情報を一元的に表示できる必要があります。ワークスペース のカスタムコンポーネントを開発することで、チームは、 1 つのインターフェイスで複数のチャネルとのコミュニケーションを行うことができます。

    ワークスペース へのコンポーネントの追加

    コンポーネントをインスタンスに展開したら、次の方法で ワークスペース に追加できます。

    ワークスペース モーダルにコンポーネントを追加する
    UI アクションを使用してモーダルでカスタムコンポーネントを起動するため、エージェントはタスクを遂行するために別の画面に移動する必要がありません。詳細については、「モーダルでのコンポーネントの表示」を参照してください。
    UI Builder を使用して ワークスペース ランディングページにコンポーネントを追加する

    UI ビルダー を使用して、エージェントのカスタムランディングページを作成します。UI ビルダー は、ワークスペースコンポーネントを視覚的に配置できるドラッグアンドドロップツールです。詳細については、「ワークスペースのカスタムランディングページの作成」を参照してください。

    UI Builder で展開されたコンポーネントを使用するには、now-ui.json ファイルのプロパティを設定します。「UI ビルダー へのコンポーネントの追加」を参照してください。

    ワークスペース レコードビューにコンポーネントを追加する
    ワークスペース レコードビューのコンポーネント領域にカスタムコンポーネントまたは標準コンポーネントを追加できます。詳細については、「ワークスペースのレコードビューの設定」を参照してください。

    UI ビルダー へのコンポーネントの追加

    構成ファイルのプロパティを設定して、コンポーネントをインスタンスの UI ビルダー に追加します。

    始める前に

    手順

    1. プロジェクトディレクトリで、now-ui.json を開きます。
    2. components.[component-name].uiBuilder オブジェクトをファイルに追加します。
      このオブジェクトは、コンポーネントを UI ビルダーに追加します。
      このオブジェクトには、次のキーと値のペアが含まれています。
      キー データタイプ 説明
      components.[component-name].uiBuilder オブジェクト コンポーネントを UI Builder に追加するオブジェクト。
      components.[component-name].uiBuilder.label 文字列 必須です。UI Builder のコンポーネントの表示名。
      components.[component-name].uiBuilder.icon 文字列 必須です。UI Builder に表示されるアイコンの名前。
      components.[component-name].uiBuilder.description 文字列 必須です。コンポーネントの機能の簡単な説明。 
      {
  "components": {
    "card": {
      "uiBuilder": {
        "label" : "Card",
        "icon" : "chat-fill", 
        "description" : "A visual card format for a record.",
        "associatedTypes": ["global.core"]
      },
    3. コンポーネントにプロパティが含まれている場合は、components.[component-name].properties アレイをファイルに追加します。
      これにより、UI ビルダー のコンポーネントの構成オプションとしてプロパティが追加されます。
      このオブジェクトには、次のキーと値のペアが含まれています。
      キー データタイプ 説明
      components.[component-name].properties アレイ <Object> コンポーネントのすべてのプロパティとそれらのプロパティに関するすべての関連情報を含むオブジェクトのアレイ。
      components.[component-name].properties[].name 文字列 コンポーネントのコード内のプロパティの名前。
      components.[component-name].properties[].label 文字列 UI ビルダー に表示するプロパティの表示名 (該当する場合)。
      components.[component-name].properties[].description 文字列 プロパティの機能または使用方法の簡単な説明。
      components.[component-name].properties[].readOnly ブーリアン true の場合、ユーザーは UI Builder でプロパティを設定できません。

      デフォルト値：false。
      components.[component-name].properties[].required ブーリアン true の場合、ユーザーはプロパティを設定する必要があります。

      デフォルト値：false。
      components.[component-name].properties[].defaultValue 文字列 ユーザーが指定しない場合のデフォルト値。
      components.[component-name].properties[].associatedTypes アレイ UI Builder ツールボックス内でコンポーネントが表示される場所を説明します。値は "global.core" である必要があります。
      components.[component-name].properties[].typeMetadata オブジェクト 参照プロパティや選択リストなど、一部のデータタイプに必要な追加の構成データ。 
      {
  "components": {
    "properties": [
		    {
			"name": "backgroundColor",
			"label": "Background Color",
			"description": "Background Color",
			"readOnly": false,
			"required": false,
			"defaultValue": "lightgray"
		    },
		    {
		       "name": "cardType",
			"label": "Type of card",
			"description": "Type of card",
			"readOnly": false,
			"required": false,
			"defaultValue": ""
		    }
			]
    4. ファイルを保存します。

    次のタスク

    インスタンスへのコンポーネントの展開。