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á.
# Widgets personalizados
Crie componentes de painel personalizados do zero para atender às suas necessidades comerciais específicas. Os widgets personalizados permitem que você crie visualizações exclusivas sem dados predefinidos.
## Componentes personalizados disponíveis
+ [Tabela](#table-widget)
+ [Par de chave/valor](#key-value-pair)
+ [Métrica de chave](#key-metric)
+ [Gráfico de rosca](#donut-chart)
## Criar widgets personalizados
**Cada widget personalizado pode ser configurado com:**
+ Fontes de dados personalizadas
+ Exibições personalizadas
+ Campos personalizados
+ Interações personalizadas com itens
## Tabela
O componente de tabela personalizada fornece opções de configuração flexíveis para exibição de dados em formato tabular, com recursos avançados para interação e organização.
### Recursos
1. **Configurações de coluna**
+ Defina cabeçalhos de colunas personalizados.
+ Especifique os dados para cada coluna.
+ Defina opções de formatação de dados.
+ Defina o posicionamento das colunas.
1. **Filtrando**
+ Filtre rapidamente os itens na tabela.
1. **Vinculando**
+ Links de recursos do Connect
+ Navegação perfeita para:
+ Segmentos
+ Atributos calculados
+ Abertura em uma nova guia.
+ **Links para URLs externos**
+ Converta o valor do item da linha no URLs que você pode escolher
+ Abertura em uma nova guia.
+ Gere links de forma dinâmica com base em dados de linha.
+ Links de visualização de gaveta
+ Abra informações detalhadas na gaveta lateral.
+ Visualize os detalhes completos do registro sem sair da página.
1. Organização de dados
+ Agrupamento
+ Agrupe linhas por nomes de campo específicos.
+ Configurações de grupo persistentes.
+ Classificação
+ Classifique por qualquer campo de coluna.
+ Organização em ordem crescente.
+ Configurações de classificação persistentes.
**Figura 1**
**Figura 2**
### Exemplo de configuração
```
{
"Type": "Table",
"Props": {
"ColumnDefinitions": [
{
"Header": "Table column header"
"Cell": {
"Content": {
"Props": {
"Variant": "Link",
"LinkOptions": {
"LinkType": "Drawer"
}
},
"Type": "TextContent",
"Children": ["string"]
}
},
}
]
}
}
```
## Par de chave/valor
O componente Par de chave/valor permite criar exibições organizadas de pontos de dados relacionados em um formato flexível e legível.
### Visão geral do
Crie exibições dinâmicas de dados ao definir relações personalizadas de chave/valor. Esse componente é particularmente útil para mostrar pares de atributos, como:
+ Detalhes de clientes
+ Informações da conta
### Recursos
1. **Opções de links interativos**
+ Links de recursos do Connect
+ Vinculação direta com recursos relacionados.
+ Navegação perfeita para:
+ Atributos calculados
+ Segmentos
+ Abertura em uma nova guia.
+ Links para URLs externos
+ Converta o valor do item no URLs que você pode escolher
+ Abertura em uma nova guia.
+ Links de visualização de gaveta
+ Abra informações detalhadas na gaveta lateral.
+ Visualize os detalhes completos sem sair da página.
1. Configuração de colunas.
+ Defina de 1 a 4 colunas de pares de chave/valor.
1. Organize os pares em agrupamentos lógicos.
**Figura 1**
**Figura 2**
### Exemplo de configuração
```
{
"Type": "KeyValuePair",
"Id": "UniqueId",
"Props": {
"Columns": 2,
"Items": [
{
"Label": {
"Content": {
"Type": "TextContent",
"Id": "UniqueId",
"Props": {
"FontWeight": "bold"
},
"Children": ["Profile id"]
}
},
"Value": {
"Content": {
"Type": "TextContent",
"Id": "UniqueId",
"Props": {},
"Children": ["[string]"]
}
}
}
]
}
}
```
**nota**
Esse componente ainda não é compatível com `ProfileObjects` no construtor de interface de usuário.
## Métrica de chave
O componente Key Metric permite que você exiba com destaque métricas comerciais críticas e estatísticas vitais em um formato de fácil digestão. KPIs
### Visão geral do
Crie exibições de métricas de alta visibilidade que destacam pontos de dados, tendências ou indicadores de status importantes. Esse componente é ideal para mostrar:
+ Indicadores de desempenho
+ Medições críticas
+ Resumos de status
+ Indicadores de tendência
### Recursos
1. **Exibição de texto grande**
1. **Formato de métricas**
1. **Opções de links interativos**
+ Links de recursos do Connect
+ Vinculação direta com recursos relacionados.
+ Navegação perfeita para:
+ Atributos calculados
+ Segmentos
+ Abertura em uma nova guia.
+ Links para URLs externos
+ Converta o valor do item no URLs que você pode escolher
+ Abertura em uma nova guia.
+ Links de visualização de gaveta
+ Abra informações detalhadas na gaveta lateral.
+ Visualize os detalhes completos sem sair da página.
1. **Organização do layout das métricas**
**Figura 1**
**Figura 2**
### Exemplo de configuração
```
{
"Type": "KeyMetrics",
"Props": {
"MetricDefinitions": [
{
"MetricLabel": "Total Revenue",
"MetricValue": {
"Content": {
"Type": "TextContent",
"Props": {
"Format": "USD",
"FontSize": "large",
"FontWeight": "bold"
},
"Children": ["[string]"]
}
},
"Columns": 1
}
]
}
}
```
**nota**
Esse componente ainda não é compatível com `ProfileObjects` no construtor de interface de usuário.
## Gráfico de rosca
O componente de gráfico de rosca permite a visualização da pontuação de sentimentos por meio de um gráfico circular.
### Visão geral do
Crie visualizações dinâmicas de sentimentos ao definir critérios de pontuação personalizados. Esse componente é particularmente útil para mostrar:
+ Métricas de sucesso
+ Taxas de sucesso
+ Avaliações de riscos
+ Indicadores de desempenho
### Recursos
1. Opções de análise de sentimentos
+ Sentimento positivo
+ Começa do zero
+ Monitora o sucesso com base em critérios:
+ Valores de pontos personalizados
+ Segmentos codificados por cores
+ Cinza para condições não atendidas
+ Mostra a porcentagem da taxa de sucesso
+ Sentimento negativo
+ Começa com o valor máximo
+ Rastreia as deduções:
+ Segmentos codificados por cores
+ Sistema de redução de pontos
+ Verde para o valor restante
+ Mostra a pontuação final
1. Nome do atributo calculado
1. Opções de operador
+ Igual a
+ Não é igual a
+ Maior que
+ Menor que
1. Condição de valor
1. Pontos atribuídos por condição
**Figura 1: exemplo de sentimento positivo**
**Figura 2: exemplo de sentimento negativo**
### Exemplo de configuração
```
{
"Type": "DonutChart",
"Props": {
"Variant": "PositiveSentiment",
"ConditionDefinitions": [
{
"Title": "Customer Satisfaction",
"Color": "#4CAF50",
"CalculatedAttribute": "satisfaction_score",
"Operator": "GREATER_THAN",
"ValueCondition": 8,
"Points": 10
}
]
}
}
```
**nota**
**No momento, os gráficos de rosca só oferecem suporte a atributos calculados como fonte de dados.**
**Todas as definições de condição devem incluir título, cor, atributo calculado, operador, condição de valor e valor de pontos.**