# AX - Kanban

## Descripción general

**AX - Kanban** es un componente de Experience Cloud que muestra los registros de Salesforce como tarjetas arrastrables organizadas en columnas de flujo de trabajo en las páginas de Experience Sites.

Úsalo para permitir que los usuarios del portal visualicen y gestionen flujos de trabajo, como estados de casos de soporte, fases de proyectos o etapas de aprobación. Los usuarios arrastran tarjetas entre columnas para actualizar valores de registros, mientras tú controlas qué campos aparecen en las tarjetas y qué valores de lista de selección definen las columnas. Configura todo en Experience Builder sin código.

Perfecto para portales de atención al cliente que muestran el progreso de casos, portales de socios que gestionan etapas de negocio, espacios de colaboración de proyectos o cualquier lugar donde los usuarios del portal necesiten gestión visual de flujos de trabajo.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FUTzhoKQdk4TpwMrX10vt%2F2024-04-22_20-46-23.png?alt=media&#x26;token=21e0f18e-eb2b-426b-b646-901755482f9c" alt=""><figcaption></figcaption></figure>

***

## Primeros pasos

Usa este sencillo tutorial para aprender los conceptos básicos del componente Kanban y comenzar a construir tus casos de uso.

{% @arcade/embed flowId="SKeLCf1CoTnJZHTYhLOF" url="<https://app.arcade.software/share/SKeLCf1CoTnJZHTYhLOF>" %}

***

## Conectarse a los datos de Salesforce

Este paso esencial al configurar tu componente Avonni Kanban establece la conexión entre tu tablero Kanban y los datos relevantes dentro de tu entorno de Salesforce.&#x20;

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FYBXNVnP2WbYWrsJCqbpK%2F2024-04-22_20-35-17.png?alt=media&#x26;token=ed325976-c447-48c4-b2b6-73cabf0e4199" alt=""><figcaption></figcaption></figure>

Así es como funciona:

* **Selección de objeto:** Comienza eligiendo el objeto específico de Salesforce (por ejemplo, Cuentas, Oportunidades, objetos personalizados, etc.) que contiene los datos que deseas que muestre tu tablero Kanban.
* **Filtrado opcional:** Si deseas mostrar solo un subconjunto de los datos del objeto seleccionado, utiliza la función de filtrado para establecer condiciones específicas. Por ejemplo, podrías filtrar para mostrar solo oportunidades "Abiertas" o cuentas dentro de una determinada región.
* **Agrupación (opcional):** Agrupa tus datos para organizar eficazmente tu tablero Kanban. Por ejemplo, agrupar oportunidades por "Etapa" puede crear columnas para "Prospección", "Negociación", etc.
* **Ordenación:** Selecciona un campo y una dirección de "Ordenar por" (ascendente o descendente) para determinar el orden en que deben aparecer las tarjetas Kanban.
* **Campos adicionales:** Si necesitas incluir campos en tu Kanban que no se usan directamente para mostrar o interactuar, añádelos en la sección "Campos adicionales". Esto es especialmente útil para campos que quieras que sean buscables dentro de la barra de búsqueda de Kanban.

### **Puntos clave**

* Elegir la fuente de datos adecuada garantiza que tu Kanban muestre la información más relevante para tus usuarios.
* El filtrado y la agrupación simplifican el tablero, facilitando la visualización y gestión de elementos de trabajo específicos.

***

## Configuración de asignaciones de datos <a href="#data-mappings-configuration" id="data-mappings-configuration"></a>

La sección "Asignaciones de datos" establece una conexión precisa entre tus datos de Salesforce y los elementos visuales de tu tablero Kanban. He aquí por qué esto es crucial:

* **Visualización precisa:** Las asignaciones de datos garantizan que la información obtenida de los campos de Salesforce se muestre correctamente en las tarjetas Kanban y dentro de las columnas del tablero. Por ejemplo, podrías asignar el campo de Salesforce "Opportunity Name" al título de cada tarjeta Kanban.
* **Funcionalidad:** Las asignaciones también controlan cómo interactúan los usuarios con el tablero Kanban. Por ejemplo, asignar un campo "Status" a las columnas Kanban permite a los usuarios arrastrar y soltar tarjetas para actualizar el estado directamente dentro del tablero.

### **Cómo funciona**

1. **Selecciona un campo de Salesforce** de tu fuente de datos configurada.
2. **Asígnalo a un atributo Kanban** como el título de la tarjeta, la descripción, el nombre de la columna, etc.
3. **Repite este proceso** para todos los campos esenciales que deseas incluir en el tablero Kanban

***

## Acciones e interacciones de elementos

Esta sección te permite personalizar cómo interactúan los usuarios con tus tarjetas Kanban, haciendo que el tablero sea más dinámico y receptivo.

### **Vincular a**

