Mise en forme conditionnelle

Documentation sur la mise en forme conditionnelle.

Définition

La mise en forme conditionnelle permet de changer le style des champs d'une page en fonction de leurs données.

Avant de commencer

Il est nécessaire, avant de commencer, de mettre à jour les profils administrateur de votre projet.

Pour ce faire, depuis le backend de votre projet, allez sur Administration / Profils et mettre à jour le ou les profils sur lesquels vous souhaitez rajouter les droits de personnalisation en cochant les entrées suivantes :

• Gérer les styles de l'application
• Gérer la mise en forme conditionnelle

Une fois ceci fait, l'item de menu Personnalisation apparaît. Ce menu contient deux modules que nous allons utiliser dans les différentes étapes ci-dessous.

Etape 1 - Création d'une feuille de style globale (module -> Feuilles de style)

Création de la feuille de style globale (web et/ou mobile) du projet, qui contient les classes CSS (Cascading Style Sheets) que nous lierons aux règles de mise en forme et qui seront appliquées sur les champs de la liste et/ou du formulaire si la condition de la règle est vérifiée.

À noter, sur mobile, qu'il faut recharger la liste des projets afin que les changements apportés à la feuille de style soient pris en compte.

Etape 2 - Création d'une règle de mise en forme (module -> Mise en forme conditionnelle)

Afin de créer une règle de mise en forme conditionnelle pour un champ en particulier, il est nécessaire de :

• 1 - Sélectionner la page contenant ce champ.

• 2 - Créer la règle pour une liste ou un formulaire (via les onglets).

Dans le détail, de la création d'une règle :

• Champ de liste : Sélectionnez le champ sur lequel appliquer la mise en forme conditionnelle. À noter, qu'il vous faut créer autant de règles qu'il y a d'affichage possible (lg, sm, xs) pour ce champ.
• Classe css : Mettre le nom (sans le point) de la classe à utiliser lorsque la condition est vérifiée.
• Champ : Le champ dont la valeur doit être vérifiée.
• Opérateur : L'opérateur de la condition.
• Valeur : La valeur à vérifier.

Notes importantes

• 1 - L'ajout de la feuille de style globale (contenant des classes CSS) à votre projet, doit être un acte réfléchi et contrôlé. En effet, une mauvaise utilisation du CSS peut causer des problèmes d'affichage. Aussi, nous vous recommandons de créer des classes css comme sur la capture d'écran de l'étape 1.
• 2 - Il existe des différences entre les styles de l’application web et mobile.
• 3 - La condition simple ne peut pas utiliser des données des tables jointes si elles ne sont pas définies dans le formulaire ou la liste de la page.
• 4 - La mise à jour des librairies graphiques utilisées par l’application ou l’évolution de l’interface de l’application suite à des nouveaux développements peuvent engendrer l’obsolescence des classes CSS globales définies par l’administrateur.
• 5 - Selon le type de champ à personnaliser, les sélecteurs CSS ne sont pas les mêmes et les résultats peuvent être différents (exemple: un champ texte et une liste déroulante).