> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-kanban.md). # AX - Kanban ## Resumen **AX - Kanban** es un componente de Experience Cloud que muestra registros de Salesforce como tarjetas arrastrables organizadas en columnas de flujo de trabajo en 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 los valores de los registros, mientras tú controlas qué campos aparecen en las tarjetas y qué valores de lista desplegable definen las columnas. Configura todo en Experience Builder sin código. Perfecto para portales de atención al cliente que muestran el progreso de los casos, portales de partners que gestionan etapas de oportunidades, espacios de colaboración de proyectos o cualquier lugar donde los usuarios del portal necesiten gestión visual del flujo de trabajo.
*** ## Primeros pasos Usa este sencillo tutorial para aprender los conceptos básicos del componente Kanban y empezar a crear tus casos de uso. {% @arcade/embed url="" flowId="SKeLCf1CoTnJZHTYhLOF" %} *** ## Conectar con 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.
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 quieres que muestre tu tablero Kanban. * **Filtrado opcional:** Si deseas mostrar solo un subconjunto de los datos del objeto seleccionado, usa 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 región determinada. * **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 la visualización o las interacciones, agrégalos en la sección "Campos adicionales". Esto es especialmente útil para los 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, haciendo más fácil visualizar y gestionar elementos de trabajo específicos. *** ## Configuración de asignaciones de datos La sección "Asignaciones de datos" establece una conexión precisa entre tus datos de Salesforce y los elementos visuales de tu tablero Kanban. Aquí te explicamos por qué esto es crucial: * **Visualización precisa:** Las asignaciones de datos garantizan que la información extraída 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ócialo con un atributo de 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 quieras 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 lo que sucede cuando un usuario hace clic en un enlace específico dentro de una tarjeta Kanban. * **Usos comunes:** Navegar a una página de detalles del registro, abrir un sitio web externo o activar un flujo de Salesforce. ### **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.
Tipo de interacciónDescripción
Mostrar notificación emergenteMuestra una breve notificación emergente en la pantalla, proporcionando una respuesta rápida o información después de hacer clic en un marcador de mapa.
NavegarRedirige al usuario a una página diferente de tu sitio o URL, guiándolo hacia información más detallada sobre la ubicación en la que hizo clic.
Abrir modal de alertaAbre una ventana modal con un mensaje de alerta, presentando información importante o advertencias sobre la ubicación seleccionada.
Abrir confirmaciónActiva un cuadro de diálogo de confirmación, usado para acciones que requieren confirmación adicional del usuario, como la asistencia a un evento.
Abrir diálogo de flujoAbre un diálogo que ejecuta un flujo de Salesforce, iniciando flujos de trabajo o procesos relacionados con la ubicación en la que se hizo clic.
*** ## Apariencia del estilo ### **Tamaño** * **Anchura:** Controla el ancho horizontal general del tablero Kanban. * **Altura:** Controla la altura vertical general del tablero Kanban. * **Desbordamiento:** Determina cómo se maneja el contenido si supera las dimensiones del tablero (las opciones podrían incluir 'visible', 'hidden' o 'scroll'). ### **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 espacio interno dentro del encabezado. * **Margen inferior:** Crea espacio entre el encabezado y las columnas de abajo. ### **Borde del encabezado** * **Color, tamaño, estilo y radio del borde:** Personaliza la apariencia de un borde dentro del encabezado (probablemente para separarlo visualmente). * **Borde inferior (está unido):** Estos atributos probablemente controlan si el borde inferior se fusiona visualmente con los encabezados de columna. ### **Título/leyenda del encabezado** * **Color, tamaño de fuente, grosor de fuente, estilo de fuente:** Controlan la apariencia del título del encabezado y cualquier texto de leyenda. ### **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. * **Atributos de texto/fuente del resumen:** Controlan la apariencia de cualquier texto de resumen dentro del encabezado de la columna. ### **Tamaño de la columna** * **Ancho mínimo/máximo:** 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 con foco. * **Colores del borde:** Colores para los estados normal y con foco. * **Título/Descripción/Texto de información y atributos de fuente:** Controlan la apariencia de varios elementos de texto dentro de una tarjeta. * **Ajuste de líneas:** Limita el número de líneas mostradas para títulos/descripciones para evitar desbordamientos. ### **Notas importantes** * **Especificidad:** Los atributos exactos de estilo 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 de partners {% @arcade/embed url="" flowId="JQJEWO5OUQQf4fSb0GfD" %} Ofrece a tus partners una vista clara e interactiva de su canal de ventas, directamente dentro de tu portal de Experience Cloud. Con un tablero Kanban de arrastrar y soltar, los usuarios partner pueden visualizar, gestionar y avanzar en sus oportunidades sin salir nunca del portal. *** #### **Lo que lograrás** * **Visibilidad ampliada para partners:** Ofrece a los usuarios partner una vista visual, en tiempo real, de su canal de oportunidades organizada por etapa * **Gestión intuitiva del canal:** Habilita la funcionalidad de arrastrar y soltar para que los partners puedan actualizar las etapas de las oportunidades sin esfuerzo * **Información de negocio de un vistazo:** Muestra detalles clave como el nombre de la cuenta, el importe de la oportunidad y la fecha de cierre directamente en cada tarjeta *** #### **Cómo configurarlo** {% stepper %} {% step %} #### **Agregar 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 `Opportunity` {% 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 `Nombre` * Establece la descripción en `Account.Name` * Establece la fecha de inicio en `CreatedDate` * Establece la fecha de vencimiento en `CloseDate` * Agregar `Amount` como un 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 vea y funcione como esperas {% endstep %} {% endstepper %} *** #### **Enlaces** {% content-ref url="/pages/60875709b7a627e2caf9b2920a75d22a9132c111" %} [AX - Pestañas](/experience-cloud/experience-cloud-es/experience-components/ax-tabs.md) {% endcontent-ref %} ### Ejemplo 2: Kanban de estado de casos {% @arcade/embed url="" flowId="XXPy9vrTjP5P3hbCqwTg" %} Ofrece a tus clientes visibilidad sobre su proceso 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 pedir 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 %} #### **Agregar 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 vea y funcione como esperas {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-kanban.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.