* Define qué sucede cuando un usuario hace clic en un enlace específico dentro de una tarjeta Kanban.
* **Usos comunes:** Navegar a una página de detalle de registro, abrir un sitio web externo o activar un Salesforce Flow.

### **Al hacer clic**

* Determina las acciones que ocurren cuando un usuario hace clic en cualquier parte de una tarjeta Kanban.
* **Usos comunes:** Expandir la tarjeta para ver más detalles, abrir una ventana modal o iniciar un proceso.

<table><thead><tr><th width="228">Tipo de interacción</th><th>Descripción</th></tr></thead><tbody><tr><td><a href="../panel-de-propiedades/interacciones/mostrar-toast"><strong>Mostrar toast</strong></a></td><td>Muestra una breve notificación emergente en la pantalla, proporcionando una respuesta rápida o información después de hacer clic en un marcador del mapa.</td></tr><tr><td><a href="../panel-de-propiedades/interacciones/navegar"><strong>Navegar</strong></a></td><td>Redirige al usuario a una página diferente en tu sitio o URL, guiándolo hacia información más detallada sobre la ubicación seleccionada.</td></tr><tr><td><a href="../panel-de-propiedades/interacciones/abrir-modal-de-alerta"><strong>Abrir modal de alerta</strong></a></td><td>Abre una ventana modal con un mensaje de alerta, presentando información importante o advertencias sobre la ubicación seleccionada.</td></tr><tr><td><a href="../panel-de-propiedades/interacciones/abrir-confirmacion"><strong>Abrir confirmación</strong></a></td><td>Activa un cuadro de diálogo de confirmación, utilizado para acciones que requieren confirmación adicional del usuario, como la asistencia a un evento.</td></tr><tr><td><a href="../panel-de-propiedades/interacciones/abrir-cuadro-de-dialogo-de-flujo"><strong>Abrir diálogo de flujo</strong></a></td><td>Abre un diálogo que ejecuta un Salesforce Flow, iniciando flujos de trabajo o procesos relacionados con la ubicación seleccionada.</td></tr></tbody></table>

***

## Apariencia de estilo

### **Tamaño**

* **Ancho:** Controla el ancho horizontal total del tablero Kanban.
* **Altura:** Controla la altura vertical total del tablero Kanban.
* **Desbordamiento:** Dicta cómo se maneja el contenido si supera las dimensiones del tablero (las opciones podrían incluir "visible", "oculto" o "desplazar").

### **Borde**

* **Tamaño:** Grosor del borde alrededor de todo el tablero Kanban.
* **Estilo:** Apariencia del borde (por ejemplo, sólido, discontinuo).
* **Color:** Color del borde.
* **Radio:** Qué tan redondeadas son las esquinas del tablero.

### **Encabezado**

* **Color de fondo:** Establece el color de fondo de la sección de encabezado de Kanban.
* **Relleno (arriba, abajo, izquierda):** Controla el espaciado interno dentro del encabezado.
* **Margen inferior:** Crea espacio entre el encabezado y las columnas de abajo.

### **Borde del encabezado**

* **Color, tamaño, estilo, radio del borde:** Personaliza la apariencia de un borde dentro del encabezado (probablemente para separarlo visualmente).
* **Borde inferior (está unido):** Es probable que estos atributos controlen si el borde inferior se fusiona visualmente con los encabezados de las columnas.

### **Título/caption del encabezado**

* **Color, tamaño de fuente, grosor de fuente, estilo de fuente:** Controla la apariencia del título del encabezado y de cualquier texto de subtítulo.

### **Avatar del encabezado**

* **Color de fondo/primer plano:** Establece los colores del elemento avatar.
* **Utilidad de color de primer plano:** Probablemente te permite usar clases de utilidad de color predefinidas.
* **Radio del borde:** Controla qué tan redondeado es el elemento avatar.

### **Encabezado de columna**

* **Color de fondo de la ruta:** Color del área de fondo donde se muestra la ruta de progreso de la columna.
* **Texto de resumen/atributos de fuente:** Controla la apariencia de cualquier texto de resumen dentro del encabezado de la columna.

### **Dimensionamiento de columnas**

* **Ancho mín./máx.:** Establece el ancho mínimo y máximo permitido para las columnas, afectando cómo se redimensionan.

### **Tarjeta**

* **Colores de fondo:** Colores para los estados normal, al pasar el cursor y al enfocar.
* **Colores de borde:** Colores para los estados normal y enfocado.
* **Título/Descripción/Texto de información y atributos de fuente:** Controla la apariencia de varios elementos de texto dentro de una tarjeta.
* **Límite de líneas:** Limita el número de líneas mostradas para títulos/descripciones para evitar desbordamientos.

### **Notas importantes**

* **Especificidad:** Los atributos de estilo exactos pueden variar ligeramente según la implementación de Avonni.
* **Jerarquía visual:** Usa estos atributos estratégicamente para crear una jerarquía visual clara y guiar la mirada del usuario

