기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 작동 방식
<a name="how-it-works"></a>

프로필 탐색기는 고객 정보를 표시하는 다양한 위젯을 제공하며, 레이아웃은 대시보드의 전체 구조와 구성을 나타내는 JSON 정의로 저장됩니다. 시각적 레이아웃의 각 위젯 및 구성 요소는 이 정의 내의 특정 JSON 블록에 해당합니다.

## 핵심 구성 요소
<a name="core-components"></a>

레이아웃 정의의 모든 구성 요소는 다섯 가지 공통 요소로 구성됩니다.
+ **유형**
  + 구성 요소 범주를 정의합니다.
  + 구성 요소가 렌더링되는 방식을 결정합니다.
  + 예: BoardItem, Table, KeyValuePair
+ **Id**
  + 각 구성 요소의 고유 식별자
  + 구성 요소 추적 및 업데이트에 사용
  + 빌더에서 구성 요소가 생성될 때 자동으로 생성됩니다.
+ **Props**
  + 구성 요소별 속성
  + 모양 및 동작 제어
  + 구성 설정 포함
+ **하위 항목**
  + 중첩된 구성 요소 또는 콘텐츠
  + 계층적 관계 정의
  + 여러 하위 구성 요소를 포함할 수 있음
+ **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 구성에 존재하는지 확인합니다.