Nous allons découvrir les Options Set. Nous verrons ce que c’est, pourquoi ils sont utiles et comment les utiliser.

Les Options Set vous permettent d’avoir une liste statique de choix ou d’options qui sont globales à votre application. Nous utilisons les Options Set pour stocker des éléments que nous connaissons à l’avance, comme les jours de la semaine, les mois ou tout autre élément qui peut être prédéfini.

Contrairement aux types de données, ou Data Types, les Option Sets ne sont pas stockés dans la base de données de votre application.
Ils sont donc plus rapides à utiliser, ils se chargent également plus rapidement, et dans certains cas, il est plus facile de créer des Option Sets que des données dans la base de données.

Pour pouvoir suivre ce « tutoriel Bubble », il est conseillé de cliquer sur le bouton du dessus pour voir la vidéo en même temps.

Pour Créer des Options Set, nous naviguons vers notre onglet Datas, puis allons sur Option Sets. C’est là que vous pouvez créer, mettre à jour et supprimer des Option Sets comme vous le feriez pour des Data Types ordinaires.

Disons que dans notre application, nous voulons avoir accès à une liste de couleurs pour les voitures.

Nous allons donc nommer notre ensemble d’options en conséquence.

Avec cela, nous avons deux sections; une appelée options, et une autre pour les attributs : les options sont l’endroit où nous saisissons les options de notre liste et les attributs permettent d’ajouter différents types de champs à l’option. On va ajouter notre liste de couleurs en tant qu’options dans cet ensemble d’options.
Avec ces options ajoutées, nous avons notre liste statique de couleurs qui est globalement accessible dans toute notre application.

Cette façon de stocker des informations est déjà une aide précieuse, mais nous pouvons aller plus loin en ajoutant d’autres attributs. Nous allons cliquer sur créer un nouvel attribut et ajouter d’autres propriétés sur cette liste de couleurs que nous pourrions vouloir avoir. Par exemple, nous allons ajouter un attribut texte pour le code couleur. Ainsi, chaque nom de couleur peut être représentée par sa propre couleur.

Nous allons également ajouter un autre attribut de type nombre et le nommer ordre pour pouvoir ensuite choisir l’ordre d’affichage des couleurs plus tard si besoin.
Par défaut, notre ensemble d’options est trié dans l’ordre dans lequel vous ajoutez une option. Et si vous voulez changer l’ordre initial, vous pouvez déplacer les options vers le haut et le bas en cliquant sur ces liens. De plus, nous pouvons modifier chaque option en cliquant sur modifier les attributs.

Donc ici, nous pouvons ajouter à chaque option, une valeur de type Nombre pour l’ordre de tri. Et maintenant on entre les code couleurs qu’on veut.

La première façon d’accéder aux options est de passer par la source de données “Get an Option”. Si nous créons une zone de texte sur la page, nous utilisons “get an option” pour obtenir toutes nos Option Sets.

Remarquez que j’en avais déjà créé plusieurs pour la démo, donc cela retourne toutes les Options Set qu’on peut utiliser. Lorsque nous choisissons l’option, nous pouvons soit renvoyer la liste et toutes ses options, soit obtenir uniquement une option individuelle.
Mais lorsque nous sélectionnons une option individuelle, nous rencontrons un problème car nous avons ajouté une zone de texte, nous devons donc afficher du texte, pas une liste d’option, et pour l’installant on demande à afficher une option, rien de spécifique par rapport à cette option.

Lorsque nous cliquons sur More, nous pouvons obtenir l’attribut display, qui évaluera le texte et nous donnera le nom individuel de l’option.

Ensuite, nous allons créer un Repeating Group ici et définir le type de contenu sur notre Option Sets.

Donc, dans ce repeating group on choisit d’afficher l’option Set “Couleur”, c’est exactement ce que lorsque nous allons définir comme source de données, et le système nous propose directement d’utiliser toutes les couleurs.