***

## Ejemplos de casos de uso

### Ejemplo 1: Kanban de oportunidades para socios

{% @arcade/embed flowId="JQJEWO5OUQQf4fSb0GfD" url="<https://app.arcade.software/share/JQJEWO5OUQQf4fSb0GfD>" %}

Ofrece a tus socios una vista clara e interactiva de su canal de ventas, directamente dentro de tu portal Experience Cloud. Con un tablero Kanban de arrastrar y soltar, los usuarios socios pueden visualizar, gestionar y avanzar sus oportunidades sin salir del portal.

***

#### **Lo que lograrás**

* **Visibilidad potenciada para socios:** Ofrece a los usuarios socios una vista visual en tiempo real de su canal de oportunidades organizado por etapa
* **Gestión intuitiva del pipeline:** Permite la funcionalidad de arrastrar y soltar para que los socios puedan actualizar las etapas de las oportunidades sin esfuerzo
* **Información del negocio de un vistazo:** Muestra detalles clave como el nombre de la cuenta, el importe del negocio y la fecha de cierre directamente en cada tarjeta

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añadir el componente Kanban**

* Arrastra el componente AX Kanban al lienzo de Experience Cloud Builder
  {% endstep %}

{% step %}

#### **Configurar la fuente de datos**

* Establece el nombre de API del objeto en `Oportunidad`
  {% endstep %}

{% step %}

#### **Configurar asignaciones de datos**

* Establece el campo clave en `Id`
* Establece el nombre del campo de grupo en `StageName`
* Establece el tipo de registro en `Master`
* Establece el nombre del campo de resumen en `Amount`
  {% endstep %}

{% step %}

#### **Personalizar las tarjetas**

* Establece el título en `Name`
* Establece la descripción en `Account.Name`
* Establece la fecha de inicio en `CreatedDate`
* Establece la fecha de vencimiento en `CloseDate`
* Añade `Amount` como campo mostrado
  {% endstep %}

{% step %}

#### **Personalizar el encabezado**

* Establece el título del encabezado en `Kanban de oportunidades`
* Establece el icono del encabezado en `standard:opportunity`
  {% endstep %}

{% step %}

#### **Previsualiza tu tablero**

* Revisa el diseño en Experience Cloud Builder para confirmar que tu configuración se ve y funciona como esperas
  {% endstep %}
  {% endstepper %}

***

#### **Enlaces**

{% content-ref url="ax-pestanas" %}
[ax-pestanas](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-pestanas)
{% endcontent-ref %}

### Ejemplo 2: Kanban del estado de caso

{% @arcade/embed flowId="XXPy9vrTjP5P3hbCqwTg" url="<https://app.arcade.software/share/XXPy9vrTjP5P3hbCqwTg>" %}

Ofrece a tus clientes visibilidad sobre su recorrido de soporte con un tablero Kanban dedicado dentro de tu portal de soporte. Al mostrar los casos organizados por estado, los clientes pueden seguir el progreso de un vistazo, reduciendo la necesidad de hacer seguimiento para obtener actualizaciones y creando una experiencia de soporte más fluida y transparente.

***

#### **Lo que lograrás**

* **Transparencia para el cliente:** Permite a los clientes supervisar el estado de cada caso enviado en una vista de tablero clara y organizada
* **Reducción de llamadas entrantes sobre el estado:** Muestra el progreso de forma proactiva para que los clientes pasen menos tiempo solicitando actualizaciones
* **Mayor satisfacción con el soporte:** Ofrece una experiencia pulida e intuitiva que genera confianza en tu equipo de soporte

***

#### **Cómo configurarlo**

{% stepper %}
{% step %}

#### **Añadir el componente Kanban**

* Arrastra el componente AX Kanban al lienzo de Experience Cloud Builder
  {% endstep %}

{% step %}

#### **Configurar la fuente de datos**

* Establece el nombre de API del objeto en `Caso`
  {% endstep %}

{% step %}

#### **Configurar asignaciones de datos**

* Establece el campo clave en `Id`
* Establece el nombre del campo de grupo en `Estado`
  {% endstep %}

{% step %}

#### **Personalizar las tarjetas**

* Establece el título en `Número`
* Establece la descripción en `Contact.Name`
* Establece la fecha de inicio en `CreatedDate`
  {% endstep %}

{% step %}

#### **Personalizar el encabezado**

* Establece la variante en `Ruta`
* Establece el título del encabezado en `Kanban de casos`
* Establece el icono del encabezado en `standard:case`
  {% endstep %}

{% step %}

#### **Previsualiza tu tablero**

* Revisa el diseño en Experience Cloud Builder para confirmar que tu configuración se ve y funciona como esperas
  {% endstep %}
  {% endstepper %}