3.0.0
BLOCKS
4-Column Dashboard Widgets

Overview

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

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:

How to set up standard metrics widgets

  • Update the data source of the group
  • 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.

How to set up the chart widgets

  • Update the data source of the Bubble chart element

How to set up the metrics widgets

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

How to set up progress bar widgets

  • Update the data source of the group
  • All progress bar elements are Bubble elements that can dynamically display a percentage:
  • 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])

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.