翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amazon Connect のノーコード ビルダー UI の動的フィールドの設定
<a name="no-code-ui-builder-properties-dynamic-fields"></a>

このトピックでは、Amazon Connect のノーコード UI ビルダーを使用してエージェントインターフェイスおよびカスタマーインターフェイスを構築する際に、ハードコードされた値ではなくランタイムデータを表示するようにコンポーネントで動的フィールドを設定する方法について説明します。

エージェントまたは顧客に表示されるデータについて、ハードコードされた値ではなく、動的なデータの入力が必要な場合があります。例えば、顧客の名前とプロファイル ID を表示するスクリーンポップを作成する場合などです。これらのフィールドの値はコンタクトごとに変わるため、データは動的である必要があります。

コンポーネントフィールドを動的に入力するには、次の手順を実行します。

1. 対象となるコンポーネントのプロパティタブを開きます。

1. 動的にするフィールドの横に表示される動的アイコン (稲妻アイコン) を選択します。

動的な値を必要とする最も一般的なフィールドは次のとおりです。
+ 表示フィールドの **[値]** フィールド
+ フォーム入力の **[DefaultValue]** フィールド

技術的には、エージェントに表示されるフィールドと非表示のフィールドの両方を実行時に動的に決定することができます。そのため、**[プロパティ]** タブのすべてのフィールドを動的 (稲妻アイコン) に設定することができます。

例えば、次の図の **[AttributesBar]** コンポーネントを見てみましょう。

![属性バーコンポーネントの値は動的に設定されています。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/no-code-ui-builder-attributebar-example.png)

+ 属性 1 のラベルは、**[顧客名]** として静的に定義されます。
+ この属性の **[値]** は動的に設定されます (稲妻アイコンが選択されています)。

これらの設定で **[AttributesBar]** の値は、実行時に [ビューを表示](show-view-block.md) ブロックに渡されるデータによって決まります。

フィールドが動的に設定されている場合、その静的値は動的参照に置き換えられます。**[サンプルデータ]** セクションがフィールドの下に表示されます。このセクションは[サンプルデータ](no-code-ui-builder-sample-data.md)を定義します。

動的参照は、ランタイムデータを設定するときに [ビューを表示](show-view-block.md) ブロックが期待するデータ構造を反映します。例えば、次の図に示すように、[[AttributesBar]](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes) コンポーネントの属性 1 の **[値]** を考えてみましょう。

![動的である場合の AttributesBar コンポーネントの属性 1 の値。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/no-code-ui-builder-dynamicicon.png)

+  動的に設定すると、フィールドは `$.AttributeBar_1.Attributes[0].Value` になり、`AttributeBar_1` はコンポーネントの ID になります。
+ これは、[ビューを表示](show-view-block.md) ブロックで `AttributeBar_1` フィールドがオブジェクトを受け取ることを示します。
+ オブジェクトには、最初の項目 (`[0]`) が `Value` フィールドを持つオブジェクトであることが期待される `Attributes` 配列が含まれます。

動的参照はわかりやすく編集したり、再利用したりすることができます。動的参照は、ビュー内の複数のフィールドとコンポーネント間で共有できます。例えば、次の図の [AttributeBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes) コンポーネントでは、動的参照を `$.myAttributeValue` に更新します。[ビューを表示](show-view-block.md) ブロックに文字列入力を期待する `myAttributeValue` フィールドが追加されました。

![AttributeBar コンポーネントのプロパティ、動的値。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/no-code-ui-builder-dynamic-example2.png)


**重要**  
動的参照のタイプは、フィールドで期待されるタイプと一致する必要があります。例えば、ブール値フィールドで文字列ベースの動的参照を使用することはできません。次の図は、動的参照が一致しない場合のエラーメッセージの例を示しています。  

![カスタマイズパネル。動的参照がフィールドで期待されるタイプと一致しないことを示すエラーメッセージ。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-4.png)


コンポーネントの属性のすべてのプロパティを動的として設定するオプションもあります。次の図では、ラベルを含むこの属性に関するすべては、[ビューを表示](show-view-block.md) ブロックに渡された値に基づいて実行時に決定されます。例えば **[顧客名]** は、エージェントがガイドを使用する際に表示されるコンテンツを理解するためのサンプルデータです。ただし、この値は実際にはエージェントに表示されません。

![カスタマイズパネル、サンプルデータとしての顧客名。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-5.png)


[AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes) などの特定のコンポーネントでは、コンポーネントのすべてのプロパティを動的として設定することもできます。例えば AttributeBar では、動的アイコン (稲妻) を選択して、すべての属性を動的に設定できます。属性は、実行時に [ビューを表示](show-view-block.md) ブロックに渡される値によって決まります。

![AttributeBar のすべてのプロパティは動的に設定されます。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-6.png)