[Tutoriel Vidéo] Comment utiliser des icônes colorées dans le menu de votre app?

Avant de démarrer, je dois vous spécifier que cette technique ne fonctionnera qu'avec le mode de navigation GRID.

 

La première étape est d'activer le Add-On "Option Développeur".

Ensuite, il faut vous rendre dans le menu Settings > Développeurs > Mes Fichiers et importer vos magnifiques icônes pleines de couleurs dans le Back Office GoodBarber.

Il est maintenant temps d'obtenir l'URL de votre icône, dont nous nous servirons tout à l'heure dans le tableau de bord JSON. Pour ce faire, cliquez sur la petite icône à gauche de votre fichier dans la page Mes Fichiers. Une nouvelle fenêtre s'ouvrira alors, vous montrant l'icône que vous avez importée. Faites alors un clic droit sur cette dernière et choisissez l'option Copier l'URL de l'image.

La partie la plus facile est terminée! Maintenant c'est le moment de vous transformer en Ninja!
 

Pour accéder au tableau de bord JSON, vous devez retourner dans le menu App, entrer dans la section correspondante à l'icône que vous souhaitez personnaliser, et entrer dans le menu JSON, en haut, au centre de l'écran.

Une fois à l'intérieur du tableau de bord JSON, descendez tout en bas de la liste, et placez votre curseur sous le dernier élément de la liste. Vous devriez alors voir 2 actions possibles: "Add Property" ou "Add Object".

La première étape consiste à cliquer sur la commande "Add Object" et taper "iconPerso" dans la fenêtre pop-up qui apparait (attention respectez bien les majuscules et minuscules lorsque vous ajoutez une propriété ou un objet).

La page sera rafraichie et vous pourrez voir l'objet que vous venez d'ajouter dans une box grise parfaitement alignée avec les derniers éléments de la liste. 

Une étape de moins!
 

Vous devez maintenant cliquer sur le + à côté de la box grise contenant l'objet iconPerso, déplacez le curseur sous la vos, et cette fois-ci, cliquez sur "Add Property".

Attention: les boutons Add Property et Add Object relatifs à l'objet iconPerso seront un petit peu décalés vers la droite.

Lorsque vous cliquez sur Add property, un nouveau pop-up apparait. Cette fois-ci, vous devez écrire "imageUrl", puis cliquer sur Ok.

La propriété que vous venez d'ajouter apparaîtra dans en bleu, avec une case vide dans laquelle il vous faudra coller l'URL de l'icône qui vous avez précédemment copiée.

Maintenant il vous suffit de cliquer sur Save en bas de la page, afin de sauvegarder vos modifications.


PS: Pour ajouter des icônes à toutes les sections de votre app, vous devrez recommencer ce processus dans le tableau de bord JSON de chaque section.