Building a bookmarks block for your dashboard

Tips and Hacks
1

It’s been a while since my last tip, but this one’s worth the wait :wave:

This tip helps you add a simple bookmark feature to your Holistics dashboard to give your viewers one-click access to filtered views or important dashboard states, making navigation friendlier and more intuitive.

Outcome

Here’s what it looks like

:one: Step 1 - Create Bookmark Links

You can create a bookmark link in two ways:

Option A: Use the current dashboard URL after applying filters or interactions. Just copy the URL from your browser.

  • Example: https://testing4.holistics.io/dashboards/v4/100219-thong-s-test-dashboard?_fstate=5MsOj3eW

image
image2087×1496 170 KB

Option B: Manually construct a URL by appending filter parameters, using the format described in this documentation. Note that this method only supports passing filters via the URL.

  • Format: dashboard_url?<block_uname><operator><value>&<block_uname><operator><value>
  • Example: https://testing4.holistics.io/dashboards/v4/100219-thong-s-test-dashboard?f1=cancelled

:two: Step 2 - Add a Bookmarks Block to Your Dashboard

Use a simple Markdown Text Block to display your bookmarks.


### Bookmarks
- [Cancelled orders](https://testing4.holistics.io/dashboards/v4/100219-thong-s-test-dashboard?f1=cancelled)
- [Refunded orders](https://testing4.holistics.io/dashboards/v4/100219-thong-s-test-dashboard?f1=refunded)
- [Delivered orders](https://testing4.holistics.io/dashboards/v4/100219-thong-s-test-dashboard?f1=delivered)

Or you can use HTML and style with CSS if needed. For example, here’s mine with collapsible content as an example


<style>
  .collapser { display:none; }
  .toggle     { cursor:pointer; font-weight:bold; }
  .content    { max-height:0; overflow:hidden; transition:max-height .3s ease; }

  /* when the hidden checkbox ➜ checked, reveal the content */
  .collapser:checked + .toggle + .content { max-height:999px; }
ul.content { padding-left: 1.2em; }


</style>

<input type="checkbox" id="faq1" class="collapser" checked>
<label for="faq1" class="toggle">🔽 Dashboard Bookmarks</label>
<ul class="content">
<li><a href="https://testing4.holistics.io/dashboards/v4/100219-thong-s-test-dashboard?f1=cancelled">Cancelled Orders</a></li>
<li><a href="https://testing4.holistics.io/dashboards/v4/100219-thong-s-test-dashboard?f1=delivered">Delivered Orders</a></li>
<li><a href="https://testing4.holistics.io/dashboards/v4/100219-thong-s-test-dashboard?f1=refunded">Refunded Orders</a></li>
</ul>

:three: Step 3 (Optional) - Make it Reusable for Your Team

You can follow this document to convert your bookmarks into a block in the library, making them accessible for your team.

Limitations

Since this is not a built-in feature, here are a few current limitations:

  • Only dashboard editors can add or modify bookmarks
  • Loading behavior is not perfect
  • Requires some effort to set up

If you’d like better native support for bookmarks, feel free to suggest a feature here.

2 Likes