Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

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

El Explorador de perfiles ofrece varios widgets para mostrar la información de los clientes. Los diseños se almacenan como definiciones de JSON y representan la estructura y la configuración completas de su panel. Cada widget y componente del diseño visual corresponde a un bloque JSON específico dentro de esta definición.

## Componentes básicos
<a name="core-components"></a>

Cada componente de la definición del diseño se compone de cinco elementos comunes:
+ **Tipo**
  + Define la categoría del componente
  + Determina cómo se representa el componente
  + Ejemplos: BoardItem, Tabla, KeyValuePair
+ **Id**
  + Identificador único para cada componente
  + Se utiliza para el seguimiento y las actualizaciones de los componentes
  + Se genera automáticamente cuando los componentes se crean en el generador
+ **Accesorios**
  + Propiedades específicas de los componentes
  + Controla el aspecto y el comportamiento
  + Contiene los ajustes de configuración
+ **Niños**
  + Componentes o contenido anidados
  + Define las relaciones jerárquicas
  + Puede contener varios subcomponentes
+ **DataSource**
  + Especifica el origen de los datos
  + Define los parámetros de obtención de datos
  + Controla el enlace de datos de los componentes

## Ejemplo de definición de componente de diseño
<a name="example-layout-component-definition"></a>

El siguiente es un ejemplo de estructura JSON para un componente de tabla de panel:

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

## Configuración de datos dinámicos
<a name="dynamic-data-configuration"></a>

El Explorador de perfiles utiliza expresiones de plantilla para acceder a los datos de los perfiles de los clientes y mostrarlos de forma dinámica en sus componentes.

### Compatibilidad con un valor único
<a name="single-value-support"></a>

Para componentes como los pares de clave-valor y las métricas clave, puede acceder a:

#### Información del perfil estándar
<a name="standard-profile-information"></a>

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

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

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

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

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

### Sintaxis que admite datos 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 del perfil
<a name="profile-objects"></a>

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

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

### Ejemplos de implementación
<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**  
Asegúrese de que los atributos, objetos y segmentos a los que hace referencia existan en la configuración de los perfiles de cliente antes de utilizarlos en su diseño.