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.
# Widgets personalizados
Cree componentes de panel personalizados desde cero para satisfacer las necesidades específicas de su empresa. Los widgets personalizados le permiten crear visualizaciones únicas sin datos predefinidos.
## Componentes personalizados disponibles
+ [Tabla](#table-widget)
+ [Par clave-valor](#key-value-pair)
+ [Métrica clave](#key-metric)
+ [Gráfico de anillos](#donut-chart)
## Creación de widgets personalizados
**Cada widget personalizado se puede configurar con:**
+ Orígenes de datos personalizados
+ Visualizaciones personalizadas
+ Campos personalizados
+ Interacciones de elementos personalizados
## Tabla
El componente de tabla personalizada ofrece opciones de configuración flexibles para mostrar los datos en formato tabular, con características avanzadas de interacción y organización.
### Características
1. **Configuraciones de columnas**
+ Definición de encabezados de columnas personalizados
+ Especificación de datos para cada columna
+ Configuración de las opciones de formato de datos
+ Definición de la ubicación de las columnas
1. **Filtrado**
+ Filtrado rápido de los elementos de la tabla
1. **Vinculación**
+ Enlaces de recursos de Connect
+ Navegación sin problemas hasta:
+ Segmentos
+ Atributos calculados
+ Se abre en una pestaña nueva
+ **Enlaces de URL externos**
+ Convierte el valor del elemento de la fila en el URLs que puedas elegir
+ Se abre en una pestaña nueva
+ Genere enlaces de forma dinámica en función de los datos de las filas
+ Enlaces de vista de cajón
+ Abra información detallada en el cajón lateral
+ Consulte todos los detalles del registro sin salir de la página
1. Organización de datos
+ Agrupación
+ Agrupe las filas por nombres de campo específicos
+ Configuración persistente de los grupos
+ Ordenar
+ Ordene por cualquier campo de columna
+ Organice en orden ascendente
+ Configuración de clasificación persistente
**Imagen 1**
**Imagen 2**
### Configuración de ejemplo
```
{
"Type": "Table",
"Props": {
"ColumnDefinitions": [
{
"Header": "Table column header"
"Cell": {
"Content": {
"Props": {
"Variant": "Link",
"LinkOptions": {
"LinkType": "Drawer"
}
},
"Type": "TextContent",
"Children": ["string"]
}
},
}
]
}
}
```
## Par clave-valor
El componente Par clave-valor permite crear visualizaciones organizadas de puntos de datos relacionados en un formato flexible y legible.
### Descripción general de
Cree visualizaciones de datos dinámicas mediante la definición de relaciones clave-valor personalizadas. Este componente es particularmente útil para mostrar pares de atributos como:
+ Detalles personalizados
+ Información de cuenta
### Características
1. **Opciones de enlace interactivo**
+ Enlaces de recursos de Connect
+ Enlace directo con los recursos relacionados
+ Navegación sin problemas hasta:
+ Atributos calculados
+ Segmentos
+ Se abre en una pestaña nueva
+ Enlaces de URL externos
+ Convierte el valor del artículo en el URLs que puedas elegir
+ Se abre en una pestaña nueva
+ Enlaces de vista de cajón
+ Abra información detallada en el cajón lateral
+ Consulte todos los detalles sin salir de la página
1. Configuraciones de columnas
+ Defina de 1 a 4 columnas de pares clave-valor
1. Organice los pares en agrupaciones lógicas
**Imagen 1**
**Imagen 2**
### Configuración de ejemplo
```
{
"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**
Actualmente, este componente no admite `ProfileObjects` en el generador de interfaces de usuario.
## Métrica clave
El componente Key Metric le permite mostrar de forma destacada las métricas empresariales fundamentales y las estadísticas vitales en un formato fácil de digerir. KPIs
### Descripción general de
Cree pantallas de métricas de alta visibilidad que destaquen puntos de datos, tendencias o indicadores de estado importantes. Este componente es ideal para mostrar:
+ Indicadores de rendimiento
+ Medidas cruciales
+ Resúmenes de estado
+ Indicadores de tendencia
### Características
1. **Texto de pantalla grande**
1. **Formato métrico**
1. **Opciones de enlace interactivo**
+ Enlaces de recursos de Connect
+ Enlace directo con los recursos relacionados
+ Navegación sin problemas hasta:
+ Atributos calculados
+ Segmentos
+ Se abre en una pestaña nueva
+ Enlaces de URL externos
+ Convierta el valor del artículo en el URLs que pueda elegir
+ Se abre en una pestaña nueva
+ Enlaces de vista de cajón
+ Abra información detallada en el cajón lateral
+ Consulte todos los detalles sin salir de la página
1. **Organice el diseño de las métricas**
**Imagen 1**
**Imagen 2**
### Configuración de ejemplo
```
{
"Type": "KeyMetrics",
"Props": {
"MetricDefinitions": [
{
"MetricLabel": "Total Revenue",
"MetricValue": {
"Content": {
"Type": "TextContent",
"Props": {
"Format": "USD",
"FontSize": "large",
"FontWeight": "bold"
},
"Children": ["[string]"]
}
},
"Columns": 1
}
]
}
}
```
**nota**
Actualmente, este componente no admite `ProfileObjects` en el generador de interfaces de usuario.
## Gráfico de anillos
El componente Gráfico de anillos permite visualizar la puntuación de opinión mediante un gráfico de anillos circular.
### Descripción general de
Cree visualizaciones dinámicas de las opiniones mediante la definición de criterios de puntuación personalizados. Este componente es particularmente útil para mostrar:
+ Métricas de éxito
+ Tasas de logros
+ Evaluaciones de riesgos
+ Indicadores de rendimiento
### Características
1. Opciones de análisis de opiniones
+ Opiniones positivas
+ Comienza desde cero
+ Realiza un seguimiento de los logros según los criterios:
+ Valores de punto personalizados
+ Segmentos codificados por colores
+ Gris para las condiciones que no se cumplen
+ Muestra el porcentaje de éxito
+ Opiniones negativas
+ Comienza con el valor máximo
+ Realiza un seguimiento de las deducciones:
+ Segmentos codificados por colores
+ Sistema de reducción de puntos
+ Verde para el valor restante
+ Muestra la puntuación final
1. Valor del atributo calculado
1. Opciones del operador
+ Igual a
+ No igual a
+ Mayor que
+ Menor que
1. Condición del valor
1. Puntos asignados por condición
**Imagen 1: Ejemplo de opinión positiva**
**Imagen 2: Ejemplo de opinión negativa**
### Configuración de ejemplo
```
{
"Type": "DonutChart",
"Props": {
"Variant": "PositiveSentiment",
"ConditionDefinitions": [
{
"Title": "Customer Satisfaction",
"Color": "#4CAF50",
"CalculatedAttribute": "satisfaction_score",
"Operator": "GREATER_THAN",
"ValueCondition": 8,
"Points": 10
}
]
}
}
```
**nota**
**Por el momento, los anillos solo admiten los atributos calculados como origen de datos.**
**Todas las definiciones de condiciones deben incluir un título, un color, un atributo calculado, un operador, una condición de valor y un valor en puntos.**