Fonctions avancées

Éléments réutilisables

Un élément Reusable element est, comme sa traduction l’indique, un élément réutilisable. C’est une fonctionnalité de Bubble qui vous permet de placer un élément, un groupe d’éléments, une fonctionnalité, de les mettre dans un même élément, qui deviendra réutilisable. Cet élément est alors utilisable sur une page, sur plusieurs pages, il peut même être plusieurs fois dans la même page, ou bien être contenu dans un autre élément Reusable element.

Il est très important de créer des éléments réutilisables lorsque vous avez besoin d’une même fonctionnalité à plusieurs endroits de votre application. D’une part, car il est très facile de les créer et de les utiliser, mais aussi et surtout parce que cela permet de gérer les mises à jour sur un seul élément, plutôt que sur tous les éléments possédant cette fonctionnalité.

Les exemples les plus utilisés sont : l’en-tête de page, le pied de page, le système de connexion et d’inscription, les fonctionnalités d’édition et de création (CRUD), et toutes les autres fonctionnalités dont vous aurez besoin plus d’une fois dans sur votre application.

"Option set"

Un "option set" est un ensemble d’options permettant de définir une liste de données statiques.

Les "options sets" sont des types de données spécifiques. Elles sont du même ordre que les "data type", mais complémentaires. Les "options sets" servent à stocker des données qui évoluent peu dans le temps, des données statiques, là où les "data type" servent à la gestion des données dynamiques.

Les "options sets" sont très souvent utilisées dans une application, car ils permettent de stocker des données servant aussi bien à l’affichage d’informations pour l’utilisateur, que de données de gestions pour le développeur. On y enregistre généralement des données qui évoluent peu dans le temps, comme des couleurs, les noms de rôles pour les utilisateurs, le genre des utilisateurs, le statut des paiements ou encore des options de catégorisation de données.

Les "options sets" ont aussi souvent pour but d’être utilisées à plusieurs endroits de l’interface, l’objectif est de définir les valeurs à un endroit de l’application pour les utiliser à tout moment. Cela évite les réécritures et surtout les fautes de frappe et d’orthographe pouvant être source d’erreurs compliquées à retrouver.

"custom states"

Nous avons abordé les notions de "data type" et d’"option set" dans les sections précédentes en comparant ces données comme étant respectivement des données dynamiques et des données statiques. Les "custom states" sont considérés comme le troisième système de données que Bubble propose. On catégorisera ces données de données temporaires, des données qui sont réinitialisées à chaque chargement de page et non stockées en base de données.

Ils se comportent de manière très différente des "data type" et "option set" lors du développement des fonctionnalités. Là où les "data type" et "options sets" se configurent depuis l’interface Data, les "custom states" font partie intégrante de l’interface Design et n’apparaissent pas dans la partie Data. Toutefois les "custom states" restent une forme de données définies avec un nom, un type et la précision si c’est une liste.

Les "custom states", par leur forme de données temporaires, peuvent être très utiles pour stocker des valeurs que l’utilisateur renseigne avant de les enregistrer de façon définitive dans la base de données. Ils peuvent également être utilisés pour faire un système de menu de navigation, en stockant la valeur du menu que l’utilisateur visualise et en changeant la valeur du "custom state" pour changer le menu visible.

Dans ce chapitre, nous utiliserons ce dernier exemple de menu pour étudier le fonctionnement des "custom states". Nous réaliserons une fonctionnalité de menu permettant à un utilisateur de passer de l’interface de connexion à l’interface d’inscription, et à l’interface de réinitialisation de mot de passe.

Voici l’exemple que nous allons mettre en place.

Visuels des interfaces Inscription, Connexion et Mot de passe oublié

Aller plus loin

Dans cette dernière partie, nous allons ajouter quelques informations en rapport avec les fonctions avancées. En effet, il existe énormément de possibilités qui ne se sont pas abordées dans ce livre. Des fonctionnalités complexes qui demandent parfois plusieurs mois d’expertise avant d’être optimisées.

Survolons rapidement les notions avancées de Backend, API et Low-code que vous pourrez approfondir pour aller plus loin après votre lecture.