Hoe je Power BI-rapporten kunt "blurren" (en waarom je dat eens zou moeten proberen)
Rapporten zijn pas waardevol als ze ook echt gebruikt worden
Je kunt uren spenderen aan het verfijnen van een Power BI-rapport, maar als niemand het effectief gebruikt, is dat zonde van de moeite. Een goed rapport ziet er niet alleen mooi uit, het helpt mensen ook het verhaal achter de data te begrijpen en erdoor te navigeren.
Soms heb je een klein duwtje nodig om de aandacht van je gebruikers te sturen. Een eenvoudige manier om dat te doen, is door een overlay toe te voegen die bepaalde delen van het rapport uitlegt of in de verf zet. Maar wat als we dat nog effectiever kunnen maken door de achtergrond te vervagen, zodat de focus écht op de juiste plek ligt?
Dat is exact wat we hier gaan doen.
Het idee: een blur-effect in Power BI
Je hebt het vast al eens gezien op websites: wanneer een menu of pop-up verschijnt, wordt de achtergrond wazig. Dat zorgt ervoor dat de gebruiker zich beter kan concentreren op wat er op de voorgrond gebeurt.
En het leuke is: Power BI is eigenlijk gebouwd op dezelfde webtechnologie als moderne websites. Dat betekent dat we met een beetje HTML en CSS datzelfde blur-effect ook in Power BI kunnen gebruiken.
(Als je ooit nog websites hebt gebouwd in FrontPage of Dreamweaver, dan krijg je hier misschien een vleugje nostalgie.)
Stap 1: gebruik de HTML Content visual
Om dit te bouwen gebruiken we de HTML Content (Lite) visual van Daniel Marsh-Patrick. Die laat je toe om webcode, zoals HTML of CSS, toe te voegen binnen je rapport.
Je vindt de visual in de Power BI Marketplace. Kies de “Lite”-versie omdat die gecertificeerd is en dus veilig te gebruiken binnen de meeste omgevingen.
Stap 2: voeg de blur toe
Nu voegen we een klein stukje HTML toe. Je kunt dit zelf schrijven, of gewoon deze prompt gebruiken in ge favoriete AI tool zoals ChatGPT of Microsoft Copilot:
Write html code to render a div element that takes up 100% of the available space both horizontally and vertically and that blurs all the underlying elements. Return the html for a single div. Add all the CSS inline. I want to use it in Power Bi html visual.Het resultaat ziet er zo uit:
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 9999;"></div>Voeg deze code toe aan een measure. Vergeet niet de dubbele aanhalingstekens te escapen door ze te verdubbelen.
Je kunt de sterkte van de blur aanpassen door de waarde in blur(10px) te verhogen of te verlagen.
Stap 3: configureer de visual
Voeg de HTML Content (Lite) visual toe aan je rapport.
Sleep je measure in de visual.
Ga naar Visual settings > General > Effects en zet de achtergrond en rand uit.
Ga naar General > Properties > Padding en zet alle waardes op 0px.
Positioneer de visual zodat die het volledige rapport bedekt. Je zou nu het blur-effect moeten zien.
Stap 4: maak het interactief
Het is natuurlijk niet de bedoeling dat je rapport permanent wazig blijft. Je wil dat het effect enkel verschijnt wanneer de gebruiker bijvoorbeeld op een info-icoon klikt.
Zo doe je dat:
Maak twee bookmarks aan: één voor de Default-staat en één voor de Blur-staat.
Groepeer in het Selection pane je elementen en de HTML blur visual, zodat je ze samen kunt tonen of verbergen.
Voeg twee knoppen toe met info-iconen. De eerste activeert de Blur-bookmark, de tweede gaat terug naar Default.
Klik op de knop en bekijk het resultaat.
Power BI biedt veel ruimte voor creativiteit. Zodra je doorhebt dat het eigenlijk op webtechnologie draait, opent dat een hele reeks nieuwe mogelijkheden om je rapporten te verbeteren. Of het nu gaat over dit 'blur' effect of het gebruik van SVG's en andere HTML elementen.
Met een klein stukje HTML en wat experimenteren kun je je rapporten interactiever, gebruiksvriendelijker en visueel sterker maken.
Een blur-effect lijkt misschien maar een klein detail, maar het kan een groot verschil maken in hoe vlot gebruikers door je rapport navigeren. We zijn benieuwd om te zien hoe jij de grenzen van Power Bi kan verleggen met deze technieken.
