19. Bookmarks, Selection Pane, Buttons and Navigation
19.6 Pattern 3: Show/Hide Filter Panel
Start with a problem
The page has five slicers taking a third of the screen. Shraddha wants a Filters button that slides a panel in and out.
Explain simply
Group the panel background and its slicers. Two bookmarks: Panel open (group visible) and Panel closed (group hidden), both with Data off and Selected visuals = the group.
Show the data
| Bookmark | Panel group | Data | Selected visuals |
|---|---|---|---|
| Panel open | Visible | Off | Group only |
| Panel closed | Hidden | Off | Group only |
About this data: This table uses columns: Bookmark, Panel group, Data, Selected visuals. This table uses columns: Step, Card. This table uses columns: Wrong result, Reason, Correction. Values shown are the lesson examples already on this page (not a new dataset).
Fictional sample data. Practice file: visuals_orders_apr_may_2026.csv (source: src/practice/).
Demonstrate
- Insert a rectangle and place City and Platform slicers on it.
- Selection pane › select shape + slicers › Group › rename Filter panel.
- Show the group › select it › Add bookmark Panel open (Data off, Selected visuals).
- Hide the group › Add bookmark Panel closed (same options).
- Add a funnel-icon button → Panel open, and a close (X) button inside the panel → Panel closed.
- Test: choose Pune in the panel, close it – the card stays ₹850.
Show the result
Your result should look like this (fictional sample):
| Step | Card |
|---|---|
| Panel open, choose Pune | ₹850 |
| Close panel | ₹850 (filter kept) |
Explain what happened
The bookmarks change visibility only; the slicer selection is data and is not touched.
Explore further
- Sync slicers (22.9) to carry the selection to other pages.
Detailed reference for this lesson:
A popular design: slicers live in a panel that slides in when the user clicks a filter icon.
Steps in Power BI
- Insert a rectangle (Insert › Shapes › Rectangle) on the left, white with a shadow. Rename it Panel_Bg.
- Put slicers on it: Platform, City, Category, Date. Add a close button (Insert › Buttons › Blank with an ✕ icon) Btn_Close.
- Select the rectangle, slicers and close button › Ctrl + G to group them › rename the group Panel_Filters.
- Add a filter icon button Btn_Open (Insert › Buttons › Blank › Icon: Filter or an image).
- Selection pane: show Panel_Filters › Add bookmark Panel – Open. Hide Panel_Filters › Add bookmark Panel – Closed.
- For both bookmarks: untick Data, choose Selected visuals (select the group before Update).
- Btn_Open action, then Bookmark Panel – Open; Btn_Close action, then Bookmark Panel – Closed.
- Leave the page with the panel hidden. Slicers still filter the page even when hidden.
Ravindra Bagale's Tip
Friends, remember: the show/hide filter panel often breaks because the panel's shapes and slicers aren't grouped, so some items stay visible. Group all panel objects in the Selection pane and hide or show the group in the bookmark. Remember this rule.
Ravindra Bagale's Tip – मराठी
मित्रांनो, लक्षात ठेवा: show/hide filter panel बऱ्याचदा बिघडतो कारण panel चे shapes आणि slicers group केलेले नसतात, त्यामुळे काही items दिसतच राहतात. Selection pane मध्ये panel चे सगळे objects group करा आणि bookmark मध्ये तो group hide किंवा show करा. हा नियम लक्षात ठेवा.
Ravindra Bagale's Tip – हिंदी
दोस्तों, याद रखो: show/hide filter panel अक्सर बिगड़ जाता है क्योंकि panel के shapes और slicers group नहीं होते, जिससे कुछ items दिखते रहते हैं. Selection pane में panel के सभी objects को group करो और bookmark में उस group को hide या show करो. यह नियम याद रखो.
Fix common mistakes
| Wrong result | Reason | Correction |
|---|---|---|
| Some slicers stay visible | Not in the group | Group all panel items |
| Closing resets filters | Data On | Data Off |
| Hidden slicer still filters | Expected | Show selected values in a text box so users know |
Practise independently
Practice task
Why must the close button be inside the group?
Hints
- What happens to it when the panel hides?
Solution
So it disappears with the panel; otherwise a floating X remains on the page.
Think like a professional
Collapsible filter panels make mobile and projector views cleaner. Show active filters somewhere visible.
Revision card