Visuel personnalisé dans LuckyTemplates : découvrez comment contrôler les propriétés des polices dans DAX

Pour ce billet de blog, je souhaite prendre un peu de temps aujourd'hui et vous présenter un visuel personnalisé dans LuckyTemplates que j'ai commencé à utiliser et qui offre beaucoup de flexibilité et de fonctionnalités qui ne sont pas possibles dans les visuels LuckyTemplates natifs. Vous pouvez regarder la vidéo complète de ce tutoriel au bas de ce blog.

Je sais que nous avons beaucoup parlé de Deneb ces derniers temps et avec raison, mais celui-ci offre également beaucoup de flexibilité. Les utiliser ensemble en fait une paire assez puissante. Le visuel personnalisé dont je parle s'appelle HTML & CSS Viewer de K Team Solutions .

Il y a eu récemment une La couleur n'est certainement pas un problème; c'est quelque chose que nous pouvons faire assez facilement grâce à la mise en forme conditionnelle dans LuckyTemplates.

Contrôler les attributs de textes comme le gras et l'italique via des mesures DAX est quelque chose que vous ne pouvez pas faire avec LuckyTemplates natif, mais c'est assez facile à faire avec cette visionneuse HTML CSS. Vous pouvez également utiliser le visuel pour créer des effets visuels et faire une approche complète de la carte KPI.

Jetons un coup d'œil au post du forum. En gros, le membre disposait d'un simple visuel de carte basé sur une mesure et souhaitait modifier les attributs du texte.

Nous allons sauter dans LuckyTemplates pour recréer ce scénario. Nous allons configurer la mesure en fonction de l' ensemble de données de pratique à partir de l'outil externe que nous utilisons pour créer des maquettes.

Nous le définirons de manière à ce que si le total des ventes annuelles était supérieur à 40 millions, il sera en gras et en rouge.

Et si c'était moins que ça, ce serait bleu et non gras.

Table des matières

• Téléchargement du visuel personnalisé HTML CSS Viewer dans LuckyTemplates
• Modification des propriétés de la police avec un visuel personnalisé dans LuckyTemplates
• Utilisation de l'application personnalisée de différentes manières
• Ajout d'animations et de GIF à votre rapport
• Conclusion

Téléchargement du visuel personnalisé HTML CSS Viewer dans LuckyTemplates

Je vais vous montrer comment cela peut être fait. La première chose à faire est d'obtenir réellement le visuel. Accédez à AppSource et saisissez HTML CSS Viewer.

Ce sera un visuel payant, et pour l'instant, vous pouvez obtenir une licence d'essai gratuite sur leur site Web jusqu'à fin septembre 2022. Vous avez quelques mois pour le tester gratuitement.

Une fois que nous l'avons chargé dans LuckyTemplates, nous pouvons le voir à partir du volet visuels. Nous pouvons l'épingler en tant que visuel permanent si nous l'utilisons fréquemment.

Modification des propriétés de la police avec un visuel personnalisé dans LuckyTemplates

Si nous regardons la zone de texte, nous utilisons ici deux mesures principales : une mesure HTML et une mesure CSS. HTML fournit la structure générale de la page Web tandis que le CSS fournit le formatage.

Ce que nous avons ici est une balise HTML, puis l' ID=container est un rappel au CSS. Le corps de fond principal de ceci est juste le titre dans la zone de texte.

Et puis si on passe au CSS, c'est là que les choses se compliquent un peu.

La structure générale que j'utilise est Style 1 en tant que variable, puis Style 2 en tant que variable.

Ceci est suivi d'une simple instruction if qui dit "si le total des ventes est supérieur à 40 millions, il utilise le style deux ; sinon, il utilise le style 1. Le seul gros travail qui soit fait est de définir ces deux styles.

Utilisation de l'application personnalisée de différentes manières

L'application est également livrée avec un rapport très détaillé qui vous montre les nombreuses choses que vous pouvez faire avec ce visuel.

Comme je l'ai mentionné plus tôt, voici les cartes KPI que vous pouvez faire.

Vous avez également la possibilité de créer des tableaux détaillés lors de l'utilisation de ce visuel.

