Skip to main content
waffle.svg
Domo Knowledge Base

Adding Graphics, Links, and Images to Table Cards Using Beast Mode

Version 20

 

Intro

With over 10 million interactions every month, tables are the most widely used card in Domo. Tables always work but unfortunately do not always lead to quick insights, as with the following rather mundane example:



This article shows you how to add some quicker insights into your tables by including links, colors, and images, like in the following example:

              

The content in this article was shared in our Domopalooza 2017 Tips and Tricks session. For more information about this session, see Tips and Tricks: Quick Lessons from Power Users.

For more information about building Tables, see Table.

Note: Domo cards cannot be embedded inside cells of table cards, as iFrames are not supported. For a list of supported tags, see HTML Table Tags, below.    

Adding Links and Anchor Tags to Tables

One way to incorporate quicker insights in tables is to include links or anchor tags. This allows you to take an ID from the source system and link back to that source from your table.

To add links to a table, all you need to know is a little HTML and how to use CONCAT in Beast Mode.

To add links to a table,

  1. Open the Analyzer by selecting Edit Card in the Wrench menu on the card.

  2. Select Add Calculated Field to create a new Beast Mode formula.

  3. Name your formula.

  4. Use CONCAT to create an HTML string for your table link or anchor.

    Here is a sample link to a JIRA source system:

    CONCAT('<div><a href="https://onjira.domo.com/browse.com"','"target="_blank">',`Sales Rep`,'</a></div>')


    The addition of the "target=_blank" is optional and will force the link to open in a new tab in your browser.

  5. Replace https://onjira.domo.com/browse.comwith your link.

  6. Replace `Sales Rep`with the text your link will appear as in the table.  
     

    Note: If you would like to input your own text, rather than reference a column, make sure to wrap your text in single quotes to avoid a syntax error.
    Ex:CONCAT('<div><a href="https://onjira.domo.com/browse.com"','"target="_blank">','Link Text','</a></div>')
  7. Select Save & Close from the formula editor.

  8. Now drag this new calculated field into your Columns area in the Analyzer.

You now have a great time-saving link to review the data in your source system.

Adding Color to Table Values              

The same principles apply to adding a color to your values in a table.

To add color to values in a table,

  1. Open the Analyzer by selecting Edit Card in the Wrench menu on the card.

  2. Select Add Calculated Field to create a new Beast Mode formula.

  3. Name your formula.

  4. Use CONCAT to create an HTML string for your table link or anchor.

    The HTML syntax for color is by specifying "style" in a div command.            

    Here is an example for setting the color to red:

    concat('<div style="color: #f00">',`Sales`,'</div>')

    Here is an example for setting the text color to red when the value is negative:

    concat('<div style="color: #f00">',`Sales`,'</div>')

    else

    concat(`Sales`,'')

    end               

Adding Images to a Table

Finally, by using the <img> command in HTML you can add images to your table.






To add images to a table,

  1. Open the Analyzer by selecting Edit Card in the Wrench menu on the card.

  2. Select Add Calculated Field to create a new Beast Mode formula.

  3. Name your formula.

  4. Use CONCAT to create an HTML string for your table link or anchor.

    The HTML syntax for referencing an image is by using the <img> command.

    Here is an example for including a simple down arrow image.

    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>')

  5. Replace http://www.clipartkid.com/images/27/download-public-domain-ihtHTQ-clipart.pngwith the URL of the image you would like to display.

    The following steps are optional:

  6. style="text-align:center"can be replaced with any custom styles you would like to apply to the image. In this example, the image was aligned in the center of the table cell. See HTML Table Tags for the available styling tags.

  7. alt="DOWN"provides alternative information for an image if a user cannot view it for any reason. In this case, a user would see the word DOWN instead of the down arrow image.

  8. You can remove height="20px"all together to use the original height of your image or replace20pxwith the height of what you want your image to be in pixels. We used 20px because the size of the original image was quite large for a table.

 

To add multiple images in a single column to a table,

Build a Case statement condition using Beast Mode. When profit is up or down, then a corresponding up or down arrow is displayed.

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/551/arrow-blue-up-clip-art-at-clker-com-vector-clip-art-online-royalty-Yl3Dn6-clipart.png">','</div>')

END

HTML Table Tags

In the interest of security, only certain HTML tags are allowed in tables in Domo. The following table lists all of the tags that are allowed.

Tag

Attribute(s)

<a>

href="http://..." (see Note 1 below)

<br>

 

<div>

  • style (see Note 2 below)

  • align

  • width

  • title

<font>

  • style (see Note 2 below)

  • color

  • size

<img>

  • style (see Note 2 below)

  • alt

  • align

  • border

  • class

  • height

  • title

  • width

<span>

style (see Note 2 below)

<p>

style (see Note 2 below)

<h1>

style (see Note 2 below)

<h2>

style (see Note 2 below)

<h3>

style (see Note 2 below)

<h4>

style (see Note 2 below)

Note 1: The URL must begin with http, https, or mailto. It cannot be a partial or relative path. Other hrefs will be removed.

Note 2: Allowed Style attributes include the following:

  • background-color

  • border

  • color

  • float

  • font-color

  • font-size

  • font-weight

  • height

  • left

  • margin

  • margin-left

  • margin-right

  • max-height

  • max-width

  • padding

  • position

  • text-align

  • top

  • vertical-align

  • white-space

  • width

  • word-wrap

  • z-index