Including a Sum in a Markdown Widget

Q: how to include a markdown widget with a single number that is calculated, like a total value of sales or something like that?

Example Document: WEBINAR QUESTION: Sales Commissions Dashboard (Markdown Example) - Grist

I used the Sales Commissions Dashboard template as a foundation for this.

First, you want to find the SUM() that you want to display in the Markdown widget. You’ll see the following formula in the Total Sales column of the Sales Markdown table;

total = SUM(Sales.lookupRecords().Revenue)
f"${total:,.2f}"

Let’s break this down.

SUM(Sales.lookupRecords().Revenue)

We use a lookupRecords function to find all records in the Sales table. We use dot notation to find the value in the Revenue column for each of those records. Then, use SUM() to sum all of those values together. I assigned this sum to the variable total.

Next, we need to convert that summarized value into a string. In order to format it like a currency amount, we use a formatted string literal.

f"${total:,.2f}"

f notes that this is a formatted string literal. Everything within the quotes is our string. Everything within { and } is our Python expression. total represents our sum found above. , will format our number with a thousands separator. .2f will round our number to two decimal places.

In this example, I opted to use a lookupRecords formula within a standard table to find my SUM() rather than a summary table because a summary table requires that all columns be formula columns. I wanted to include the Markdown Template column which is a text column.

Next, we need to create our ‘template’ with our variable. This is the Markdown Template column you see. This would include any Markdown formatting you wish to include to format the Markdown custom widget. To keep it simple, I included our variable for the Total Sales column and applied H1 formatting using #. Check out the Markdown Guide for more formatting you can do!

Finally, I need to create the text to display in our Markdown custom widget. The formula found in the Markdown Display column is;

# Finds all data associated with this record
class Find_Data(dict):
  def __missing__(self, key):
    return getattr(rec, key)

# Finds the template
template = $Markdown_Template

# Formats the template with fields from this table as well as fields from the referenced table
template.format_map(Find_Data())

This finds all the information to populate our ‘template’. For this example, the template is incredibly simple. It only contains one variable, {Total_Sales}. Then, populates the template with the data found.

For an in depth walkthrough of this formula (and the Markdown custom widget), check out the Markdown Widget Magic :man_mage: webinar!

Finally, we need to populate a Markdown custom widget with the text from the Markdown Display column.

Add a new custom widget to the page using the data from the table containing your sum and Markdown text.

Configure the custom widget in the Creator Panel.

And voila! You can now display your total sales in a Markdown custom widget!

image