Vous pouvez également créer un visuel à dominante textuelle.

Sur l'option de page de destination, vous pouvez également utiliser un défileur de texte avec des options de police et d'arrière-plan.

Si nous parcourons la majeure partie du code CSS Changer le texte, c'est très intuitif. Nous pouvons apporter des modifications au poids de la police, à la taille de la police et à la couleur de la police.

Nous pouvons le copier dans le modèle, puis l'utiliser comme base pour la deuxième mesure. Si nous revenons dans notre fichier, nous avons le CSS du titre de la carte, qui contrôle le formatage.

Nous avons collé le code que nous avons copié afin d'avoir la couleur bleue et le poids de police le plus léger pour le style 1. Ensuite, la même police dans le style 2 avec une couleur rouge et le poids de police le plus lourd pour créer l'effet gras.

Nous mettons cela à travers l'instruction IF et en fonction de la valeur de la mesure, il choisira le style. Nous allons simplement prendre ces deux mesures, puis déposer le HTML et le CSS dans ces emplacements.

Avec cette technique, vous aurez la possibilité de formater facilement les attributs de texte enrichi en utilisant HTML et CSS.

Ajout d'animations et de GIF à votre rapport

Outre la possibilité d'utiliser des polices personnalisées, nous avons également la possibilité d'utiliser des animations et des GIF. Je suis venu avec une mesure simple où j'ai utilisé un code HTML pour le titre personnalisé.

Et puis j'ai utilisé ce fichier CSS pour créer trois styles avec différentes polices personnalisées.

Ce ne sont que des polices de type vrai ou des polices de type ouvert que j'ai téléchargées gratuitement. Le style est la valeur par défaut, ce qui signifie que rien n'a été sélectionné dans le slicer.

En plus de cela, j'ai une mesure GIF. J'ai incorporé trois fichiers GIF que j'ai téléchargés sur le site imgbb , puis j'ai utilisé les URL directes et je les ai insérées dans la balise HTML en utilisant le format de l'exemple de rapport pour le visuel HTML CSS.

Ensuite, j'ai utilisé une simple mesure SWITCH TRUE pour choisir le bon GIF. Si rien n'est sélectionné, il sélectionne simplement un blanc.

Voici à quoi cela ressemble avec le blanc et sans rien sélectionner dans le slicer.

Et puis si on fait une sélection dans le slicer, c'est ce qu'on voit.

En utilisant ce visuel personnalisé, nous pouvons maintenant sélectionner des polices personnalisées. Nous pouvons également ajouter des GIF, puis rendre ces GIF conditionnels aux sélections de trancheuses et aux mesures DAX. Ceux-ci changeront dynamiquement en fonction du choix dans votre slicer.

Il y a cependant une limitation importante. Lorsque vous le publiez sur le service, la police doit être installée sur la machine locale pour que l'utilisateur puisse la voir.

Si la police est installée sur la machine locale, elle s'affichera correctement via la visionneuse HTML lorsque vous la publierez dans le service LuckyTemplates. Si la police n'est pas chargée sur la machine locale, elle reviendra à la famille de polices par défaut.

Ticker KPI dans un rapport LuckyTemplates
Créer un visuel personnalisé pour LuckyTemplates à l'aide
des icônes personnalisées Deneb LuckyTemplates | Technique de visualisation PBI

Conclusion

La visionneuse HTML et CSS de K Team Solutions est un excellent visuel personnalisé dans LuckyTemplates et offre un moyen personnalisable et intéressant de modifier les visuels de vos rapports. Je vous encourage vraiment à télécharger cette application et à jouer avec.

N'oubliez pas non plus de vous abonner à la chaîne de télévision LuckyTemplates. Nous avons une énorme quantité de contenu qui sort tout le temps de moi-même et d'une gamme de créateurs de contenu, tous dédiés à l'amélioration de la façon dont vous utilisez LuckyTemplates et Power Platform.

Enfin, consultez le site Web de LuckyTemplates pour plus de ressources et pour en savoir plus auxquelles vous pouvez accéder très facilement.