MallaDocs
AccueilDémarrage rapideOuvrir Malla

Workflows client

De la logique visuelle qui s’exécute dans le navigateur sur les clics, les envois, le chargement de la page et les changements de variable.

Guide utilisateur

Les workflows client sont de la logique visuelle qui s’exécute dans le navigateur du visiteur : quand quelqu’un clique, tape, envoie un formulaire, ou quand la page se charge, une liste d’étapes s’exécute. Le résultat de chaque étape est disponible pour la suivante sous la forme steps.<id>.

Déclencheurs

DéclencheurS’exécute quand
Page loadla page est chargée
Element eventun élément émet click, submit, change, input, mouseenter, mouseleave, focus ou blur
Variable changesune variable reçoit une nouvelle valeur
Query succeeds / Query failsune requête se termine ou échoue
Intervaltoutes les N millisecondes
Called by another workflowuniquement quand un autre workflow le lance

Le moyen le plus rapide de commencer : sélectionnez un élément, ouvrez Events dans l’inspecteur et cliquez sur Add workflow.

Créer un workflow

  1. Ouvrez l’espace de travail Logic

    Les workflows de la page en cours sont listés à gauche. Créez-en un et choisissez son déclencheur.

  2. Ajoutez des étapes

    Choisissez des actions dans la bibliothèque d’étapes : définir des variables, recharger des données, naviguer, afficher un toast, jouer une interaction, connecter un visiteur… Chaque paramètre peut être une expression.

  3. Ajoutez du contrôle de flux

    Créez une branche selon une condition, un aiguillage selon une valeur, une boucle sur un tableau, des voies en parallèle, ou enveloppez des étapes dans un try/catch.

  4. Testez-le

    Cliquez sur Run in preview. Le journal d’exécution affiche chaque étape, son résultat et sa durée, en utilisant les valeurs d’aperçu de vos variables. Le mode aperçu exécute aussi les workflows sur le canevas.

json
{
  "name": "Add to cart",
  "runtime": "client",
  "trigger": { "type": "event", "node": "n_btn_add", "event": "click" },
  "steps": [
    { "id": "guard", "action": "core.branch",
      "params": { "if": { "$expr": "!user.isLoggedIn" } },
      "branches": { "then": [
        { "id": "toLogin", "action": "core.navigate", "params": { "to": "/login" } },
        { "id": "end", "action": "core.stop" }
      ] } },
    { "id": "add", "action": "core.setVar",
      "params": { "var": "cart", "value": { "$expr": "[...vars.cart, item]" } } },
    { "id": "done", "action": "core.toast", "params": { "message": "Added to cart" } }
  ],
  "onError": [
    { "id": "oops", "action": "core.toast", "params": { "message": { "$expr": "error.message" }, "variant": "error" } }
  ]
}

Erreurs

Quand une étape échoue, les étapes on error s’exécutent avec error disponible. Sans elles, l’erreur est journalisée et, en aperçu, affichée dans un toast.

Limites

Une exécution client est plafonnée à 200 étapes, 8 niveaux d’imbrication, 1 000 itérations de boucle et des délais de 60 secondes : une erreur ne peut jamais figer l’onglet d’un visiteur.

Chaque action et ses paramètres sont listés dans la référence des actions de workflow.