Créer des formulaires interactifs et dynamiques dans Adalo

AVERTISSEMENT : Ce contenu reste en ligne à des fins d’apprentissage, mais Ops machine recommande expressément de NE PAS utiliser Adalo. Pendant la période où on s’en est servi, la plateforme s’est révélée effroyablement peu sécuritaire, incomplète et, de façon générale, à peu près impossible pour livrer quoi que ce soit.

Par ailleurs, la bibliothèque de composants Pragmaflow n’est plus maintenue : les mises à jour de la plateforme adalo la brisaient à répétition.

‍

‍

Comment créer des formulaires qui utilisent des relations plusieurs-à-plusieurs, des enregistrements de plusieurs collections, et qui offrent une meilleure expérience utilisateur globale.

L’appli présentée en démo est https://depotop.nu/

‍)

‍Transcription

‍

Salut tout le monde. Bienvenue dans une autre vidéo de Pragma flow sur les trucs cool qu’on peut faire dans Dialo. Souvent, on se concentre sur les composants, euh, mais aujourd’hui on va se concentrer sur des choses vraiment, vous savez, juste utiliser les fonctionnalités natives de Dialo. Euh, une des questions qui revient vraiment souvent, c’est comment faire de beaux formulaires interactifs?

Comment utiliser des objets plusieurs-à-plusieurs dans des formulaires? Euh, comment on peut. Utiliser des objets liés qui ont leurs propres propriétés dans des formulaires, encore, et, et s’assurer que tout est bien connecté. Vous savez, le widget de formulaire fait plein de bonnes choses et on sait tous qu’il a quelques limites. Une d’elles, encore une fois, c’est les objets plusieurs-à-plusieurs.

Euh, et oui, donc on se heurte essentiellement à ce problème. Où, vous savez, hé, on veut créer une liste de vérification, OK? Je vais en fait parler de l’appli devant nous juste pour illustrer une des situations. Donc, donc cette appli est, est vraiment cool. Euh, c’est un de nos clients qui la bâtit avec nous et, euh, en gros, ça prépare les parents à prendre trois jours.

Et pendant ces trois jours-là, ils peuvent du début à la fin entraîner, euh, faire l’apprentissage de la propreté de leur. Ce qui est bien mieux que la plupart, euh, c’est basé sur les données. Et donc il y a, euh, vous savez, des autoévaluations et des choses comme ça pour aider les parents à savoir si eux et leurs enfants sont prêts. Et c’est la page qu’on regarde maintenant. Donc voici le.

Euh, du côté gauche ici, l’autotest de l’enfant, et celui-ci, c’est l’autotest de l’utilisateur, et ils sont essentiellement identiques. Fait que je vais vous en montrer juste un. Et la façon dont c’est bâti, c’est qu’on a le, euh, vous savez, on a l’utilisateur, juste, parlons un peu de la base de données. Euh, on a l’utilisateur, on a le test enfant de l’utilisateur, et ensuite on a cette liste de critères.

Euh, et donc comment on relie tout ça et comment on fait pour que ça fonctionne bien? Formulaire. Donc ici, on a pour le test de l’enfant sept critères, euh, l’appli est présentement en néerlandais, mais elle va être traduite en anglais, euh, bientôt. Euh, et on a sorti un composant de traduction de langue, donc ça pourrait être un très bon test pour lui.

Euh, et oui, donc essentiellement ce que vous voyez ici, c’est tous les différents critères. Donc on veut qu’ils apparaissent ici. On veut que l’utilisateur les coche. Et à la fin, on veut que l’utilisateur appuie sur un bouton et que cet enregistrement soit sauvegardé. Euh, et puis il y a quelques autres affaires, hein? Comment on gère ça si l’utilisateur part au milieu, euh, de ça, vous savez, on pense peut-être à créer des enregistrements temporaires.

