Summary Number - Conditional Format Colors with Directional Arrow

I've read a few posts here in the Dojo, and also read this Knowledge Base article: Sample Beast Mode Calculations: Card Element Transforms

but cannot get this to work. It seems that the examples I am finding are far more complex than I need - maybe I'm missing something simple.

The logic I am trying to apply for a Summary Number is as follows:

CASE

WHEN `Gap` > 0 Then `Gap` [green text with green up arrow]

WHEN `Gap` < 0 Then `Gap` [red text with red down arrow]

ELSE `Gap` [black text with no arrow]

END

Here is a short video overview of what I'm asking for help with.

Quick Links

Accepted answers

Godiepi

Hi @swagner , hope you are doing well

Take a look at this example, you will need to add some HTML code to your summary as well as aggregated (SUM, COUNT etc)

I have a field in a table that tells me the score of a soccer match

the code below bring the score and turns green for the winning team either on the left or the right and remains gray if there is a draw.

Case when `Score 1` > `Score 2` 
then CONCAT('<div style="font-size:12px; color: Green;">', `Score 1` 
            ,'<span style="font-size:12px; color: Black;">', ' - ' 
            ,'<span style="font-size:12px; color: DarkGray;">', `Score 2`, '</div>')
     when  `Score 1` < `Score 2`  
then CONCAT('<div style="font-size:12px; color: DarkGray;">', `Score 1`  
            ,'<span style="font-size:12px; color: Black;">', ' - '
            ,'<span style="font-size:12px; color: Green;">', `Score 2`, '</div>')   
     when  `Score 1` = `Score 2`  
then CONCAT('<div style="font-size:12px; color: DarkGray;">', `Score 1`  
            ,'<span style="font-size:12px; color: Black;">', ' - ' 
            ,'<span style="font-size:12px; color: DarkGray;">', `Score 2`, '</div>') 
end

this is the final outcome

Screen Shot 06-18-19 at 01.25 PM.PNG

Same thing you would do for the summary number and to bring the image arrow uo or down , you will need the url of the image to render in the domo card. in the example above you can see some country flags and this is the code to combine the image with the country name

CONCAT('<div ><img alt="TBA" height="20px" width="35"	src="',`Flag1`,'">','<br />' ,`Team 1`,'</div>')

cwolman

Hi swagner,

In order to do this you will need to use the concat function which will cause you to lose your summary number formatting. Re-formatting the summary number is where the beast modes become very large.

The color and arrows can be accomplished by using this beast mode:

concat(

case

when `Gap`>0 then '<div style="color: green">'

when `Gap`<0 then '<div style="color: red">'

else '<div style="color: black">'

end,

`Gap`,

case

when `Gap`>0 then ' ⇧ '

when `Gap`<0 then ' ⇩ '

else ''

end,

'</div>')

Formatting the summary numbers with commas can be done by referencing this post. I find it is easier to abbreviate the summary number rather than the full value but it depends on your use case.

swagner

Posting for those that many follow this post later. Below is the summary number beast mode I put together based on feedback here, adapted for $ (the post @cwolman referenced, altered for my use case). Includes the red/green color formatting, the directional arrow, and currency formatting.

