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

# 仕組み
<a name="how-it-works"></a>

プロファイルエクスプローラーには、顧客情報を表示するためのさまざまなウィジェットが用意されており、レイアウトはダッシュボードの完全な構造と設定を表す JSON 定義として保存されます。ビジュアルレイアウトの各ウィジェットとコンポーネントは、この定義内の特定の JSON ブロックに対応します。

## コアコンポーネント
<a name="core-components"></a>

レイアウト定義のすべてのコンポーネントは、次の 5 つの一般的な要素で構成されます。
+ **タイプ**
  + コンポーネントカテゴリを定義する
  + コンポーネントのレンダリング方法を決定する
  + 例: BoardItem, Table, KeyValuePair
+ **ID**
  + 各コンポーネントの一意の識別子
  + コンポーネントの追跡と更新に使用される
  + ビルダーでコンポーネントが作成されると自動的に生成される
+ **プロンプト**
  + コンポーネント固有のプロパティ
  + 外観と動作を制御する
  + 設定を含む
+ **Children**
  + ネストされたコンポーネントまたはコンテンツ
  + 階層関係を定義する
  + 複数のサブコンポーネントを含めることができる
+ **DataSource**
  + データオリジンを指定する
  + データ取得パラメータを定義する
  + コンポーネントのデータバインディングを制御する

## レイアウトコンポーネント定義の例
<a name="example-layout-component-definition"></a>

ダッシュボードテーブルコンポーネントの JSON 構造の例を次に示します。

```
{
    "Id": "unique-identifier",
    "Type": "BoardItem",
    "Props": {},
    "Children": [
        {
            "Id": "unique-identifier",
            "Type": "Table",
            "Props": {},
            "Children": [
                {
                    "Id": "unique-identifier",
                    "Type": "TextContent",
                    "Props": {},
                    "Children": ["string"]
                }
            ]
        }
    ],
    "DataSource": [
        {
            "Type": "source-type",
            "Params": {}
        }
    ]
}
```

## 動的データ設定
<a name="dynamic-data-configuration"></a>

プロファイルエクスプローラーは、テンプレート式を使用して、コンポーネント内で Customer Profiles データに動的にアクセスして表示します。

### 単一値のサポート
<a name="single-value-support"></a>

Key Value ペアや Key メトリクスなどのコンポーネントでは、以下にアクセスできます。

#### 標準プロファイル情報
<a name="standard-profile-information"></a>

```
{{Customer.<StandardProfileInfo>}}
```

使用例:
+ `{{Customer.FirstName}}`
+ `{{Customer.LastName}}`
+ `{{Customer.PhoneNumber}}`

#### 計算属性
<a name="calculated-attributes"></a>

```
{{Customer.CalculatedAttributes.<attributeDefinitionName>}}
```

使用例:
+ `{{Customer.CalculatedAttributes._cases_count}}`
+ `{{Customer.CalculatedAttributes._new_customer}}`

### 表形式のデータサポート構文
<a name="tabular-data-support-syntax"></a>

#### 計算属性
<a name="calculated-attributes-tabular"></a>

```
{{Customer.CalculatedAttributes.DisplayName}}
```

```
{{Customer.CalculatedAttributes.CalculatedAttributeDefinitionName}}
```

#### セグメント
<a name="segments"></a>

```
{{Customer.CalculatedAttributes.DisplayName}}
```

```
{{Customer.CalculatedAttributes.SegmentDefinitionName}}
```

#### プロファイルオブジェクト
<a name="profile-objects"></a>

```
{{Customer.ObjectAttributes.<objectTypeName>.<fieldName>}}
```

**使用例**:
+ `{{Customer.ObjectAttributes.CTR.contactId}}`
+ `{{Customer.ObjectAttributes.Order.orderId}}`

### 実装例
<a name="implementation-examples"></a>

#### 単一値コンポーネント
<a name="single-value-component"></a>

```
{
    "Type": "KeyValuePair",
    "Props": {
        "Items": [
            {
                "Label": {
                    "Content": {
                        "Type": "TextContent",
                        "Children": ["Customer Name"]
                    }
                },
                "Value": {
                    "Content": {
                        "Type": "TextContent",
                        "Children": ["{{Customer.FirstName}}"]
                    }
                }
            }
        ]
    }
}
```

#### 表形式コンポーネント
<a name="tabular-component"></a>

```
{
    "Type": "Table",
    "Props": {
        "ColumnDefinitions": [
            {
                "Cell": {
                    "Content": {
                        "Type": "TextContent",
                        "Children": ["{{Customer.ObjectAttributes.CTR.contactId}}"]
                    }
                },
                "Header": "Contact ID"
            }
        ]
    }
}
```

**注記**  
レイアウトで使用する前に、参照する属性、オブジェクト、セグメントが Customer Profiles 設定に存在することを確認してください。