En sélectionnant ceci, notre groupe va récupérer toutes nos options dans notre Option Set. Nous allons ensuite ajouter un élément de texte à la première cellule de notre groupe et obtenir les toutes les informations de la cellule de couleur actuelle, soit le nom et le code couleur.

Lorsque nous prévisualisons, nous pouvons voir toutes les options de notre ensemble d’options avec leurs noms et leurs code couleur.

Par défaut, notre repeating group affiche l’ordre de notre ensemble d’options en fonction de la façon dont nous avons saisi les options précédemment, mais nous avons ajouté un autre attribut appelé ordre pour nous donner plus de contrôle, donc nous pouvons utiliser cet attribut dans notre groupe en ajoutant un opérateur “sorted” à notre source de données et en triant par l’attribut ordre.

Maintenant, lorsque nous rafraîchissons la page, nous voyons que le groupe affiche les couleurs en fonction de l’ordre de chaque option plutôt que l’ordre de création dans les Options Set.
L’un des éléments les plus utiles pour les Options Set est l’élément de liste déroulante.
Les listes déroulantes ont deux façons d’accéder à une liste d’options. Vous pouvez saisir statiquement une liste dans l’élément lui-même ou en récupérer une dynamiquement.

Si nous passons à des choix dynamiques, on nous demande de choisir une source ici.
Nous voyons nos champs et types de données, mais aussi nos Options Set. Nous allons donc cliquer sur les couleurs. Nous devons ensuite définir la source des choix et comme nous l’avons vu, nous pouvons facilement obtenir toutes les couleurs. Enfin, nous allons définir la légende de l’option car nous devons récupérer le nom de chaque option.

En cliquant sur MORE après l’option courante nous allons obtenir son attribut par défaut pour le nom appelé “Display”. 

Prévisualisons notre application pour voir que notre liste déroulante affiche les options de notre Option Sets.

Nous pouvons même ajouter des Options Set comme champs personnalisés dans nos types de données.
Dans notre sous-onglet de type de données, nous allons cliquer sur Voitures et ajouter un nouveau champ personnalisé appelé Couleur, et le type de champ sera notre Option Set Couleurs.

Dans les données Voitures de notre application, nous pouvons modifier une voiture et ajouter une couleur.
Il faut savoir que comme les Options Set ne sont pas lus depuis la base de données, ils sont plus rapides à exécuter et charger.

Retournons sur notre page de voitures et affichons maintenant le couleur de chaque voiture.

On ajoute un élément dynamique, une icône dont la couleur sera le code couleur de la couleur sélectionnée pour cette voiture, et maintenant prévisualisons la page.

Voilà, c’est parfait !

Alors ces exemples peuvent facilement devenir plus complexes à mesure que vous continuez à construire en utilisant des Options Set. Bien qu’il soit techniquement possible d’obtenir les mêmes avantages en utilisant des types de données, vous devriez considérer les Options Set pour plusieurs raisons.

• Premièrement, les Options Set ne lisent pas la base de données, ce qui signifie que votre application s’exécutera plus rapidement partout où vous les utiliserez.
• Deuxièmement, vous pouvez ajouter de nouvelles options et les modifier rapidement.
• Et troisièmement, vous pouvez y accéder de n’importe où dans votre application.

Deux choses aussi à garder à l’esprit à propos des Options Set :

• Les Options Set ne sont pas privés, donc il est très déconseillé d’y mettre des données sensibles.
• Et lorsque nous mettons à jour un ensemble d’options, pour pouvoir voir le changement sur votre application en live, il faut non seulement déployer la version en live, mais aussi recharger la page.

Ce sont les principales différences entre les Options Set et les types de données.

Et voilà, nous avons vu comment les Option Sets peuvent être utilisés dans toute votre application, on a vu qu’ils sont plus rapides à afficher qu’une recherche dans la base de données et qu’ils sont globalement accessibles en les utilisant pour des situations où vous connaissez par avance ce qu’il y aura dans cette liste.

Vous savez maintenant ce que sont les Option Sets, j’espère que tout cela vous a plu !