CASE
WHEN (Sum(`Mayer`)-Sum(`Par`))<= 0 THEN
Case When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 9 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),2),''
),1,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),3,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),6,3), ' &#9660;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 8 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),2),''
),1,2),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),3,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),6,3), ' &#9660;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 7 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,1),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),2,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),5,3), ' &#9660;', '</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 6 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),4,3), ' &#9660;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 5 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,2),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),3,3), ' &#9660;', '</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 4 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,1),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),2,3), ' &#9660;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) <= 3 THEN
CONCAT('<div style="color:red
">','$',Round(Sum(`Mayer`)-Sum(`Par`),0), ' &#9660;','</div>')
END
ELSE
Case When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 9 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),3,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),6,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 8 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,2),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),3,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),6,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 7 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,1),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),2,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),5,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 6 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),4,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 5 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,2),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),3,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 4 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,1),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),2,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) <= 3 THEN
CONCAT('<div style="color:green
">','$',Round(Sum(`Mayer`)-Sum(`Par`),0), ' &#9650;','</div>')
END
END

All comments

Godiepi

Hi @swagner , hope you are doing well

Take a look at this example, you will need to add some HTML code to your summary as well as aggregated (SUM, COUNT etc)

I have a field in a table that tells me the score of a soccer match

the code below bring the score and turns green for the winning team either on the left or the right and remains gray if there is a draw.

Case when `Score 1` > `Score 2` 
then CONCAT('<div style="font-size:12px; color: Green;">', `Score 1` 
            ,'<span style="font-size:12px; color: Black;">', ' - ' 
            ,'<span style="font-size:12px; color: DarkGray;">', `Score 2`, '</div>')
     when  `Score 1` < `Score 2`  
then CONCAT('<div style="font-size:12px; color: DarkGray;">', `Score 1`  
            ,'<span style="font-size:12px; color: Black;">', ' - '
            ,'<span style="font-size:12px; color: Green;">', `Score 2`, '</div>')   
     when  `Score 1` = `Score 2`  
then CONCAT('<div style="font-size:12px; color: DarkGray;">', `Score 1`  
            ,'<span style="font-size:12px; color: Black;">', ' - ' 
            ,'<span style="font-size:12px; color: DarkGray;">', `Score 2`, '</div>') 
end

this is the final outcome

Screen Shot 06-18-19 at 01.25 PM.PNG

CONCAT('<div ><img alt="TBA" height="20px" width="35"	src="',`Flag1`,'">','<br />' ,`Team 1`,'</div>')

cwolman

Hi swagner,

In order to do this you will need to use the concat function which will cause you to lose your summary number formatting. Re-formatting the summary number is where the beast modes become very large.

The color and arrows can be accomplished by using this beast mode:

concat(

case

when `Gap`>0 then '<div style="color: green">'

when `Gap`<0 then '<div style="color: red">'

else '<div style="color: black">'

end,

`Gap`,

case

when `Gap`>0 then ' ⇧ '

when `Gap`<0 then ' ⇩ '

else ''

end,

'</div>')

Formatting the summary numbers with commas can be done by referencing this post. I find it is easier to abbreviate the summary number rather than the full value but it depends on your use case.

swagner

I've got the following working, but the color formatting is not being applied. Can you see what I'm missing:

CONCAT(
		CASE 
			WHEN (SUM(`Mayer`)-SUM(`Par`))>0 THEN '<div style="color: green">'
			WHEN (SUM(`Mayer`)-SUM(`Par`))<0 THEN '<div style="color: red">'
			ELSE '<div style="color: black">'
		END,
		(SUM(`Mayer`)-SUM(`Par`))*100,
  		'%',
		CASE 
			WHEN (SUM(`Mayer`)-SUM(`Par`))>0 THEN ' &#8679;'
			WHEN (SUM(`Mayer`)-SUM(`Par`))>0 THEN ' &#8681;'
			ELSE ''
		END,
'</div>')

@cwolman

swagner

@cwolman - nevermind... when I hit save & close it showed up with the format. THANKS!

swagner

@Godiepi thank you! I will defintely use what you've posted here sir!

swagner

CASE
WHEN (Sum(`Mayer`)-Sum(`Par`))<= 0 THEN
Case When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 9 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),2),''
),1,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),3,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),6,3), ' &#9660;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 8 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),2),''
),1,2),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),3,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),6,3), ' &#9660;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 7 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,1),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),2,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),5,3), ' &#9660;', '</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 6 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),4,3), ' &#9660;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 5 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,2),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),3,3), ' &#9660;', '</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 4 THEN
CONCAT('<div style="color:red
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,1),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),2,3), ' &#9660;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) <= 3 THEN
CONCAT('<div style="color:red
">','$',Round(Sum(`Mayer`)-Sum(`Par`),0), ' &#9660;','</div>')
END
ELSE
Case When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 9 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),3,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),6,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 8 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,2),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),3,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),6,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 7 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,1),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),2,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),5,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 6 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,3),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),4,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 5 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,2),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),3,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) = 4 THEN
CONCAT('<div style="color:green
">','$',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),''
),1,1),',',SUBSTRING(CONCAT(Round((Sum(`Mayer`)-Sum(`Par`)),0),'' ),2,3), ' &#9650;','</div>')
When Length(CONCAT(ROUND(Sum(`Mayer`)-Sum(`Par`),0),'')) <= 3 THEN
CONCAT('<div style="color:green
">','$',Round(Sum(`Mayer`)-Sum(`Par`),0), ' &#9650;','</div>')
END
END

ADubois

@cwolman I'm having some trouble with this one. Using your suggested code, I'm getting the coloring to work but it's ending up creating a line break in my summary number.

Here is the format I want it to look like (albeit with color):

And here is what I'm getting:

And here is the code I'm using (abbreviated for space):

CONCAT(

'$',

SUM('LY Rev'),

' Last Year, ',case when (ROUND(100*(SUM(`Rev`) - SUM(`LY Rev`) ) / (SUM(`LY Rev`)),2))>0 then '<div style="color: green">'

when (ROUND(100*(SUM(`Rev`) - SUM(`LY Rev`) ) / (SUM(`LY Rev`)),2))<0 then '<div style="color: red">'

else '<div style="color: black">'

end,

(ROUND(100*(SUM(`Rev`) - SUM(`LY Rev`) ) / (SUM(`LY Rev`)),2)),

'%', '</div>',

' Difference')

I don't understand why I'm getting the line breaks. Any help is appreciated.

other categories

Product Ideas
Have a Domo product enhancement idea? Submit or upvote on ideas in the Ideas Exchange.
Ideas Exchange
Suggest & vote on new features you would like to see implemented in the Domo Product.
Data Connections
Ask questions about Connectors, Workbench, Cloud Amplifier and get best practices from Domo peers
Connectors
Connectors, Custom Connectors, Writeback
Workbench
Ask questions about Workbench, a secure, client-side solution for uploading your on-premise data to Domo.
Cloud Integrations
Ask questions about Cloud Integrations and Federated Data connection to your data warehouse or lake.
Data & ETL
Ask questions about Magic ETL, SQL DataFlows, DataFusion, Dataset Views and get best practices from Domo peers
Magic ETL
Ask Magic ETL questions and get answers from Domo peers
SQL DataFlows
Ask SQL DataFlow questions and get answers from Domo peers
Datasets
Ask DataFusion and Dataset Views questions and get answers from Domo peers
Visualize & Apps
Ask questions about Beast Mode, Cards, Charting, Dashboards, Stories, Variables and get best practices from Domo peers
Dashboards
Ask Cards, Dashboards, and Stories questions and get answers from Domo peers
App Studio
Ask questions about building apps in App Studio.
Pro-code Components
Ask questions about pro-code components and Domo Bricks and get answers from Domo peers.
Charting & Analyzer
Ask questions about charting and Analyzer and get answers from Domo peers.
Calculations & Variables (Beast Mode)
Ask questions about using calculated fields and Variables (Beast Modes) in Analyzer.
AI & Data science
Ask questions about DomoAI and get answers from Domo peers.
Domo AI & AI Chat
Ask questions about AI Chat and AI assistants.
Managing AI
Ask questions about managing AI with AI Playground, AI projects, AI models, and more.
Jupyter Workspaces
Ask questions about Jupyter Workspaces, Notebooks, and file share.
Automate
Ask questions about App Framework, Workflows, Domo Bricks, Domo Developer, API and get best practices from Domo peers
Workflows
Ask questions about Task Center, building automations with Domo Workflows, and executing JavaScript or Python code with Code Engine.
Alerts
Ask questions about managing alerts in Domo and get answers from Domo peers.
Distribute
Ask questions about Domo Everywhere, Scheduled Reports, Mobile and get best practices from Domo peers
Domo Everywhere
Ask questions about embedded analytics with Domo Everywhere.
Reporting
Ask questions about Scheduled Reports, Report Builder, and Slideshow Publications.
Manage
Ask questions about Governance Administration, Approvals, Teams, Alerts, and Buzz and get best practices from Domo peers
Governance & Security
Ask questions about People, Groups, Roles, Sandbox, Activity log, Buzz, Teams, Approvals and PDP and get best practices from Domo peers
Navigation & Productivity
Ask questions about navigation, Projects & Tasks, Goals, and Buzz chat.
APIs
Ask APIs and Developer.domo.com questions and get answers from Domo peers
Add-ins & Plugins
Ask questions about plugins, Microsoft add-ins, and other third-party software integrations.
Domo Community Gallery
Watch how our Customers are using Domo to solve their complex problems.
Product Releases
Domo support and product teams are here to live-answer questions about the most recent product releases. Please post questions in this Forum board for all users to benefit (rather than submitting a support ticket).
Domo University
Questions or discussions related to Domo University, trainings and certifications
Community Forums
Getting Started
Welcome to Domo's Community Forums! You'll find everything you need to get started in this category.
Community Announcements
Get the latest from Domo's Community Team.
Social Groups
Archive
Old or outdated content that could still be found helpful.