Building a reusable dashboard status callout / announcement block

Tips and Hacks
1

Keep your dashboard users informed about data pipeline updates, maintenance windows, or any important system status with a reusable callout block.

High-level approach

  1. Create a styled HTML/CSS callout block
  2. Convert it to a reusable component in your block library
  3. Add the callout to any dashboard that needs status updates
  4. Any edits you make to this block in the library, such as content updates, style changes, or visibility toggles, will automatically propagate to every dashboard using it.

Step 1: Create a callout block

Create a new HTML block and add this code for a status callout:

image
image1920×1287 87.9 KB

<div class="info-callout">
    <h3>ℹ️ Data Pipeline Maintenance</h3>
    <p>We're currently updating our data pipeline to improve performance. Dashboard metrics may show outdated data. Real-time data will resume once the update is complete.</p>
</div>

<style>
.info-callout {
    width: 100%;
    background-color: #e3f2fd;
    color: #1565c0;
    padding: 20px 40px;
    //display: none
}

.info-callout h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: #1565c0;
}

.info-callout p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #424242;
}

/* To make parent show overflow */
.dac-text-block:has(.info-callout), .text-widget-content:has(.info-callout) {
    overflow: visible !important;
}
</style>

Step 2: Turn this into a reusable component

Convert your callout into a reusable block so you can maintain it from one central location.

Click on the block’s menu, Select “Save to Block Library”, name it something descriptive like “Data Maintenance Callout”. (If Block Library is not enabled for your workspace, you can use functions by following this guide)

image
image1910×384 36.5 KB

Your reusable block will now appear in your ./library/blocks/ folder:

image
image1920×1287 76.6 KB

Step 3: Add the callout to your dashboards

Open any dashboard where you want to display the status callout, add “Data Maintenance Callout” from your Block Library. Position it at the top of your dashboard and resize as needed.

image
image1920×1287 153 KB

Step 4: Update content or toggle show/hide across all dashboards

The power of using a reusable block is centralized control. You can show/hide the callout on ALL dashboards simultaneously:

To hide the callout: Edit the block in your library and add this CSS:

.info-callout {
    display: none;
    /* existing styles remain here */
}

image
image1920×1287 77 KB

To show the callout again: Simply comment out or remove the display property:

css

.info-callout {
    /* display: none; */
    /* existing styles remain here */
}

Any edits you make in the library (content updates, style changes, or visibility toggles) will automatically propagate to every dashboard using this block.

Limitations & workarounds

Challenge: This approach requires manually adding the callout to each dashboard where you want it to appear.

Workaround: Since Holistics is fully as-code, you can:

  • Write a script to automatically add the callout block to multiple dashboards
  • Use AI tools to help identify all dashboards using specific datasets and bulk-add callouts
3 Likes