As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

# Como funcionam
<a name="how-it-works"></a>

O Explorador de perfis oferece vários widgets para exibir informações dos clientes. Os layouts são armazenados como definições JSON, representando a estrutura e a configuração completas do seu painel. Cada widget e componente no layout visual corresponde a um bloco JSON específico dentro dessa definição.

## Componentes principais
<a name="core-components"></a>

Cada componente na definição do layout é composto por cinco elementos comuns:
+ **Tipo**
  + Define a categoria do componente.
  + Determina como o componente é renderizado.
  + Exemplos: BoardItem, Tabela, KeyValuePair
+ **Id**
  + Identificador exclusivo para cada componente.
  + Usado para rastreamento e atualizações de componentes.
  + Gerado automaticamente quando os componentes são criados no construtor.
+ **Adereços**
  + Propriedades específicas do componente.
  + Controla a aparência e o comportamento.
  + Contém definições de configuração.
+ **Crianças**
  + Componentes ou conteúdo aninhados.
  + Define relações hierárquicas.
  + Pode conter vários subcomponentes.
+ **DataSource**
  + Especifica a origem dos dados.
  + Define parâmetros de recuperação de dados.
  + Controla a vinculação de dados para os componentes.

## Exemplo de definição de componente do layout
<a name="example-layout-component-definition"></a>

Veja a seguir um exemplo de estrutura JSON para um componente de tabela do painel:

```
{
    "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": {}
        }
    ]
}
```

## Configuração dinâmica de dados
<a name="dynamic-data-configuration"></a>

O Explorador de perfis usa expressões de modelo para acessar e exibir dados do Customer Profiles de forma dinâmica nos componentes.

### Suporte a valor único
<a name="single-value-support"></a>

Para componentes como Par de chave/valor e Métrica de chave, você pode acessar:

#### Informações de perfil padrão
<a name="standard-profile-information"></a>

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

Exemplo de uso:
+ `{{Customer.FirstName}}`
+ `{{Customer.LastName}}`
+ `{{Customer.PhoneNumber}}`

#### Atributos calculados
<a name="calculated-attributes"></a>

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

Exemplo de uso:
+ `{{Customer.CalculatedAttributes._cases_count}}`
+ `{{Customer.CalculatedAttributes._new_customer}}`

### Sintaxe de suporte a dados tabulares
<a name="tabular-data-support-syntax"></a>

#### Atributos calculados
<a name="calculated-attributes-tabular"></a>

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

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

#### Segmentos
<a name="segments"></a>

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

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

#### Objetos de perfil
<a name="profile-objects"></a>

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

**Exemplo de uso**:
+ `{{Customer.ObjectAttributes.CTR.contactId}}`
+ `{{Customer.ObjectAttributes.Order.orderId}}`

### Exemplos de implementação
<a name="implementation-examples"></a>

#### Componente de valor único
<a name="single-value-component"></a>

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

#### Componente tabular
<a name="tabular-component"></a>

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

**nota**  
Garanta que os atributos, objetos e segmentos referenciados existam na configuração do Customer Profiles antes de usá-los no layout.