Mais, vous savez, si, si on fait ça, en fait, ça ne marche pas. J’ai essayé ça au début et la raison pour laquelle ça ne marche pas, c’est qu’il faut transférer toutes ces relations et, et je ne crois pas, euh, qu’il y ait une très bonne façon de le faire. Euh, mais disons que si vous créiez un objet temporaire pour stocker les données et, et, vous savez, le sauvegarder à la fin, euh, qu’est-ce qui arrive quand l’utilisateur quitte, comment vous ramenez ça, et cetera.

C’est ça. Euh, et. Et oui, ça commence juste à devenir, quand on y pense, il y a tellement de moments où l’utilisateur peut abandonner le processus, vous savez, est-ce qu’on crée le vrai objet et on le marque juste comme terminé à la fin? Et si vous êtes, en tout cas, je vais juste vous montrer ce que, ce que j’ai fait et, euh, j’espère que ça va vous aider.

Donc la première chose, c’est. Quand l’utilisateur arrive sur cette page, ce qu’on fait comme action, c’est qu’on crée un nouvel enregistrement de test enfant de l’utilisateur, parce que c’est, c’est ce qui va stocker toutes les données. Euh, mais on ne veut pas faire ça à chaque fois parce que ça deviendrait vraiment le bordel. Donc à la place, ce qu’on fait, c’est, euh, d’abord, on a en cours.

Vrai. D’habitude, je ferais est-ce terminé plutôt que est-ce en cours, mais. Euh, pour rendre ça compatible avec tous les anciens enregistrements qui n’avaient pas ce champ. Euh, et parce que ça va être faux par défaut, il fallait, vous savez, le formuler de façon à ce que, euh, ce soit vrai dès le départ. Et ensuite je le mets à faux et ça va correspondre à tous les enregistrements existants.

OK? Parce qu’ici, ce que je dis, c’est qu’on va seulement faire ça. Si le nombre de tests enfant de l’utilisateur connecté. Où en cours est vrai, est égal à zéro. OK? Et si je l’avais fait dans l’autre sens, est terminé, est vrai. Euh, alors ce serait difficile de chercher ceux où est terminé est faux, parce que ce serait chaque enregistrement historique fait dans le passé.

Euh, et ça ne fonctionnerait pas. Donc, euh, encore une fois, depuis le début, quand l’utilisateur arrive sur cette page, on vérifie s’il a un enfant d’utilisateur actuel, En cours, et s’il n’en a pas, on en crée un pour lui. Bon. Maintenant, qu’est-ce qui se passe ici? Comment on relie tout? Euh, donc on a cette liste intérieure. On va commencer par l’intérieure.

C’est une liste des critères de l’enfant. Euh, et donc ça va se charger et ensuite l’utilisateur peut les cocher, mais qu’est-ce que ça fait de les cocher? Bon. En fait, c’est une liste dans une liste. La liste extérieure va charger le test actuel de l’utilisateur. Et, euh, la façon dont on fait ça, c’est qu’on va trouver le test enfant de l’utilisateur connecté où en cours est vrai, et on va mettre un nombre maximal d’éléments.

Qui est un, et on va trier du plus récent au plus ancien. Si tout est bien fait, on n’a pas besoin du nombre maximal d’éléments à un, et on n’a pas besoin de trier du plus récent au plus ancien, mais parfois les choses ne se passent pas bien. Et donc ça va s’assurer qu’on affiche toujours le plus récent. Euh, en fait, souvent, je n’aime pas fixer un nombre maximal d’éléments même dans ces situations, parce que si je vois cinq listes, je sais que quelque chose ne va pas ailleurs.

Et donc souvent, ça peut être utile de ne pas cacher les bris à votre. Euh, dans ce cas-ci, c’était quand même un peu utile de le faire, donc on crée, quand l’utilisateur arrive sur la page, on crée cet enregistrement. S’il n’en a pas déjà. Cette liste va charger l’enregistrement le plus récent, que ce soit celui qui vient d’être créé ou qu’il l’ait commencé il y a trois mois, qu’il ait quitté l’appli et qu’il revienne seulement maintenant, tsé.

