# 4-Column Dashboard Widgets

## Overview

The block includes eight common dashboard widgets for displaying metrics, charts, progress bars, and recent activities.

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZBg8XxmyGSBKYzlZD%2FScreen%20Shot%202021-04-05%20at%203.40.18%20PM.png?alt=media\&token=9a0c84ec-3a0f-47f1-8406-6bd5bac5b9db)

## Structure

* When this block is added to a page, it is placed within a group called **Blocks container 860 (do not rename)** on the page. This group contains the responsive settings for all blocks.
* This block contains four main groups:
  * **Group Responsive metric and chart**
    * **Group Inner standard metric tile** contains text elements for displaying metrics
    * **Group Inner chart container** contains a Bubble chart element for displaying graphs
  * **Group Responsive metric and progress bar**
    * **Group Inner metrics container** contains text elements for displaying multiple metrics
    * **Group Inner progress bar chart container** contains a progress bar and text element 
  * **Group Responsive small metrics and chart** and **Group Responsive small metrics and progress bar** contain smaller versions of the aforementioned widgets
* This block also includes a reusable element that you can customize:
  * [**filters\_template**](https://docs.airdev.co/canvas-pages-and-modules/v/3.0.0/reusables/applyfilters)

## How to set up standard metrics widgets

* Update the data source of the group

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZShxznC0xSMl_KUxZ%2FScreen%20Shot%202021-04-05%20at%204.55.28%20PM.png?alt=media\&token=df20809f-e397-48bc-9a10-d7e57f2f432a)

* Update the conditional statements on 'Text number'
  * These conditional statements are used to format the text to display a decrease, increase, or no change in the numbers.

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZT0qCyD20P9QRO7J7%2FScreen%20Shot%202021-04-05%20at%204.56.42%20PM.png?alt=media\&token=84ac5838-cd8c-4bce-80cb-edda8e381da6)

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZSo1NyHLzn-PFNnJg%2FScreen%20Shot%202021-04-05%20at%204.56.04%20PM.png?alt=media\&token=6db8f695-2765-4202-bc5d-05cffc08e1a1)

## How to set up the chart widgets <a href="#how-to-set-up-the-chart-widget" id="how-to-set-up-the-chart-widget"></a>

* Update the data source of the Bubble chart element

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZTrX0qMP4WBG9MVHp%2FScreen%20Shot%202021-04-05%20at%205.00.46%20PM.png?alt=media\&token=3af01310-5e22-4333-920e-8882358bc9e2)

## How to set up the metrics widgets <a href="#how-to-set-up-the-metrics-widgets" id="how-to-set-up-the-metrics-widgets"></a>

* Update the data sources of all text elements within the group

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZc_UKMs3kf5q7sgM8%2FScreen%20Shot%202021-04-05%20at%205.42.16%20PM.png?alt=media\&token=3d52f1d5-8a55-401a-b0e8-f74139116b91)

## How to set up progress bar widgets

* Update the data source of the group

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZdzRgnS1Lz6Ff0ImG%2FScreen%20Shot%202021-04-05%20at%205.43.39%20PM.png?alt=media\&token=23c004b7-c1b0-4c24-9390-53878fc0c582)

* All progress bar elements are Bubble elements that can dynamically display a percentage:

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYWZGk94QtZIS-14Kt%2F-MXZe7I8-vY0GUF8mk8N%2FScreen%20Shot%202021-04-05%20at%205.49.55%20PM.png?alt=media\&token=c51dd30d-f55e-4ca8-a30b-10b682e52581)

* For example, if you would like to display which percentage of revenue comes from a specific source (e.g., Shopify), you can set that progress bar's "Percentage" data source to be that dynamic expression (e.g., \[Shopify Revenue numeric value]/\[Total Revenue numeric value])

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXYLxDKnvZtSr9dH8zy%2F-MXYTzkL3R5mk1B0a9CS%2FScreen%20Shot%202021-04-05%20at%2012.21.35%20PM.png?alt=media\&token=be6f83e0-2e2c-4a53-ba2f-c3b7948236dd)

## Other updates

* Each widget group includes a primary action button
* To use, please remember to add a workflow to the button.
* To hide, please select ***Group responsive primary action container*** and uncheck the box for *This element is visible on page load*.

![](https://1483599141-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MXZf2E53ywvYSow6lUi%2F-MXZf90fV_Id7chpzbEh%2FScreen%20Shot%202021-04-05%20at%205.54.28%20PM.png?alt=media\&token=09447882-ec47-4b57-823b-bf14513b22cf)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.airdev.co/canvas-pages-and-modules/modules/4-column-dashboard-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.