Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

ibarrau
Super User
‎07-24-2023 04:26 PM

[PowerBi][UI] Animated Cards with HTML y CSS

Like any programming language, the possibilities are endless, and we could do many things that we see on websites. However, we will stick to a simple trick that does not require extensive and intense knowledge of the languages. We just need to know that HTML is a language used on websites and is based on tags. On the other hand, we have CSS generating the aesthetics and style of those tags.

Sounds like a lot of work, right? Will we write a lot of code? No, of course not. Thanks to the internet and its interactions, we can now reuse a lot of CSS code already exposed in internet repositories by simply calling a method and importing it.

The first step will be to load a custom visual that allows us to write HTML code. In this case, I chose one of the oldest and free ones.

ibarrau_0-1690304916128.png

 

The way these types of visualizations work is by writing the code in a measure's text. So, let's add the visualization and enter a measure with the following text:

ibarrau_2-1690240415308.png

With this, we can see that the visualization interprets the "h2" tags of HTML. We will apply the same logic to the cards. We must pay attention to a detail when using data from our model. The visualization renders text. This means that a "SUM()" will produce an error. To include it in the text, we need to convert it with FORMAT. This function converts its content to text. The code should look something like this:

 

 

 

"<h2>" & FORMAT ( SUM ('InternetSales'[Unit Cost]), "#0.0") & "</h2>"

 

 

 

We can take advantage of the fact that FORMAT allows us to choose a formatting to display the number as we would like to represent it. This way, we could create a traditional card.

 

The Animated Magic

To achieve an animation of the card, we will import an existing CSS library. This means we will be writing more code. We will follow the example of the library https://animate.style/

The link itself explains that to use it, we must first add something to the code, and then we can include it in the "class" of our tag.

ibarrau_3-1690240534141.png

The class of the tag is a set of pre-written CSS code that will be read from the address we provided at the beginning. In this case, it calls an animation execution when loading the visualization. In Power BI, this loading will be repeated with each page interaction, which will give movement after selecting a filter. Let's see how this looks.

ibarrau_4-1690240626512.png

 

 

 

Sum Price =
"
<head>
 <link
  rel=""stylesheet"" 
  href=""https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css""/>
</head>
<br>
<h1 class=""animate__animated animate__bounce"" style=""text-align:center;"">" & FORMAT ( SUM ('InternetSales'[Unit Price]), "#0,0") & "</h1>
"

 

 

 

This measure contains a text that defines a code. First, the code loads the library as instructed by the page within the <head> tag. Second, we use <br> which creates a "enter" or breakline to center the number a bit more. Finally, we use the <h1> title tag with our measure.

The difference with the previous <h1> tag is that this time we define a class attribute, also copied exactly from the website. The website shows different effects that we can use by simply replacing the word "bounce" with another one that we like. Before finishing the <h1> tag, we have a second style attribute that is used to define CSS code. In this case, I wrote it to center the text of the card.

In this way, we adjust the card and arrive at the following result:

animatedcssanimatedcss


That is the final result we would achieve. The code we executed will animate with each refresh we have on the visualization. In this case, we will see it the first time and then after clicking a filter or interacting with charts. If we want a different type of result, it's worth mentioning again that the possibilities with code are enormous. You just need to learn more about the language.

I hope this trick is useful for you to create interesting and simple animations like this one. If you enjoy the language, you can go infinitely learning more. As always, I leave this development on my GitHub.

And you, have you ever written something in HTML inside Power BI?

 

Original Source LaDataWeb

Labels:
Comments
‎08-12-2023 04:17 AM

Wonderful

0