Reporting avancé ou le paradoxe de Spock : 3 - Découverte de la syntaxe CSS pour les bordu

[StephaneP]

Le reporting avancé ou le paradoxe de Spock : 1-Le Starter kit du reporting avancé 

Reporting avancé ou le paradoxe de Spock : 2. Comprendre la logique de formatage

Reporting avancé ou le paradoxe de Spock : 3 - Découverte de la syntaxe CSS pour les bordures (Vous êtes ici)

Reporting avancé ou le paradoxe de Spock : 4 - 1er Exemple avancé d’utilisation du CSS

Reporting avancé ou le paradoxe de Spock : 5 - 2ème Exemple avancé d’utilisation du CSS

Reporting avancé ou le paradoxe de Spock : 6. Gestion de la taille des colonnes

Reporting avancé ou le paradoxe de Spock : 7. Exemples de gestion de taille des colonnes

Reporting avancé ou le paradoxe de Spock : 8. Entête multilignes sorti dans 1 tableau XLS

Reporting avancé ou le paradoxe de Spock : 9. Entête multi lignes sorti dans 1 onglet XLS

Reporting avancé ou le paradoxe de Spock : 10. Entête multi lignes via l’outil Table

Reporting avancé ou le paradoxe de Spock : 11. Entête multi lignes via l’outil Table 2

Découverte de la syntaxe CSS pour des formatages avancés

La syntaxe CSS (Cascading Style Sheet) est peu connue par les utilisateurs Alteryx car utile uniquement pour gérer des cas de formatage dynamiques pointus. La connaître est déjà un exploit et vous pourrez frimer à la machine à café. Seuls quelques rares explorateurs (notamment Indiana Jones en 1984) ont découvert son existence.

Et pour cause, elle n’est utilisée que pour le seul outil TABLE du menu REPORTING dans le sous menu Formule du formatage conditionnel de colonne. Ouf ! Je vous l’avais dit, ça se mérite le style CSS avec Alteryx…

Il est pourtant largement utilisé au-delà d'Alteryx. C'est en effet un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

Un peu comme le langage RegEx, c'est un langage externe utilisé par un outil Alteryx. Mais seules quelques syntaxes ont été utilisées, il est donc très rapide de monter en compétence dessus, surtout que le principal usage se concentre sur les bordures, à savoir la syntaxe border.

Usage n°1 : Formater dynamiquement des bordures de cellule au sein d'un tableau, ou rajouter une surcouche de formatage conditionnel lorsque les options standards ne suffisent pas.

Typiquement réaliser ce type de tableau :

Vous ne trouverez pas de menu dédié pour formater dynamiquement des bordures. Seul le sous menu Formule dans les règles de lignes ou de colonnes, permet de le faire et impose l'utilisation du format CSS.

Usage n°2 : On verra dans les usages avancés (cf articles suivant de la série) qu’une des techniques pour obtenir des entêtes complexes est de les intégrer dans la table de données et de les formater conditionnellement. Le langage CSS est alors indispensable.

Reprenons l’exemple simple de l’usage n°1 avec un workflow simple destiné à le réaliser :

Mettons que l’on parte de données brutes de ce type :

Ce type de formatage se réalise via l’outil TABLE.

On applique un format à la table en général via le menu Paramètres par défaut.

On passe le texte en orange, la 2^ème couleur en orange clair

Idem pour les entêtes que l’on passe en orange aussi avec texte en blanc de police 10.

Et on supprime les bordures de la table :

En quelques clics on a déjà une table propre.

On va y rajouter un formatage pour le Total Europe. L’intérêt des objets Reporting est justement de permettre du dynamisme. Quelque soit le nombre de ligne ou leur ordre on veut que ce soit Total Europe  qui soit coloré comme un Total.

On va donc utiliser le menu Modifier la règle de ligne…

On peut donc appliquer, dès que la colonne 1 contient Total Europe le formatage conditionnel : Police grasse et en italique, Police plus grande, fond gris et encre blanche.

On obtient :

Il ne reste plus qu’à formater colonne par colonne.

Pour Col1 par exemple, Renommage en « Pays », justification à gauche, taille de 4 cm et..

des règles de formatage conditionnelles.

Ici, une règle applicable dans tous les cas pour justifier l’entête au centre.

Dans le cas de la colonne 3, Reste à recruter, on souhaite mettre en avant les employés manquant via un encadrement rouge. Vous noterez qu’il n’y a pas d’option dédiée pour l’encadrement. On a tout autour de la police, du fond ou du contenu mais rien pour l’encadrement. D’où justement la nécessité d’utiliser le langage CSS.

Ceci se fait via la sous option Formule. Lorsqu’une ligne remplira cette condition :

[Col3]>0 and [Col1]!="Total Europe"

Note : On ne veut pas appliquer ce format si on est déjà sur le sous total Europe.

Alors on appliquera le format CSS suivant :

On explique ici que pour les cellules considérées, on applique une bordure d’épaisseur 1, pleine et de couleur rouge en haut, en bas, à gauche et à droite. Cf. table de référence des syntaxes, plus bas dans l’article.

A noter qu’on peut placer ici des formules plus complexes, on a tout un éditeur de formule à disposition. Exemple utilisé dans un des articles suivants où on formate différemment l’encadrement et le fond en fonction des valeurs.

On obtient bien alors :

Cette syntaxe CSS est peu documentée dans l’aide Alteryx : https://help.alteryx.com/fr/20213/designer/table-style-rules

ni d'ailleurs dans la community. D’où cet article de vulgarisation qui va vous permettre de vous lancer et de découvrir le potentiel.

Voici notamment une table rapide montrant la syntaxe et son effet

Cette table est générée dynamiquement dans le workflow suivant :

Vous pouvez donc, pour tester une nouvelle syntaxe modifier cette table et visualiser le résultat dans l’outil Explorateur en sortie.

Dans le langage CSS, pour éviter de taper/connaitre les codes RGB une table générique des couleurs existe. Elle se trouve ici : https://help.alteryx.com/20213/designer/colors.

On peut utiliser ces noms dans les options de formatage conditionnel de l’outil Table, pas uniquement pour la sous option Formule.

En pièce jointe vous trouverez donc un workflow contenant :

1 - Le cas simple de formatage conditionnel décrit ci-dessus et faisant appel au langage CSS,

2 - Un exemple live des principales syntaxes de style à disposition qui permet aussi de tester la syntaxe que l'on pense mettre en place. On place sa syntaxe, on lance on vérifie le résultat,

3- Un rappel de la table de référence des couleurs à disposition (en plus des RGB classique).

Ca y est, on a toutes les bases pour se lancer dans le coloriage pointu.

A noter que l’article suivant présente 2 autres exemples d’application du langage CSS ou des propriétés de reporting dynamique.

3-Découverte syntaxe CSS.yxmd