Ça trouve juste l’enregistrement le plus récent. Et ensuite, quand on clique sur ces cases à cocher, qui sont dans la liste de critères, qui est à l’intérieur de la liste de tests de l’utilisateur, vous avez probablement deviné ce qu’on va faire. On va juste inclure ou attacher les critères au test de l’utilisateur. Évidemment, on a configuré ces relations et ça vaut probablement la peine de jeter un coup d’œil rapide dans la base de données, euh, juste pour voir comment les choses sont configurées.

Donc, euh, si on regarde la configuration du test enfant de l’utilisateur ici, ce n’est rien de trop compliqué. On a la relation aux critères du test de l’enfant, qui est une plusieurs-à-plusieurs, et ensuite on a la relation à l’utilisateur. Avec ces deux-là en place, on a tout ce dont on a besoin. Maintenant. Euh, cette appli en particulier a en fait certaines conditions.

Selon le résultat, euh, selon le nombre de cases cochées, on va diriger les utilisateurs vers un de deux écrans, un qui dit : hé, vous êtes prêt. Et l’autre qui dit : hé, désolé, vous n’êtes pas prêt. Et donc, euh, encore une fois on est, oh, euh, ce qui est important, c’est que comme on va vers cette autre page.

Et, euh, en passant, c’est sur cette autre page qu’on va vraiment marquer l’enregistrement comme terminé. C’est comme ça qu’on a décidé de le faire, parce qu’une fois que je clique sur ce bouton et que je continue vers une de mes pages modales, peut-être que je veux appuyer sur annuler et revenir modifier ça. Donc on a décidé que c’est seulement quand vous cliquez sur le bouton OK sur cette page que l’enregistrement va vraiment être mis à jour.

Et évidemment, la façon dont ça va mettre à jour l’enregistrement, c’est en, euh, mettant. En cours à faux. Comme ça, il ne sera plus chargé ici. Et si l’utilisateur revient sur cette page, un nouveau test d’utilisateur va être créé. Maintenant, parce qu’on met à jour cet enregistrement sur la page suivante, on doit en fait passer les données de l’enregistrement à cette page.

Et donc ce bouton ici est dans une. Et cette liste est exactement, euh, configurée exactement comme la liste de vérification au-dessus. J’ai joué avec l’idée de les mettre dans la même liste et, et on pourrait dire que ce serait une bonne idée, parce que ce serait juste une liste qui se charge sur la page. La raison pour laquelle je ne l’ai pas fait, c’est que je n’arrivais pas à trouver comment faire en sorte que la mise en page fonctionne bien, euh, de la même façon que vous voyez.

Il y a en fait un groupe et une boîte ici que j’ai faits. Euh, c’est un rectangle parce que le bouton disparaissait derrière ici. Euh, et quand je vous montre, en fait, si je vous montre comment la page défile, juste comment on l’a configurée, euh, oh, c’est drôle. J’avais oublié de mettre à jour. En passant, c’est un petit détail au hasard, mais recharger le cadre est une façon incroyablement utile de mettre à jour votre appli sans rafraîchir la page au complet.

Je viens de l’apprendre. Donc vous voyez comment le défilement se fait, et ce rectangle est en fait juste translucide. Euh, je ne suis pas sûr s’il y a une façon de faire un. Un, euh, dégradé de transparence, ce qui serait le meilleur effet, mais ça fait quand même une belle job pour faire le ménage, euh, tout en évitant, tsé, l’effet bizarre d’une coupure sèche.

Euh, et oui, donc essentiellement juste la façon de faire défiler ça correctement. Euh, c’est, c’est pour ça que j’ai fait ce rectangle. Donc pour tout résumer. Ce bouton est une liste. Il charge le même test d’utilisateur qu’ici. Et ensuite, quand vous. Continuez vers la page suivante. Il passe ces données pour qu’on puisse mettre à jour cet enregistrement sur la page suivante.

Et il y a deux conditions. Donc si le nombre de critères des tests enfant de l’utilisateur actuel est plus grand que deux, alors OK, vous êtes prêt à continuer. Et s’il n’est pas plus grand que deux, alors vous êtes. Prêt à continuer. Et donc c’est comme ça que, euh, c’est comme ça que la redirection conditionnelle se fait. Je peux vous montrer le processus tout de suite, ici même.

