Page interactive avec des workflows

Dans ce tutoriel, vous faites réagir une page au visiteur sans écrire de code. Vous ajoutez des variables de page, vous ouvrez et fermez un panneau d’un clic, vous filtrez une liste avec une expression, et vous exécutez des étapes quand une variable change ou que la page se charge. Vous partez de la liste d’articles construite dans Afficher des données d’une API.

Ajouter des variables de page

1. Charger plus d’articles

   Ouvrez la page qui contient la requête posts et cliquez sur Data en bas de la barre latérale gauche. Sélectionnez la requête posts et changez Path en /posts?_limit=30. Les 30 premiers articles viennent de trois auteurs, avec les userId 1, 2 et 3.

2. Ajouter une variable pour le panneau

   À côté de Page variables, cliquez sur + et choisissez Boolean. La variable s’appelle isOpen et vaut false au départ. Elle indiquera si le panneau de filtres est ouvert.

3. Ajouter une variable pour le filtre

   Cliquez de nouveau sur + et choisissez Number. Renommez-la userId et laissez la valeur par défaut à 0, qui signifiera « tous les auteurs ».

Ouvrir et fermer un panneau

1. Ajouter le bouton et le panneau

   De retour sur le canevas, ajoutez un Button au-dessus de la liste et réglez son Text sur Filters. En dessous, dessinez un cadre nommé Filter panel avec trois boutons : All authors, Author 1 et Author 2.

2. N’afficher le panneau que lorsqu’il est ouvert

   Sélectionnez Filter panel. Dans Visibility, cliquez sur le bouton de liaison à côté de Show when et tapez vars.isOpen. Le panneau disparaît du canevas, car isOpen vaut false.

3. Ajouter un workflow au clic

   Sélectionnez le bouton Filters. Dans Events, gardez Click et cliquez sur Add workflow. L’espace de travail Logic s’ouvre sur un nouveau workflow client dont le déclencheur est un clic sur ce bouton.

4. Inverser la variable

   Dans Steps, cliquez sur Add step et choisissez Set variable. Réglez Variable sur isOpen et Value sur !vars.isOpen. Chaque clic fait maintenant basculer la valeur entre true et false.

5. L’essayer

   Cliquez sur Run in preview. Le Run log, en bas, affiche l’étape, et le panneau apparaît sur le canevas. Exécutez-le de nouveau pour masquer le panneau.

Filtrer la liste

1. Filtrer les éléments avec une expression

   Sélectionnez la liste de collection. Dans Collection list, cliquez sur la liaison à côté de Items et remplacez-la par :

   js

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

   Quand userId vaut 0, la liste affiche tous les articles ; sinon, elle ne garde que les articles de cet auteur.

2. Choisir l’auteur au clic

   Sélectionnez le bouton Author 1 et ajoutez un workflow au clic dans Events. Ajoutez une étape Set variable avec Variable userId et Value 1. Faites de même pour Author 2 avec la valeur 2.

3. Réinitialiser le filtre

   Sélectionnez All authors, ajoutez un workflow au clic et ajoutez une étape Reset variable pour userId. Elle remet la variable à sa valeur par défaut, 0.

Réagir quand une variable change

1. Démarrer un workflow sur un changement de variable

   Dans l’espace de travail Logic, cliquez sur + (Add workflow) et choisissez Variable changes. Dans Trigger, réglez Variable sur userId. Ce workflow s’exécute chaque fois que le filtre change, quel que soit le bouton qui l’a modifié.

2. Fermer le panneau

   Ajoutez une étape Set variable avec Variable isOpen et Value false.

3. Confirmer avec un toast

   Ajoutez une étape Show toast. À côté de Message, cliquez sur Use an expression et tapez :

   js

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

   Réglez Variant sur Success.

4. Tester toute la page

   Appuyez sur ⌘↵ pour prévisualiser. Cliquez sur Filters, puis sur Author 2 : le panneau se ferme, la liste n’affiche que les articles de cet auteur et un toast le confirme. Cliquez sur Filters puis sur All authors pour revoir tous les articles. Appuyez sur ⌘↵ pour revenir à l’édition.

Chargement de la page et navigation

1. Accueillir les visiteurs au chargement de la page

   Cliquez sur + (Add workflow) et choisissez Page load. Ajoutez une étape Show toast avec le message Use Filters to pick an author et la variante Info. Elle s’exécute une fois à chaque ouverture de la page.

2. Envoyer les visiteurs vers une autre page

   Ajoutez un bouton Contact us sous la liste et donnez-lui un workflow au clic avec une étape Go to page. Dans Destination, choisissez l’une de vos pages, tapez un chemin comme /contact ou collez une URL complète.

   Un bouton qui ne fait que mener à une page n’a pas besoin de workflow : réglez plutôt Target dans sa section Link. Utilisez Go to page quand d’autres étapes doivent s’exécuter avant, ou quand la destination dépend du résultat d’une étape.

3. Publier

   Cliquez sur Publish et essayez la page de préproduction. Les workflows s’exécutent dans le navigateur du visiteur : le panneau, le filtre et les toasts fonctionnent donc sur le site en ligne.

Ce que vous avez appris

• Les variables de page contiennent l’état de la page ; des liaisons comme Show when et Items les lisent.
• Les workflows client démarrent sur un événement d’élément, un changement de variable ou le chargement de la page, et exécutent leurs étapes dans l’ordre.
• Set variable avec une expression comme !vars.isOpen inverse une valeur, et une expression filter restreint une liste.

Lisez les guides sur lesquels ce tutoriel s’appuie :