Página interactiva con flujos de trabajo

En este tutorial haces que una página reaccione al visitante sin escribir código. Agregas variables de página, abres y cierras un panel con un clic, filtras una lista con una expresión y ejecutas pasos cuando cambia una variable o se carga la página. Partes de la lista de publicaciones construida en Muestra datos de una API.

Agrega variables de página

1. Carga más publicaciones

   Abre la página con la consulta posts y presiona Data en la parte inferior de la barra lateral izquierda. Selecciona la consulta posts y cambia Path a /posts?_limit=30. Las primeras 30 publicaciones son de tres autores, con userId 1, 2 y 3.

2. Agrega una variable para el panel

   Junto a Page variables, presiona + y elige Boolean. La variable se llama isOpen y empieza en false. Indicará si el panel de filtros está abierto.

3. Agrega una variable para el filtro

   Presiona + otra vez y elige Number. Cámbiale el nombre a userId y deja el valor por defecto en 0, que significará "todos los autores".

Abre y cierra un panel

1. Agrega el botón y el panel

   De vuelta en el lienzo, agrega un Button encima de la lista y pon su Text en Filtros. Debajo, dibuja un frame llamado Panel de filtros con tres botones: Todos los autores, Autor 1 y Autor 2.

2. Muestra el panel solo cuando está abierto

   Selecciona Panel de filtros. En Visibility, presiona el botón de enlazar junto a Show when y escribe vars.isOpen. El panel desaparece del lienzo, porque isOpen es false.

3. Agrega un flujo de trabajo de clic

   Selecciona el botón Filtros. En Events, deja Click y presiona Add workflow. El espacio de trabajo Logic se abre en un nuevo flujo de trabajo de cliente cuyo disparador es un clic en ese botón.

4. Alterna la variable

   En Steps, presiona Add step y elige Set variable. Pon Variable en isOpen y Value en !vars.isOpen. Ahora cada clic alterna el valor entre true y false.

5. Pruébalo

   Presiona Run in preview. El Run log de abajo muestra el paso, y el panel aparece en el lienzo. Ejecútalo otra vez para ocultar el panel.

Filtra la lista

1. Filtra los ítems con una expresión

   Selecciona la lista de colección. En Collection list, presiona el enlace de datos junto a Items y reemplázalo por:

   js

   vars.userId === 0 ? queries.posts.data : queries.posts.data.filter(p => p.userId === vars.userId)
   

   Cuando userId es 0, la lista muestra todas las publicaciones; si no, conserva solo las publicaciones de ese autor.

2. Define el autor con un clic

   Selecciona el botón Autor 1 y agrega un flujo de trabajo de clic en Events. Agrega un paso Set variable con Variable userId y Value 1. Haz lo mismo para Autor 2 con el valor 2.

3. Restablece el filtro

   Selecciona Todos los autores, agrega un flujo de trabajo de clic y agrega un paso Reset variable para userId. Devuelve la variable a su valor por defecto, 0.

Reacciona cuando cambia una variable

1. Inicia un flujo de trabajo con un cambio de variable

   En el espacio de trabajo Logic, presiona + (Add workflow) y elige Variable changes. En Trigger, pon Variable en userId. Este flujo de trabajo se ejecuta cada vez que cambia el filtro, sin importar qué botón lo cambió.

2. Cierra el panel

   Agrega un paso Set variable con Variable isOpen y Value false.

3. Confirma con un aviso

   Agrega un paso Show toast. Junto a Message, presiona Use an expression y escribe:

   js

   vars.userId === 0 ? 'Showing all posts' : `Showing posts by author ${vars.userId}`
   

   Pon Variant en Success.

4. Prueba toda la página

   Presiona ⌘↵ para ver la vista previa. Haz clic en Filtros y luego en Autor 2: el panel se cierra, la lista muestra solo las publicaciones de ese autor y un aviso lo confirma. Haz clic en Filtros y en Todos los autores para volver a ver todas las publicaciones. Presiona ⌘↵ para volver a editar.

Carga de página y navegación

1. Saluda a los visitantes al cargar la página

   Presiona + (Add workflow) y elige Page load. Agrega un paso Show toast con el mensaje Usa Filtros para elegir un autor y la variante Info. Se ejecuta una vez cada vez que se abre la página.

2. Lleva a los visitantes a otra página

   Agrega un botón Contáctanos debajo de la lista y dale un flujo de trabajo de clic con un paso Go to page. En Destination, elige una de tus páginas, escribe una ruta como /contact o pega una URL completa.

   Un botón que solo lleva a una página no necesita un flujo de trabajo: define Target en su sección Link. Usa Go to page cuando otros pasos deban ejecutarse primero, o cuando el destino dependa del resultado de un paso.

3. Publica

   Presiona Publish y prueba la página de staging. Los flujos de trabajo se ejecutan en el navegador del visitante, así que el panel, el filtro y los avisos funcionan en el sitio en línea.

Lo que aprendiste

• Las variables de página guardan el estado de la página; los enlaces de datos como Show when e Items las leen.
• Los flujos de trabajo de cliente empiezan con un evento de un elemento, un cambio de variable o la carga de la página, y ejecutan los pasos en orden.
• Set variable con una expresión como !vars.isOpen alterna un valor, y una expresión filter reduce una lista.

Lee las guías en las que se basa este tutorial: