Skip to main content
waffle.svg
Domo Knowledge Base

Sample Beast Mode Calculations: Card Element Transforms

Intro

These Beast Mode calculations can be used to apply special formatting to various elements in Domo such as cards, tables, summary numbers, and the like.

Stylizing a Value in a Table

Use a calculation to stylize a cell value in a table. For example, to stylize a cell in a column named "salesperson" when the value is equal to 'Bob', create a calculation named "Sales Person", then use the following code:

CASE `salesperson`
when 'Bob' then CONCAT('<span style="color:red">',`salesperson`,'</span>')
else `salesperson`
end

Including a URL in a Table Card

Use the following Beast Mode to insert a URL in a table card:

CONCAT(`TopicName`, ': ', '<a href="', `Link`, '" target="_blank">', `Link`, '</a>')

"TopicName" refers to the field in the DataSet with your topic names, and "Link" refers to the field with the URLs. URLs must start with https://.

Applying Conditional Formatting to a Standard Table

The following Beast Mode examples show you how to create conditional formatting on a standard table, which you can use in instances where you need a modified drill path table view. These options are not currently available in Sumo tables.

This formatting is accomplished by creating an HTML string which contains a DIV element in which the background color changes based on user-defined conditions. 

Green Background (#bbe491)
CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Green Conditional Format', '</a></div>')

Yellow Background (#ccf84)
CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Yellow Conditional Format', '</a></div>')

Red Background
CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Red Conditional Format', '</a></div>')

Note: The <a> element with a reference to # prevents the user from drilling on that column as it would create a filter for the full HTML string.  

Example Beast Mode

CASE

WHEN `CHANGE` > 0 THEN CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

WHEN IFNULL(`CHANGE`, 0) = 0 THEN CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

WHEN `CHANGE` < 0 THEN CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')

END

Example Table with Beast Mode Applied

Note: Keep in mind that the value this Beast Mode returns is a STRING. Any aggregations must be done within Beast Mode because aggregations will be disabled when building cards.  

Alternative Approach

If you would like to highlight the text block portion only and not the entire cell, use the following code:

<span style="background-color:#ff666;display:block"><a href="#">Your Text Here</a></span>

If you would like to highlight just the text and not the entire display block, use this code:

  <span style="color:#ff666;"><a href="#">Your Text Here</a></span>

Notice the <a> tag was added to handle the drill issue and the styling needs to have "color" when dealing with the font color only.

Formatting a Summary Number

You can use Beast Mode to change the font size for a summary number; customize other aspects of a summary number's appearance, or even include multiple summary numbers in the same card. 

Important: The changes discussed in this section are not supported on Domo Mobile or when exporting to PowerPoint. In these cases, HTML will appear instead of the summary numbers. 

Changing the Font Size for a Summary Number

To change the font size for a summary number, you would wrap your Beast Mode calculation in a CONCAT function in which you specify the font size using div tags, like the following: 

CONCAT(
'<div style="font-size:20px">'
,CONCAT('2017',' ','Booked',' ','Rev',' ','$',round(sum(`Grouped booked Rev`)/1000000,2),'M',' ','v.',' ',' ','Budget',' ','Rev',' ','$',round(sum(`2017 Budget Revenue`)/1000000,2),'M')
,'</div>'
)

Creating a Custom Summary Number 

Creating a custom summary number can provide quick insight into what is most important in a card. By adding multiple dimensions, color, or even symbols, you can build a personalized summary number that highlights what you want users to see first.

To accomplish this, build a Beast Mode calculation utilizing the concat() function; this allows you to combine multiple strings into one. Note that this does bypass formatting options, such as thousand separators, so these will need to be built into the concat() statement.

Check out the example calculations below and their corresponding output:

Example 1

Use this Beast Mode...

CONCAT(Sum(CASE when `Status` <> 'New' then 1 END),' Total, ',sum(case when `Date` >= date_sub(curdate(),INTERVAL 1 MONTH) then 1 else 0 end),' In Last 30 Days')

...to show a summary number like the one in the following chart. (Portions of the Beast Mode calculation are color-coded to match the portions of the summary number they correspond to.)

 

custom_summary_number1.png

Example 2

Use this Beast Mode...

CONCAT('$',round(SUM(Case when (`Date`<= curdate() and `Status` = 'Accepted' and `Account Status` = 'Active') then `Amount` END)/1000000,2),’m – ‘,(case when `Value` > 0 then 'm - ? ' else 'm - ? ' end),round(round(SUM(Case when (`Date`<= curdate() and `Status` = 'Accepted' and `Account Status` = 'Active') then `Amount` END)/SUM(Case when (`Date`<= date_sub(curdate(), INTERVAL 1 MONTH) and `Status` = 'Accepted' and `Account Status` = 'Active') then `Amount` END)-1,2)*100,0),'% From 30 Days Ago')

...to show a summary number like the one in the following chart. (Portions of the Beast Mode calculation are color-coded to match the portions of the summary number they correspond to.)


custom_summary_number2.png

Example 3

You can even add HTML to your concat() function to include images, color-coding, or other stylings. For a complete list of the supported HTML, see HTML Table Restrictions.

Use this Beast Mode...

CONCAT('<a style="color: #f00">',SUM(CASE WHEN `Color` = 'Red' THEN `Value` END),'</a>',' Total Red | ','<a style="color: #00c200">',SUM(CASE WHEN `Color` = 'Green' THEN `Value` END),'</a>',' Total Green | ','<a style="color: #ff0">',SUM(CASE WHEN `Color` = 'Yellow' THEN `Value` END),'</a>',' Total Yellow')

...to show a summary number like the one in the following chart. (Portions of the Beast Mode calculation are color-coded to match the portions of the summary number they correspond to.)

custom_summary_number3.png

Notes: 

  • You will not see the effects of the HTML coding while in the edit view of the card. You must save and view the card from the Details or page view to see the formatting.

  • If you are using the PowerPoint plugin or exporting a card that contains HTML, it is displayed as the underlying Beast Mode rather than the output it creates.

For more information about summary numbers, see Configuring Your Chart Summary Number.

Creating Multiple Summary Numbers

You can use Beast Mode to display multiple card summary stats. This can give card viewers a better sense of the story the card is trying to tell them.

The essential function you’ll need to apply in your Beast Mode calculation is concat(). You can add in text and any combination of metrics inside the concat() statement.

Note: Creating a summary number this way bypasses standard formatting options, so the formatting needs to be built into the concat() statement.

For example:

CONCAT(calculation, ‘Text’, [etc])

Example

The following Beast Mode calculation uses the CONCAT function to create a summary number showing the number of records where the value of the STATUS field is “COMPLETE” compared to the total number of records:

CONCAT(SUM(CASE WHEN STATUS = 'COMPLETE' THEN `Amount` ELSE 0 END), ' out of ', 'SUM(`Amount`))

If there were 65 completed records and 80 total records, the result of the function above would be “65 out of 80.”

For more information about summary numbers, see Configuring Your Chart Summary Number.

Showing Different Pictures in a Table Based on Changing Values

Because you can use HTML coding in table cards, you can use a Beast Mode case statement to bring in an image based on data values. 

For example, you can use the following Beast Mode to display a different image in a table based on whether "Profit" is positive or negative.

case when `Profit`<0 then

CONCAT('<div style="text-align:center"><img alt="DOWN" height="20px" src="http://www.clipartkid.com/images/27/download-public-domain-ihtHTQ-clipart.png">','</div>')

else

CONCAT('<div style="text-align:center"><img alt="UP" height="20px" src="http://www.clipartkid.com/images/239/up-arrow-green-clip-art-clip-arts-clip-art-clipartlogo-com-Cy8l...>')

end

For the "src" section, just insert the URL for the image you want to use.