Appsmith est une solution open-source low-code pour créer des applications internes. Et Baserow une solution open-source no-code pour remplacer des bases de données traditionnelles ou des fichiers excel partagés, alternative à Airtable.
Voyons ci-après comment réaliser dans Appsmith un formulaire de création de lead, avec des règles de validation, des affichages conditionnels, et aussi une sauvegarde des données dans la Baserow.
1/ Appsmith
Formulaire
Créer un formulaire se fait à la souris se fait aisément. Plusieurs types de champs sont disponibles, et la mise en forme possible est avancée, avec des notions de colonnes, des couleurs, des affichages conditionnels …
A noter deux modes d’affichage : Soit la page est en « auto-layout » et va s’adapter à l’écran d’affichage, et les éléments n’ont pas de coordonnées fixes d’affichage, mais s’empilent ou se juxtaposent. Soit l’affichage est libre avec une grille et on y dépose les widgets.
Parmi les widgets disponibles avancés, notons les cartes, les sliders … et il est possible d’en créer de nouveaux, on verra ca plus tard.
et layouts
et content
Styles
Les styles sont modifiables à la souris, très simplement.
Ci-contre, on voit la possibilité de modifier la font, la taille, la couleur de texte ou d’arrière plan, l’alignement, la bordure …
Elément intéressant, on peut définir un style par défaut (bordures, couleurs), et il sera appliqué à tous les éléments, sauf si bien sur on surcharge un widget en particulier.
Et quand on atteint les limites du configurateur no-code, il est possible d’utiliser des CSS externes.
Affichage conditionnel
Pour que le formulaire soit plus fluide à remplir et ne fasse pas peur par sa longueur, il est préférable de l’afficher par morceaux. Pour antant, on ne va pas valider chaque morceau à chaque fois, et laisser l’utilisateur avancer/revenir en arrière comme il le souhaite.
Pour cela, on utilisera des containers empilés, et des boutons pour passer de l’un à l’autre.
Chaque bouton peut utliser une des actions prédéfinies, mais aussi laner une action javascript complètement spécifique.
{{
Container1.setVisibility(false);
Container2.setVisibility(true)
}}code d’une action en javascript, quand le no-code n’a pas tout prévu
On peut observer que chaque objet de la page est accessible par son nom, et on appréciera l’auto-complétion accessible dans le petit bloc d’édition
Générateur de JavaScript avec une AI (beta)
En ligne droite avec la possibilité d’ajouter du JavaScript pour manipuler les objects de la page, Appsmith a développé une fonctionnalité qui permet d’écrire ce que l’on souhaite et d’obtenir le code JavaScript qui le fait. Charge ensuite à l’utilisateur de l’adapter et de le valider.
A noter que le résultat n’est pas toujours précis, mais ca peut s’avérer une aide très utile quand on ne connait pas soit le javascript soit les fonctions disponibles.
Expressions régulières
Pour les plus avancés, la validation d’un champ peut se faire en utilisant une expression régulière (et on trouvera tous les exemples souhaités sur internet, comme validation d’un téléphone français, validation d’une adresse email non gmail/yahoo, …)
Github
Au passage, une fonctionnalité qui nous a beaucoup plu, la connextion complète à Github pour commiter ses modifications. C’est-à-dire que les modifications de l’interface, faites à la souris en glisser/déposer, se traduisent en fichiers de configurations, qui peuvent être versionnés, gérés dans des branches dans github ! Permettant aussi l’import/export de projets entre les instances Appsmith, localhost et SaaS dans notre cas.
Appsmith permet de faire des commit un projet sur GitHub, la base indispensable pour une vraie gestion de versions et de travail en équipe
Publication de l’application
La publication est très simple, l’application est déployable, accessible sur une URL. On peut la rendre publique, sans identification, ou demander une identification, ou même utiliser une base de users.
Attention cependant si on veut utiliser l’application dans une iframe, il faudra respecter les règles de sécurité sur les noms de domaine/sous-domaines, ou bien les navigateurs la bloquerons. Et donc utiliser la version SaaS avec nom de domaine, ou l’héberger soi-même sur un sous-domaine compatible.
Voila, vous avez fini votre application – ici un simple formulaire, mais cela peut être plus complexe, avec plusieurs pages, des tables, des listes, une connexion utilisateur … Plusieurs templates sont disponibles pour ne pas partir de zéro.
>>> Voyons maintenant la partie Baserow pour la gestion et le stockage des données
