How to show selected filters using User Defined Functions (UDF) and HTML in a cool way?
- aleksvp
- Nov 12
- 2 min read
In a situation where the slicers, of a Power BI report, need to be shown only as needed, it is very useful to display somewhere which slicers are applied. This post is about that: a cool and practical way of doing it using UDF.
First, you need to install an aditional visual in your report: HTML Content (lite). It is a verified free visual.
The next step is to create two UDF functions. You can do that in the TMDL view on you Power BI Deskop. The two functions combined create the HTML code that will display the selected values of the slicers.
createOrReplace
function HtmlBodySelectedSlicers = (filters) => "<body><div class='slicers-title'>Applied slicers</div><div class='slicer-container'>" & filters & "</div></body>"
createOrReplace
function SelectedSlicerHtml = ```
(_filtered, _text, _label) =>
IF (_filtered, "<span class='filter-label'>"& _label&
"</span><button class='filter-button active'>"
& _text&
"</button>", BLANK())
```So, the first function receives the slicer values and assembles the HTML page. The second one prepares each slicer's values, formatting them with HTML and CSS code.
Now you will need the CSS code used in the functions. I created it as a measure. It is standard code, and this is where you need to make changes to apply your desired design.
createOrReplace
ref table 'Formating measures'
measure 'CSS Selected Filters' =
"
<style>
.filters-titulo {
display: inline-block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 8pt;
font-weight: 600;
color: #666666;
margin-right: 15px;
margin-bottom: 5px;
}
.filters-container {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 5px 10px;
border-radius: 5px;
background-color: #F6F6F6;
color: #212529;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 8pt;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
margin-right: 15px;
}
.filters-label{
font-weight: 500;
}
.filters-button{
appearance: none;
border: none;
cursor: pointer;
text-align: center;
padding: 6px 14px;
border-radius: 5px;
font-size: 8px;
font-weight: 600;
background-color: transparent;
color: #6c757d;
}
.filters-button.active {
background-color: #ffffff;
color: #007bff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(0, 123, 255, 0.2);
transition: all 0.2s ease-in-out;
}
</style>"The last step is a measure to get the selected values from each slicer. This measure is what you will put in the Values field of the HTML Content (lite) visual. Inside it, you will use the UDF functions.
createOrReplace
ref table 'Measures'
measure 'Selected measures' = ```
--for each slicer you need to create a expression like this
VAR _profissionais =
SelectedSlicerHtml (
ISFILTERED('Remuneracao'[tp_categoria]),
CONCATENATEX(VALUES('Remuneracao'[tp_categoria]), 'Remuneracao'[tp_categoria], ", "),
"Categoria"
)
--second slicer
VAR _uf =
SelectedSlicerHtml (
ISFILTERED('Remuneracao'[sig_uf]),
CONCATENATEX(VALUES('Remuneracao'[sig_uf]),
'Remuneracao'[sig_uf], ", "),
"UF"
)
--now you join all the expressions
var _filters = _profissionais & _uf
return IF (ISBLANK(_filters ), "",[CSS Selected Filters] & HtmlBodySelectedSlicers (_filters ))
```Simple, right?
Comments