Mm-hmm , je vais en cliquer quatre. OK. Et voilà, même si ça ne ressemblait pas à la page oui, ce serait vraiment drôle que ça plante pendant la démo, il s’est passé des choses plus folles. Euh, jetons un. Donc on a, euh, des enregistrements de test enfant de l’utilisateur. C’est celui que je veux regarder maintenant. Inquiétez-vous pas. Tout ça, c’est des données de test.

Rien de ça, c’est des données d’utilisateurs. Et, euh, c’est vraiment drôle, mais ça a pas marché comme je l’espérais. Donc on va devoir trouver pourquoi ça n’a pas créé ce nouvel enregistrement. Euh, ou est-ce juste que la base de données ne s’est pas mise à jour pour une raison quelconque? Hmm.  Bon, ça gâche un peu la vidéo. Euh, d’un autre côté, c’est le fun de montrer que tout ne fonctionne pas toujours aussi parfaitement qu’on l’espère.

Et parfois, des choses qu’on avait déjà fait fonctionner brisent quand même. Alors voyons vraiment rapidement ici. Quel pourrait être le problème? Le problème pourrait être que peut-être, moi, comme utilisateur, je ne regarde juste pas assez loin et j’avais déjà un test en cours. Je vais descendre tranquillement pour voir si c’est ça.

Oh oui. Euh, ici, celui-ci est déjà en cours. Donc le problème, c’est que je suis allé à la mauvaise page et ça ne s’est pas mis à jour. Supprimons celui-ci et voyons ce qui arrive. Je pense que le problème est avec la redirection. Euh, rechargeons juste ce cadre. Oups. Mauvais bouton de rechargement. Bon, donc ici, allons à l’autotest.

Hmm. J’en gagne pas une aujourd’hui. Hein? Qu’est-ce qui se passe?

Oh,

Hmm. Donc on a la condition que si mon utilisateur. Si le nombre d’enregistrements de mon utilisateur qui ne sont pas terminés est zéro. Alors je devrais avoir un nouvel enregistrement. Et on sait que ça fonctionne bien déjà. Et c’est peu probable que cet ancien enregistrement cause les problèmes. Euh, par contre, vous pouvez voir ici que, euh, ça a essentiellement fait son travail dans le passé.

Alors on pousse encore un peu pour voir, hein? Le voilà. OK. Donc il s’avère que c’était peut-être juste un problème de chargement. Euh, et je suis devenu impatient. Donc on a maintenant ce tout nouveau test, allons-y un et deux. Et si on clique ici, ça dit que je n’ai pas atteint les bons critères, le bon nombre.

Donc maintenant j’en ai quatre et ça devrait être assez, mais ça ne l’est toujours pas. Essayons de toutes les cocher, juste pour voir, c’est drôle que ce compte ne fonctionne pas. Remarquez, il y a des bogues dans Adela, euh, des bogues connus autour du compte. Alors voyons encore, qu’est-ce qui s’est passé ici? Donc ça, ça a marché, mes critères de test, euh, enfant se sont bien attachés, et la seule chose qui ne s’est pas bien passée.

C’est la redirection vers la bonne page pour que je puisse fermer ça. Jetons un autre coup d’œil rapide pour voir ce qui pourrait clocher. Je me demande presque si un téléchargement ne s’est juste pas mis à jour assez vite côté serveur. C’est une appli plutôt lourde, et je me demande s’il y a eu un problème de compte. Euh, mais poussons juste un peu plus ici.

C’est celui-là qui ne fonctionne pas. Et ça devrait, si le nombre de critères de test enfant des tests enfant de l’utilisateur actuel est plus grand que deux. Et on voit clairement ici que cette condition est vraie, parce qu’il y en a sept. Donc ça pourrait être un mystère pour un autre jour. Par contre, je déteste vous laisser en plan.

Une chose cool avec cette technique, c’est que, regardez, ça a rechargé mon ancien enregistrement. Et ça, ça marche très bien. OK. Donc voilà. C’était juste un problème d’Adal qui ne mettait pas le compte à jour assez vite. Et donc voilà.  ça, c’est. Censé avancer vers le test vous-même. Euh, parce que j’utilise zoom dans l’aperçu web, c’est long à charger, par contre.

