本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 運作方式
<a name="how-it-works"></a>

Profile Explorer 提供各種小工具來顯示客戶資訊，配置會儲存為 JSON 定義，代表儀表板的完整結構和組態。視覺化配置中的每個小工具和元件都對應至此定義中的特定 JSON 區塊。

## 核心元件
<a name="core-components"></a>

配置定義中的每個元件都由五個常見元素組成：
+ **類型**
  + 定義元件類別
  + 決定元件的轉譯方式
  + 範例：BoardItem、Table、KeyValuePair
+ **Id**
  + 每個元件的唯一識別符
  + 用於追蹤和更新元件
  + 在建置器中建立元件時會自動產生
+ **屬性**
  + 元件特定屬性
  + 控制外觀和行為
  + 包含組態設定
+ **子系**
  + 巢狀元件或內容
  + 定義階層關係
  + 可以包含多個子元件
+ **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>

Profile Explorer 使用範本表達式，在您的元件中動態存取和顯示 Customer Profiles 資料。

### 單一值支援
<a name="single-value-support"></a>

對於金鑰值對和金鑰指標等元件，您可以存取：

#### 標準設定檔資訊
<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 組態中，然後再將它們用於您的配置中。