本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 工作原理
<a name="how-it-works"></a>

配置文件浏览器提供了各种用于显示客户信息的小组件，布局存储为 JSON 定义，表示控制面板的完整结构和配置。可视布局中的每个小组件和组件都对应于此定义中的一个特定 JSON 块。

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

布局定义中的每个组件都由五个常见元素组成：
+ **Type**
  + 定义组件类别
  + 确定组件呈现的方式
  + 示例： BoardItem，表， 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>

配置文件浏览器使用模板表达式在您的组件中动态访问和显示 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}}
```

#### Segments
<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 配置中，然后在布局中使用它们。