Pimp my Qlik : les thèmes Qlik Sense

Qui a la référence ?

Au programme aujourd’hui, un thème (notez le jeu de mot) qui est revenu souvent durant ma vénérable carrière, l’UI de Qlik Sense.

Et c’est normal, après tout, un bon dashboard se doit d’être lisible du premier coup d'œil d’une part, et il doit d’autre part appliquer la charte graphique corporate permet de rendre l’adhésion à l’outil plus facile.

Découvrons donc la solution de Qlik pour pimper ses applications, les thèmes !

Caveat :
Dans ma famille, c’est ma sœur qui est UI Designer et Directrice Artistique. 

De fait, le thème que je vais vous présenter dans le cadre de ce tuto n’aura que peu de considération pour la cohérence des couleurs, des polices de caractères et tutti quanti (vous verrez par la suite que le latin à son importance ici).

Pour obtenir un résultat optimal, aussi bien en UX qu’en UI, nous avons chez Next Decision une superbe équipe dédiée que je vous invite à découvrir ici : Notre offre Ux / Ui Design

Avant d’aller plus loin, voici quelques éléments à connaître afin de faciliter la compréhension de ce qui va suivre.

Les prérequis pour les thèmes Qlik Sense

• Quelques connaissances en Qlik Sense
• Quelques bases en JSON
• Quelques bases en CSS
• Qlik Sense Desktop
• Un bon éditeur de code

Pourquoi Qlik Sense Desktop ?

En voilà une question qu’elle est bonne !

Pour déployer un thème, il faut l’importer dans Qlik Sense via la section dédiée de la Qlik Management Console. Ce qui signifie donc qu'à chaque changement que nous voudrions tester, il faudrait jouer ce processus.

C’est long et répétitif. Alors qu’avec Qlik Sense Desktop, il suffit d’enregistrer notre fichier et d’actualiser l'affichage de l’application pour voir directement les impacts de notre labeur.

L’astuce du chef :

Une fois Qlik Sense Desktop lancé, le Hub est accessible depuis le navigateur, grâce à l’URL http://localhost:4848/hub/

Cela permet d'accéder à la console du navigateur, ce qui pourrait nous être utile à des fins de tests.

Pour activer Qlik Sense Desktop, deux possibilités :

• Soit en créant un lien d’authentification depuis Qlik Cloud ou Qlik Sense On Premise
• Soit en utilisant le JSON d’activation disponible pour les développeurs

Ce dernier se trouve dans les téléchargements des outils Qlik, avec les instructions pour le déployer.

La base

Les thèmes, comme les extensions Qlik Sense, ont un squelette composé de :

• Un fichier .qext (pour qlikextension, bien joué)
• Un fichier theme.json
• Potentiellement, un fichier .css

L’ensemble se trouve dans un dossier dont le nom correspond à celui du thème. Pour l’installer sur Qlik Sense, celui-ci devra être archivé en .zip

Maintenant que cela est clair, rentrons dans le vif du sujet !

Wait a minute…

Un thème c’est bien, mais une application pour l’appliquer c’est encore mieux.

En voici une rapidement créée avec des données fictives, avec son thème par défaut :

Le fantasme de Jules César (vous croyez en la théorie de Cléopâtre, vous ?)

Et la voici avec le thème que nous allons créer ensemble :

Le fantasme de Jules César, mais sexy

Le fichier .qext

Commençons par le commencement, et choisissons le nom de notre superbe thème : Imperium Romanum.

Créons donc un dossier Imperium Romanum, puis à la racine, imperium_romanum.qext, et complétons le comme suit :

Et zééééé parti !

Le fichier theme.json

Une image valant 1000 mots, voici le squelette d’un fichier JSON définissant un thème Qlik Sense, accompagné d’une succinte explication de ses sections.

Maintenant que nous avons les bases structurelles de notre fichier, commençons à bâtir concrètement notre thème.

Caveat :
La liste non exhaustive des options de personnalisation est disponible dans la documentation officielle de Qlik : Custom themes | Qlik Developer Portal

Caveat bis :
Les extraits de code fournis doivent respecter l’implémentation décrite dans l’image ci-dessus pour fonctionner.

Propriétés de base du thème

Simplement deux clés ici, la première _cards permet de choisir si les objets se distinguent ou non de l’arrière-plan grâce à un jeu d’ombres, une bordure, un angle.

"_cards": false

"_cards": true

La seconde quant à elle, _inherit, permet d’appliquer les propriétés du thème par défaut de Qlik Sense, pour toutes les clés non définies dans le fichier.

"_inherit": false

"_inherit": true

Ce qui donne pour notre thème :

{
"_cards": false,
"_inherit": false,
}

Variables

Un bloc très important à mes yeux, car il permet de créer tout un tas de clés réutilisables dans l’intégralité du thème.

Très pratique pour l’évolution et la maintenance de celui-ci, surtout avec la mise à disposition de nouveaux objets Qlik, et l’amélioration continue de leur support de la personnalisation.

Fichier CSS

Petit mais puissant, ce bloc permet de référencer un ou plusieurs fichiers CSS externes. Pratique par exemple pour récupérer une police d’écriture non standard.

Dans le JSON

Dans le CSS

Couleurs des données et des sélections

Ici, nous définissons les codes couleurs utilisés dans toutes les applications. Ils se distinguent en deux catégories.

