Elementos seleccionables y grupos

Los elementos seleccionables son elementos del flow que los usuarios pueden pulsar para seleccionar o deseleccionar. Su estado puede controlar la navegación, la visibilidad y otra lógica a lo largo del flow. Esto es lo que puedes hacer:

Elementos seleccionables por defecto

Algunos tipos de elementos son seleccionables por defecto: ya pertenecen a grupos creados automáticamente y no necesitan configuración adicional:

  • Opciones de quiz: Cada respuesta de un quiz es un elemento seleccionable dentro del grupo del quiz. Consulta Quizzes.
  • Productos: Tarjetas de producto dentro de un grupo de productos. Consulta Bloque de producto.
  • Pestañas: Elementos de pestaña dentro de un grupo de pestañas. Consulta Pestañas.
  • Toggles de prueba: Un contenedor que pertenece a un grupo y adquiere un estado seleccionado. Consulta Toggles.

Hacer un elemento seleccionable

En algunos casos, puede que quieras hacer que elementos adicionales sean seleccionables. Por ejemplo, puedes añadir una casilla No volver a preguntar que funcione como un elemento dentro de un grupo de quiz.

Para hacer un elemento seleccionable:

  1. Selecciona el elemento en la pantalla o en el panel Layers.
  2. A la derecha, cambia al panel Interactions.
  3. Selecciona Turn into selectable element.
Opción Turn into selectable element en el panel Interactions
  1. En el desplegable Group, selecciona un grupo existente o crea uno nuevo.
  2. Establece el Element ID — un identificador único para este elemento dentro del grupo.
  3. Si quieres que este elemento esté seleccionado por defecto, marca la casilla Set as default in group.
Configuración de elemento seleccionable con el desplegable Group, Element ID y la casilla Set as default

Crear un grupo

Los grupos organizan los elementos seleccionables de una pantalla y definen cómo funciona la selección: si los usuarios pueden elegir una opción, varias opciones o activar/desactivar.

Para crear un grupo:

  1. Selecciona un elemento y hazlo seleccionable.
  2. En el desplegable Group, selecciona Create group.
Opción Create group en el desplegable Group
  1. Introduce un Group name.
  2. Selecciona el tipo de grupo.

El grupo ya estará disponible en el desplegable Group para otros elementos seleccionables de la misma pantalla.

Configuración de creación de grupo con el nombre del grupo y el selector de tipo de grupo

Tipos de grupo

La mayoría de los presets de quiz son de opción múltiple por defecto. Cambia el tipo de grupo para permitir solo una respuesta.

  • Opción única: Solo se puede seleccionar un elemento del grupo a la vez. Al seleccionar uno nuevo, se deselecciona el anterior.
  • Opción múltiple: Se pueden seleccionar varios elementos al mismo tiempo.
  • Toggle: Cada elemento alterna entre seleccionado y deseleccionado en cada toque, de forma independiente a los demás.

Gestionar grupos

Para ver y editar grupos, abre el panel Screen settings y busca la sección Selectable groups. Aquí aparecen todos los grupos de la pantalla actual.

Haz clic en el ID de un grupo para:

  • Cambiar el ID del grupo
  • Cambiar el tipo de grupo
  • Ver cómo se referencian los elementos del grupo en las condiciones
Editar grupo seleccionable en el panel Screen settings

Usar el estado de selección en condiciones

Puedes referenciar el estado de selección de un grupo en condiciones de cualquier pantalla del flow, no solo en la pantalla donde está definido el grupo. Por ejemplo: IF quiz.photo is selected, THEN navigate to the Photo screen.

Todos los elementos de un grupo deben estar en la misma pantalla. No puedes añadir elementos de diferentes pantallas a un mismo grupo. Sin embargo, puedes referenciar los valores del grupo en condiciones de cualquier pantalla del flow.

Usa el estado de selección con:

  • Acciones condicionales: Redirige a los usuarios a distintas pantallas o activa diferentes acciones según los elementos seleccionados.
  • Navegación dinámica: Ramifica el flow según las respuestas a un quiz, los estados de los toggles u otras selecciones.
  • Visibilidad condicional: Muestra u oculta elementos según lo que los usuarios hayan seleccionado en pantallas anteriores.