00:00:00
Most people don't realize how much
00:00:02
better the new card visual in PowerBI
00:00:04
just got with the March 25 release
00:00:06
because now we can build applications
00:00:08
like this where we show the key
00:00:10
information for different items,
00:00:12
different employees, regions or products
00:00:14
and we can nicely search for it and the
00:00:17
big change is that we can show either
00:00:19
different formatting or different images
00:00:22
for each card and that was not possible
00:00:24
before and that is crucial to set up an
00:00:27
application like this. So let's go over
00:00:29
all of the steps to make this happen. So
00:00:32
we are going to build this example over
00:00:34
here where we show the key information
00:00:36
for different employees with some easy
00:00:38
search functionality there at the top
00:00:41
where we have some slicers, drop-own
00:00:43
slices for the office and position. And
00:00:45
here I use a text search slicer which is
00:00:48
also a newer slicer type where I can for
00:00:51
example type in an employee name like
00:00:53
Eric and maybe I also want to see the
00:00:56
key information for Allison and the
00:00:59
cards for these employees nicely pop up.
00:01:01
Now let's go over all of the steps but
00:01:02
you need to make sure that you're on the
00:01:04
March 25 version of PowerBI or later.
00:01:07
Now here is a starting point. I've
00:01:08
already set up the slicers because what
00:01:10
we are focusing on is the new card
00:01:13
visual. So let's insert one and let's
00:01:15
position it nicely underneath it. And
00:01:17
here I want to create a breakdown. So I
00:01:20
have different categories for each
00:01:22
employee. So I'm going to look for the
00:01:24
employee name or ID. Right now here I
00:01:26
have name and surname. Let's go for
00:01:28
that. And here for the data I'm just
00:01:29
going to pick the same field. So also
00:01:31
just the name. Now let's get to the
00:01:32
point straight away. What is the big
00:01:34
change in this March 25 version that is
00:01:37
so special? Well, it all has to do with
00:01:40
recognizing the filter context of the
00:01:43
item that we are looking at. So that we
00:01:46
can use conditional formatting to for
00:01:48
example apply a different color there
00:01:50
for Allison versus Claire or show a
00:01:53
different image here for Allison than
00:01:55
for Clare. And that was not properly
00:01:58
working in previous versions. Now let me
00:02:00
show you with a simple example. I'm
00:02:02
going to go over here to the data pane.
00:02:05
And here you see I have a conditional
00:02:07
formatting measure which just checks oh
00:02:10
what name do we have in the filter
00:02:12
context. Now if it's Allison Hill then
00:02:15
we turn light blue otherwise light gray.
00:02:16
Now that measure I want to use to set
00:02:18
the color of the headers. So let's go
00:02:21
here to formatting and then small
00:02:23
multiples headers and then here we have
00:02:26
the background. Okay. Now let's turn it
00:02:28
on. And you see here we can choose a
00:02:31
background color like pink. All right.
00:02:34
Now I want to set this dynamically using
00:02:37
conditional formatting. So I click here
00:02:39
on the FX button and then field value.
00:02:42
And now I'm going to search for that
00:02:45
measure CF test. All right. Now let's
00:02:48
click on okay. And see here we have
00:02:51
light blue for Allison and then light
00:02:52
gray for all of the other employees. Now
00:02:55
that was not possible before. And the
00:02:57
same thing we can do for images. So if I
00:03:00
go back to the formatting options of our
00:03:02
visual then images then here we can turn
00:03:05
the image on and then click here on
00:03:07
image type image URL and here either use
00:03:11
a similar measure as before but then I'm
00:03:14
returning the correct image URL links or
00:03:18
you can also just pick a column where
00:03:20
you have the links to the images which I
00:03:23
do. So I can just search for image. Now
00:03:26
here we have a column image link and it
00:03:28
will always take the first one and for
00:03:30
example here we just have one row so and
00:03:32
we get the correct image popping up. Now
00:03:34
just to make sure that you get what I'm
00:03:36
saying with these image URLs let's go
00:03:38
here to table view and let me scroll to
00:03:40
the right now you see over here I have
00:03:43
all different links to images for each
00:03:46
employee. That's it. And these need to
00:03:48
be publicly accessible links. Okay. Now,
00:03:51
let's go back here to the formatting
00:03:53
options because I don't want my images
00:03:55
to show that big. So, I'm going to make
00:03:57
them a little bit smaller. Let's put the
00:03:59
size to 100 pixels. That's already
00:04:01
better. And I want to have these
00:04:03
pictures on the left hand side of the
00:04:05
names. Okay. So, I'm going to go to
00:04:08
position left of text. There you go. And
00:04:11
I'm going to increase the space between
00:04:13
the image and the text. So, the name
00:04:16
that you see on the right hand side. So,
00:04:18
let's put this to 30 pixels. Now then
00:04:20
let's go here to call out values and
00:04:22
let's make these callout values a little
00:04:24
bit smaller. So the names a bit smaller
00:04:26
and let's go for different fonts like
00:04:29
sui. Okay. Now then here for the labels
00:04:33
there we could show the position right
00:04:35
so the position of each employee. Now to
00:04:37
do that we first of all have to select
00:04:39
series then we go here to text and also
00:04:42
there we have an fx button. So let's
00:04:44
click on it. And now I want to have the
00:04:47
position. So let's search for position.
00:04:51
There you go. And now I get Amazon sales
00:04:54
specialist for every employee. And that
00:04:57
is exactly the problem that we had
00:04:59
before with the conditional formatting
00:05:01
and with the images. The thing is well
00:05:04
here for the labels. It seems that it's
00:05:07
not fixed just yet. Well, again, it's a
00:05:09
it's a preview option. So hopefully with
00:05:11
the next update, they also fix the
00:05:13
labels. Okay. So therefore, we cannot
00:05:15
rely on the labels just yet. So, I'm
00:05:17
just going to turn that off. And instead
00:05:19
of that, we can add extra information
00:05:21
using the reference labels, which is
00:05:23
also nice. Okay, but before we going to
00:05:25
do that, let's clean it up because now
00:05:27
we have Allison Hill here for the
00:05:29
headers as well as over here on the
00:05:32
other side of the picture. So, the
00:05:33
headers we don't really need. Now, if we
00:05:35
go here, then you see they have added
00:05:38
more options, which is actually kind of
00:05:40
nice, right? So, we can put the headers
00:05:42
also on the right hand side, at the top,
00:05:44
at the bottom, etc. So all extra
00:05:46
features, but there's no feature to just
00:05:49
turn the headers off, which probably
00:05:51
would also have been nice. So even if we
00:05:53
turn off the background and the title,
00:05:56
etc., they're still there. Okay. So what
00:05:58
I would do is put them on the left. Then
00:06:00
just rotate the text so that it doesn't
00:06:03
take that much space. And then we can
00:06:05
just make it transparent. So here the
00:06:07
title transparency to 100%. All right.
00:06:11
And then let's also turn the borders
00:06:13
off, which we can do here under small
00:06:15
multiples layout. And then here we have
00:06:17
grid lines and borders. All that stuff
00:06:19
we turn off. And I would want to switch
00:06:23
the style from table to cards. Just
00:06:26
looks a little bit nicer. Now that
00:06:28
actually looks already pretty good. It's
00:06:30
just we need some extra information
00:06:32
about these employees. And maybe we also
00:06:34
don't need that background. Let's turn
00:06:37
that off. All right. And for now I'm
00:06:39
just going to make it a little bit
00:06:41
smaller. And then later on we can add
00:06:43
more employees to the right hand side of
00:06:45
it. Okay. Now to get that extra
00:06:47
information in we can use reference
00:06:49
labels. Now reference labels you find
00:06:52
over here under reference labels. Then
00:06:55
select the series. We only have one
00:06:57
series with the name. And to that series
00:07:00
you add reference labels. Okay. Now what
00:07:03
do you want to show the information of?
00:07:05
Maybe the position. Right. So, let's
00:07:08
search for position. And you see that
00:07:10
information nicely popped up at the
00:07:12
bottom of each card. Now, of course, we
00:07:14
have to play around with the formatting
00:07:15
a bit more, but let's add more. Let's
00:07:17
also add the office. So, here we have
00:07:20
office. And then I also want to have,
00:07:23
let's say, the email address. So, let's
00:07:25
search for that one. And last but not
00:07:28
least, let's add the phone number. So,
00:07:30
there you go. Now, it doesn't perfectly
00:07:33
fit. So, let's maybe make our lives a
00:07:36
little bit easier. Let's go here to
00:07:38
small multiples layout and then I want
00:07:40
to have a single column and I'm just
00:07:42
going to show two cards for the time
00:07:44
being. All right. So now we have that
00:07:46
extra information nicely visible. Now
00:07:48
let's go back over here to the reference
00:07:50
labels because well I don't like it that
00:07:52
it says first position, first office. So
00:07:55
one option that we have is to just turn
00:07:57
the titles off for all of the labels of
00:08:00
that series. All right. So if I turn it
00:08:03
off, you see already looks much cleaner.
00:08:06
Okay. Now, maybe later on we can bring
00:08:08
it back so that we can put, for example,
00:08:10
little icons right in front of it. All
00:08:12
right. Now, for now, I just leave it as
00:08:14
it is. And then I also want to turn off
00:08:17
the background color. It's not really
00:08:19
necessary. Here we have the divider
00:08:20
line. Well, we can keep it. And for
00:08:22
example, go for a lighter color. And
00:08:24
then over here, maybe we turn off ignore
00:08:27
the padding. All right. And then here
00:08:29
for that extra information, let's go to
00:08:32
value. And then instead of black, it
00:08:34
would go a little bit lighter. Yeah. So
00:08:36
maybe a light gray. All right, I'm kind
00:08:38
of happy how this starts to look, but I
00:08:39
want to emphasize the position a little
00:08:42
bit more. So I'm going to go over here
00:08:43
and select the first position label.
00:08:47
Then go over here to value and maybe
00:08:50
let's go for sigui UI semi ball so that
00:08:53
it stands out just a bit more. All
00:08:55
right, now that looks pretty good, but
00:08:57
let's make some further changes. Let's
00:08:58
go here to guards and then here I would
00:09:01
like to first of all add a little bit of
00:09:03
extra padding. So, custom. And let's go
00:09:06
for 20 pixels of padding on each side.
00:09:11
And what I also like is if this shape
00:09:13
has rounded corners. So, I'm going to go
00:09:15
here to round rectangles. And let's make
00:09:18
it 10 pixel. All right. And over here
00:09:21
for the border, a little bit too dark.
00:09:23
I'm going to go a little bit lighter.
00:09:25
For example, that light gray color looks
00:09:28
good. All right. Now the next thing that
00:09:30
I would would like to do is to line it
00:09:32
up here on the left hand side and then
00:09:34
let's go back over here to the small
00:09:37
multiples layout and here I want to
00:09:39
change the grid. So instead of single
00:09:42
column let's go for grid. Then I want to
00:09:44
have max number of rows two max number
00:09:46
of columns three and then we can stretch
00:09:49
it all the way to the right. So that's
00:09:51
nicely lined up over there on the right.
00:09:54
You see by default it's paginated. So
00:09:57
over here you get that arrow up and down
00:10:00
or left to right. You can change that
00:10:02
from the overflow and here we can also
00:10:04
go for continuous scroll. Now uh if you
00:10:07
go for pageionated the problem is you
00:10:09
don't see on which page you are and so
00:10:11
you don't know if there are still 3 4 5
00:10:13
6 100 pages to go right. So that's a big
00:10:16
downside. So it would be nice to have
00:10:18
that feature also added here so that you
00:10:21
know which page you are if you go for
00:10:23
pageionated. So therefore I don't really
00:10:25
like it at the moment. So therefore I'm
00:10:27
switching to continuous scroll. All
00:10:30
right. And another thing to watch out
00:10:32
for is that if you would now change for
00:10:36
example to a certain position. So let's
00:10:38
say Amazon sales specialist. Let's pick
00:10:41
a few like this. Now if I pick a few,
00:10:45
you see the cards resize. And maybe this
00:10:47
is not what you want. Can be nice, but
00:10:50
maybe it's nicer if they just keep the
00:10:52
same size. So if you want to keep the
00:10:55
size, what you need to do is go over
00:10:57
here to small multiples layout and then
00:11:00
fix the number of tiles and turn that on
00:11:02
so that if you change the search filter.
00:11:05
Now you see that the cards don't change
00:11:07
their size. All right, good. Now let's
00:11:10
undo that filter. Now the next thing
00:11:11
that we can play around with is also the
00:11:13
spacing, right? So over here under small
00:11:16
multiples, go to layout. Here we have
00:11:19
customize spacing. Turn it on. And here
00:11:22
we can for example increase the spacing
00:11:24
between the rows. Okay, just like this.
00:11:27
And space between the columns. Well,
00:11:29
maybe I want to have zero. All right.
00:11:32
Now, probably have to shift over here
00:11:35
this a little bit to the left and to the
00:11:37
right so that it's nicely aligned. All
00:11:39
right. Now, I like how this looks, but
00:11:41
maybe you want to go even one step
00:11:43
further by adding little icons there for
00:11:45
the office, the email, and the phone
00:11:47
number. Now, this is possible. You just
00:11:49
have to use under reference labels the
00:11:53
title. Now let's turn the title on. But
00:11:56
you have to be a little bit careful what
00:11:57
is selected. So series first name and
00:12:00
surname is selected. And here we have
00:12:02
label first position. Now for that one I
00:12:05
actually do not want to add an icon. So
00:12:08
I'm going to skip over that one. And
00:12:10
let's maybe start with easy one like the
00:12:13
email. All right. So there's the email.
00:12:15
And then here we can turn the diet on.
00:12:17
switch to custom and here we can write
00:12:20
whatever we want. All right. So I can
00:12:22
just say email colon and then followed
00:12:25
by the email. Now this is not what I
00:12:28
have in mind. So I don't think this is
00:12:30
better. Instead of that we're going to
00:12:31
go for icon and this needs to be uniar
00:12:33
icon. And you can search for one or you
00:12:35
can use the windows key dot and then
00:12:38
search for email or mail and then you
00:12:41
get different mail icons. So I could
00:12:43
pick this one. All right. You see it
00:12:45
nicely pops up right there in front of
00:12:48
the email. All right. Now, we can also
00:12:50
add some extra spaces, but the spaces
00:12:52
get deleted. So, that means you have to
00:12:55
use some other empty character. So, you
00:12:57
can go to empty character.com and just
00:12:59
copy an empty character from there that
00:13:01
does not get deleted but looks like a
00:13:03
space. So, you simply copy it from the
00:13:05
website, go back to PowerBI, and then
00:13:07
here we can add some empty spaces right
00:13:10
after a icon. So with Ctrl +V, let me
00:13:14
put in some extra spaces. And you see we
00:13:16
are creating some extra space there
00:13:18
between the icon and the email address.
00:13:21
All right. Now also we can use that same
00:13:24
trick to indent everything from the left
00:13:27
hand side. So if you think actually want
00:13:28
to have this in the middle, well there's
00:13:30
alignment to the middle. However,
00:13:33
there's nothing that says okay left
00:13:35
align and then just increase the padding
00:13:38
here for the reference label labels from
00:13:40
the left. So therefore this gives you
00:13:43
that flexibility right and we can use
00:13:44
that. So if I go here to let's say the
00:13:48
first uh not first position but first
00:13:50
office and then turn the title on here
00:13:53
as well. Switch to custom and then
00:13:56
change the text to just empty
00:13:58
characters. Let's just put in about 10
00:14:00
of these characters and you see now we
00:14:02
have indented the city to the right. Now
00:14:05
we can do the same also here for the
00:14:07
others. look for nice icons and make it
00:14:09
look like this. And tada. That looks
00:14:12
pretty good if you ask me. And it's
00:14:14
really nice to use in combination with
00:14:16
slices. So over here I have a text
00:14:17
slicer. I can just search for Emmy and
00:14:20
then Emily Bane pops up. All right. And
00:14:23
also here you can uh turn in the
00:14:26
formatting multi- search on right so
00:14:29
that you can for example also look for
00:14:32
Arie. Well then Eric pops up. And this
00:14:35
idea is very applicable also to other
00:14:37
sectors and other departments besides
00:14:39
HR. And to build it is very similar,
00:14:42
right? So if you want to show key
00:14:43
information for different projects or
00:14:45
different products or different cities,
00:14:47
you can set it up in a similar way. Now
00:14:49
let me know your thoughts in the comment
00:14:51
section below. If you like this video
00:14:53
and you want to maybe dive a little bit
00:14:55
deeper into cards or different design
00:14:58
tips and tricks in PowerBI, then check
00:15:00
out these videos over here. If you want
00:15:01
to build reports with me from beginning
00:15:03
to the end and learn all of my PowerBI
00:15:07
tips and tricks and how I develop my
00:15:09
reports with everything that you need to
00:15:11
know to make your PowerBI projects a
00:15:14
success, then check out my design
00:15:15
transformation program over here. If you
00:15:18
are newer to PowerBI and you just want
00:15:20
to improve your general PowerBI skills,
00:15:22
then check out my other training, the
00:15:25
PL300 certification course for PowerBI.
00:15:28
I bet that you get a lot of value from
00:15:30
it. Thank you for watching and see you
00:15:32
in the next