Instructor: Hey, everyone.
So Microsoft just announced their November, 2023 updates
for Power BI,
and there are some amazing new features in here.
We've got reference labels for card visuals,
some new AI capabilities with copilot,
a brand new DAX query view.
But the one that I'm most excited about
is the brand new button slicer.
And what this allows us to do is go
from these kind of basic,
frankly, pretty boring default slicers,
like the tile slicer you see here to create something
that's much more customizable,
much more modern and user friendly.
This is a perfect example of what we can do
with the new button slicer,
and I'm gonna show you
how to build something like this step by step.
Now, first things first, to make sure you have access
to this new feature, make sure you're running
the November, 2023 version of Power BI or later,
and head to your options and settings, preview features,
and make sure this button slicer option is enabled.
Now to create what we see here, I really just have one table
behind the scenes for this demo.
There's three columns.
There's instructor names for Maven Analytics,
instructor titles, and an image URL,
because at this point I don't believe there's any way
to upload actual image files for these slicers.
So for the sake of demo, we're gonna keep it simple,
this is the only table that we have here in our model.
Let's jump back to report view.
I'm gonna add a new page here,
and we're gonna build one of these things from scratch.
So let's go to insert drop down,
grab that new slicer option right here,
just kind of resize things a little bit,
and the field that we want to add.
Basically, what selections do we want users to make.
That'll be based on the instructor name.
And you can see by default it kind of creates
that grid tile style,
but there's much, much more customization
that we can do here.
So let's head to our format pane.
I'm gonna run through just some style
and polished decisions,
but we'll kind of run through these format options
top to bottom.
So nothing I really need to change for size and style here.
Don't really need a slicer title.
And let's go down to slicer settings.
This is where we can update our selection options.
You can show us select all option.
You can force at least one value to be selected.
In this case, single select is just fine for our purposes.
And now heading to shape, one of the new things
that I really love here is the customization
to go from a rectangle with hard edges,
to rounded rectangles, snip tabs.
You can even customize the edges
and modify each specific corner individually,
which is pretty cool.
In this case, I really just want to do something simple,
maybe like a 15 pixel rounded corner like so.
And now for layout, this is where we can change
the number of rows and columns.
I don't really like this grid view, it's not very readable.
So let's do something like six rows, one column,
and we can adjust the spacing
or the buffer between cards as well,
so maybe pop that down to three or four pixels.
That looks good. Now we also have new overflow options.
So in this case, not all of our instructors are visible.
That's why we get the default scroll bar,
that's the continuous scroll style.
We can change that to a new paginated option,
which adds a little arrow to page
from one set of selections to the next.
So that's looking pretty good for my overflow
and layout settings.
Let's move on to call out values.
These are the actual instructor names that we see here.
Now you'll notice that we can customize those values
for different button states,
default hover, press or selected.
We're gonna stick with default for now.
And then at the end, I'm gonna show you
how we can do some customization
to add that really cool hover and selection effect.
So for these, let's go ahead and use Seago UI,
size 12 looks good.
Do bold, kind of a medium dark gray.
You can also customize transparency, alignment,
display units, and blank values.
But that should do the trick for values.
Now, labels, these are text labels that will appear
underneath or above your values,
and I do wanna activate those.
And the field that we're gonna use for our labels
are the instructor titles.
So see how that just drops them right under our names?
And by default, that's looking pretty good.
Let's just make some small modifications here.
Maybe we switch to a lighter fonts, size eight,
and kind of medium gray looks good.
And you can change the position
to above or below your values.
Can also adjust the vertical spacing.
Just another example of the fine tuning
that we're able to do to really customize these visuals,
which is fantastic.
So labels are looking good.
Here's where things get really fun
with this new image option.
So again, we're gonna go back to our default state here,
and the image field,
this is our image URL column from our table.
And you can see that by default it selects a fill image fit,
which looks a little bit silly here.
You can see the fit option
is also kind of squished up at the top,
we're gonna use the normal image fit,
and that's gonna preserve the aspect ratio of the image
and just drop it right here at the top of each button.
And what I can do here is update that position
from the top to the left,
and I'm gonna change the image area size
and drop that down a bit to something like 20%.
And I can add some space or breathing room
between those headshots, those images,
and the instructor names and titles.
So let's bump that up to about 10 pixels.
And we don't want to ignore the padding settings
that we select for each card.
So that looks great for my images.
I'm really happy with this.
And as I scroll over, you can kind of see that Power BI
enables these hover effects
and these selection effects by default,
the black fill, the white font, the light gray hover style.
And I actually like that. That looks pretty good.
All of these things are customizable though.
Now final thing that I wanna adjust here
are the button options at the end.
You can activate or deactivate things like borders, fills,
shadow glow or accent bars.
I'll show you what each of these look like.
In this case, I don't really need borders
because I've got that nice hover and selection effect.
The fill options actually look pretty good by default.
And then you can see what things like shadow
or glow or accent bars would look like.
Pretty cool.
But I think for this case, I kind of want to keep it nice
and clean and minimal and really just use
that fill effect on my buttons.
So I could call it a day right there.
I'm pretty happy with how this looks.
I really like the selection effects.
The hovers look really nice,
but one thing that I'd really love to do
is customize these images based on different states.
So check out what I'm gonna do here.
I'm gonna jump back to my image settings.
And for default state, I actually want
to pull the saturation all the way down to turn
that into a black and white image.
And now what we can do is say, once a user hovers over this,
let's pull that back up to full saturation,
and same with press and selected.
And now once we do that,
you've got that default gray scale headshot,
but then when you hover, it pops into full color
and same when you select.
So really nice, very simple adjustment that in my opinion,
goes a long way from a design standpoint.
So there you have it.
That's your quick demo
of the brand new Power BI button slicer.
This is an area that I've always felt like Power BI
was kind of lacking a bit from a visualization standpoint.
So I'm really, really excited to see them investing
in taking these slicer designs to the next level.