• D’une part, celui qui va régir la teinte par défaut des courbes, barres, etc. et ses compléments, comme les valeurs en erreur, nulles, ou autres.
• D’autre part, le célèbre code couleur vert, gris, blanc des sélections et du modèle associatif de Qlik, que nous avons, ô sacrilège sacrifié sur l’autel de la cohérence stylistique.

Propriétés globales de l’application

Nous définissons rapidement quelques options de personnalisation qui s’appliquent à l’ensemble des éléments de l’application Qlik Sense.

Elles pourront être éventuellement écrasées. Elles ne sont pas dans un bloc, mais au même niveau que celles systèmes.

Arrière-plan des feuilles

Le plus court bloc de notre thème, qui permet de définir l’arrière-plan par défaut des feuilles de l’application Qlik Sense

Propriétés des objets

Maximus obstructionum ! Ici, nous décrivons le style désiré des objets de deux façons, d’abord pour tous, puis ensuite pour chaque type spécifique, si cela est nécessaire.

Au global

Commençons par mettre en forme les objets de notre application dans leur globalité. Ici, nous changeons notamment les titres, sous-titres et pied de page (enfin d’objet), les axes et la grille (leurs lignes, libellés, et valeurs).

N’oublions pas que notre thème n’utilise pas les cartes d’affichage. Cette option offre une kyrielle de clés de style, telles que l’ombrage, les bordures, les angles, l’arrière-plan.

Nonobstant, certaines propriétés ne peuvent pas s’appliquer à tous. Simplement parce que l’élément qu' elles sont censées amender n’existe point. Par exemple un graphique méthode n’ayant ni axe ni grille, ces attributs sont ignorés.

Par type d’objet

Certaines propriétés spécifiques à une classe d’objets peuvent être définies au travers d’un bloc dédié, à l’intérieur du bloc object vu précédemment.

Aussi, celles décrites au global restent disponibles et peuvent être écrasées.

Palettes de couleurs

À nos pinceaux Van Gogh en devenir ! Ici, nous définissons les jeux de couleurs utilisées dans l’application, sous forme de palettes.

Mais quels sont donc ces blocs mystères ?

Pour les données

Comme subtilement indiqué par le titre, nous crééons le jeu de couleur qui s’applique notamment lorsque l’on choisi la coloration par dimension ou multicolore.

Pile ce qu’il faut pour distinguer d’un coup d'œil nos éléments d’analyses.

Il est possible d’en créer plusieurs, mais ici, nous en implémentons qu’une seule.

Pour l’interface utilisateur

Il s’agit ici d’une palette disponible dès que l’option couleur unique s’affiche. On la trouve dans les graphiques, les arrière-plans, les objets textes, les couleurs conditionnelles, etc.

Dans notre cas, il s’agit d’une version étendue de celle créée juste au-dessus, pour ajouter une teinte associée au positif et au négatif, entre autres choses.

En revanche, il est possible d’en implémenter qu’une.

Classes de couleurs

Comme promis, parlons dégradés, disponible dès lors que l’on choisit une coloration par expression.

Il en existe de plusieurs types :

• Le dégradé divergent, alias dg



• Les classe divergentes, alias dc



• Le dégradé séquentiel, alias sg



• Les classes séquentielles, alias sc

Pratique pour représenter du positif et du négatif, une proportion, etc.

La surprise du chef

Malheureusement, il n’est pas possible de tout personnaliser au travers du fichier JSON.

Par exemple, j’aime beaucoup changer le style des volets de filtres lorsqu’ils sont réduits, notamment leurs bordures.

Mais de l’obscurité jaillit un rayon d’espoir, le fichier CSS !

Caveat : Les altérations que nous apportons ici ne sont pas supportées et peuvent casser à chaque montée de version. Cela dit, je n'ai pas encore eu l’occasion de pallier un tel problème.

C’est ici qu’intervient la console de notre navigateur, en effet, il faut manuellement aller chercher les classes CSS qui nous intéressent, sans se tromper.

C’est un exercice un iota complexe, qui entraînera au début quelques erreurs, j’ai pu par exemple modifier tous les boutons de Qlik Sense sans le vouloir. Coup dur :-D

Avec persévérance et l’inspecteur d'éléments, nous trouvons nos classes. C’est l’heure du CSS.

Et voilà des volets de filtres tout beaux, tout chaud avec un léger effet de surbrillance.

Conclusion

Dorénavant, notre antique thème est terminé, et vous connaissez les rudiments de la personnalisation des applications Qlik Sense.

Admirons derechef le résultat de notre dur labeur du jour :

Je ne m’en lasse pas !:-D

À vous de jouer maintenant, de tester les différentes options, l'infinité de couleurs qui s'offrent à nos yeux, de partager cet article à vos proches, ou bien simplement de contacter notre belle équipe dédiée.

Comme je suis d’une grande mansuétude, et pour éviter de mettre un infâme pavé plus de 200 lignes, de vous pouvez télécharger l’application et le thème disponible sur GitHub ici : Imperium Romanum

Et voilà pour aujourd’hui ! À bientôt pour de nouvelles aventures dans le monde merveilleux de Qlik Sense !

Retour page précédente Retour au Wiki

Nos consultants Next Decision sont experts certifiés Qlik et vous accompagnent dans votre projet Qlik. Nous pouvons également vous former ! Contactez-nous !