C’est normalement beaucoup plus rapide. Euh, donc on voit que ça a fonctionné. Et si je voulais retourner à l’autotest, maintenant j’en ai un nouveau. Alors on retourne dans Dialo encore une fois. Oui, voilà. Donc on voit ici mon ancien enregistrement. Voici mon nouveau. Donc finalement, dès le départ, tout fonctionnait correctement.

Je suis devenu un peu impatient et j’ai un peu paniqué quand il y a eu des délais. Euh, mais voilà, du début à la fin, la technique pour créer des formulaires utilisateur vraiment géniaux. Et vous pourriez aller beaucoup plus loin avec ça, hein? Vous pourriez dire. Je vais juste vous parler d’autres façons de s’en servir ici.

La seule chose à l’intérieur de ce test enfant de l’utilisateur, c’est une autre liste avec des critères, mais je pourrais ajouter des champs texte, vous savez, à l’extérieur de la liste intérieure. OK. Je pourrais, euh, essentiellement créer un peu plus d’espace, euh, agrandir ma liste extérieure. Et là-dedans, je pourrais mettre des cases à cocher pour des champs vrai-faux à l’intérieur de. L’objet parent, je pourrais mettre une liste qui chargerait un autre objet relationnel.

Euh, donc il y a toutes sortes de choses qu’on pourrait faire. Et c’est juste une belle façon de créer des formulaires vraiment dynamiques et utiles qui ne sont pas limités par les mêmes. Sortes de critères que l’éditeur de formulaires, euh, original de Dialo. Ce à quoi il faut vraiment faire attention en faisant ça, c’est la validation des champs. Vous allez devoir créer vos propres conditions.

Euh, vous pourriez décider de cacher le bouton selon une certaine condition, et vous pourriez faire ça avec des conditions de visibilité, vous allez probablement, euh, Vous pourriez vouloir utiliser le compte si votre but est d’utiliser plusieurs conditions, mais ensuite vous pourriez dire quelque chose comme, voyons si on peut trouver ça sur le coup.

Euh, si le compte d’autotests de l’utilisateur. Non, ce ne serait pas ça. Euh, si l’autotest de l’utilisateur. Hmm. Je ne peux pas me lier à un autre objet d’ici. J’espérais pouvoir. OK. Si les utilisateurs connectés, euh, ici. Oui. C’est évidemment là que je dois être, critères d’autotest. Euh, je commence à me perdre. OK. Si le compte de critères d’autotest de l’autotest de l’utilisateur connecté.

Est égal à, j’imagine qu’on dirait est plus grand que zéro. Alors on afficherait le bouton. OK. Et d’habitude, vous voudriez mettre à sa place un, euh, un genre de bouton à l’état inactif qui montrerait à l’utilisateur qu’il y aura un bouton ici une fois que, vous savez, il répond aux critères. Euh, donc c’est, vous savez, juste un, et je pourrais ajouter plus de critères à ça et ce serait une.

Pour essentiellement mettre en place la validation pour que ces utilisateurs ne puissent pas avancer. Si j’avais plusieurs champs, je pourrais, vous savez, pointer vers, euh, est-ce que je pourrais pointer vers un champ de saisie d’ici? Oui. Il faudrait que je configure ça un peu différemment, mais je pourrais pointer vers des champs de saisie que j’ai à l’écran et ensuite dire si leurs valeurs ne sont pas vides.

Euh, donc c’est une espèce de façon de faire que j’ai trouvée. Euh, dans les derniers jours, pour régler un problème. Qui m’est arrivé pas mal souvent. Et, euh, je vous laisse voir jusqu’où vous pouvez aller avec ça et quels genres de trucs cool et fous on peut bâtir par-dessus. Alors merci et, euh, amusez-vous bien. Et, euh, oui, si vous, si vous aimez cette vidéo, abonnez-vous, parce qu’on va en sortir d’autres.

‍

‍