sales leaderboard - showing profile picture on the chart

Thuy_Tu · 2025-05-16T06:46:48+00:00

There was an error rendering this rich post.

Hi,

I'm on the mission of building a sales leaderboard. I searched around and found a sales leaderboard from Domo that looks like this

Can you please show me how to get the profile picture shown in the chart like that? I searched around and the only instruction I saw was using CONCAT on HTML table. This is not that.

Thanks!

Find more posts tagged with

Accepted answers

ArborRose

The only thing I see any issue with is forcing the number under the name while they are both next to the image. Otherwise, it should be doable. If you can't get it working in an html card, do it as a brick. A brick is just html with css and javascript. Use the html example I gave you and put it into a brick. Then replace the static values with you Domo dataset.

All comments

ArborRose

For mine, I had to host the image on my own server or use a trick to host it locally on Domo. There's a past thread here in the forum that shows that trick.

Then use html as a DIV in the data that points to the image.

Here's the beast mode formula:

CONCAT('<div style="text-align:center;border:0px white;border-collapse:collapse;"><img alt="DOWN" height="190px" src=','"https://{webhostdomain}.com/images/doctor/',`doctor_id`,'.png"','>','</div>')

The links you see showing the CONCAT statement IS that. Notice in my beast mode that I am referencing an identifier field. Same thing, you create your chart or table or whatever and embed the html with reference to your Domo field. But you need to make sure your files are already hosted on a reachable server or linkable in Domo. I can't find the original thread where I commented about this.

MarkSnodgrass

If you have your Domo users add a profile picture in their Domo profile, you can access that picture by using the following URL:

https://{instance-name}.domo.com/api/content/v1/avatar/USER/{userid}

If you have the DomoStats People dataset in your instance, you can use ProfilePictureURL column as your image source in your html.

If the pictures aren't stored in in their Domo profile, you can do a one-time upload onto a dashboard and note the URL that is created and then add that to your code. I explain how to do that in this video (around the 7 minute mark)

https://youtu.be/mZlxTS4s81I

Thuy_Tu

Thank you!

I can have the picture shown in the HTML table now.

My next question is what type of card, and how to set it up so that I can create the visualisation like this one.

Screenshot 2025-05-19 at 11.49.12 AM.png

ArborRose

If we create an html page example

we can test out html code

<!DOCTYPE html>

<html>

<head>

  <style>

    body {

      font-family: Arial;

      background-color: white;

    }

    .header {

      font-size: 18pt;

      color: #CEA667;

      font-weight: bold;

      margin-bottom: 20px;

    }

    .rep {

      display: flex;

      align-items: center;

      margin: 10px 0;

      font-size: 12pt;

    }

    .rank {

      width: 24px;

      font-weight: bold;

      color: black;

    }

    .photo {

      height: 48px;

      width: 48px;

      border-radius: 50%;

      margin: 0 10px;

    }

    .info {

      display: flex;

      flex-direction: column;

    }

    .name {

      color: black;

    }

    .production {

      color: #CEA667;

    }

  </style>

</head>

<body>


  <div class="header">Current Top Reps</div>


  <div class="rep">

    <div class="rank">1</div>

    <img class="photo" src="pcole.png" alt="Patricia Cole">

    <div class="info">

      <span class="name">Patricia Cole</span>

      <span class="production">$355K</span>

    </div>

  </div>


  <div class="rep">

    <div class="rank">2</div>

    <img class="photo" src="tfields.png" alt="Thomas Fields">

    <div class="info">

      <span class="name">Thomas Fields</span>

      <span class="production">$119K</span>

    </div>

  </div>


  <!-- Repeat for others -->


</body>

</html>

So your command in Domo would be something such as

CONCAT(

  '<div style="display:flex; align-items:center; font-family:Arial; font-size:12pt; margin:8px 0;">',

    '<div style="width:24px; font-weight:bold; color:black;">', `rank`, '</div>',

    '<img src="https://{webhostdomain}.com/images/doctor/', `doctor_id`, '.png" height="48px" style="margin:0 10px; border-radius:50%;">',

    '<div style="display:flex; flex-direction:column;">',

      '<span style="color:black;">', `name`, '</span>',

      '<span style="color:#CEA667;">$', `production`, '</span>',

    '</div>',

  '</div>'

)

Sorry, my example has doctor_id since I work with medical. That would be something like rep_id.

Thuy_Tu

@ArborRose thanks so much for going extra miles to create the HTML page and CONCAT formula.

I set up a dataset with the following fields

rank,
profile picture URL,
name,
sold $
product

and customised your formula accordingly. Unfortunately, it didn't show anything on HTML table.

I reached out to Customer Support and they confirmed that at the moment, there's no way to create that same look on existing Domo card, unless I create my own custom card. I'll give it a pass at the moment, and accept the HMTL table as solution for now.

Thanks again!

ArborRose

Thuy_Tu

Thank you!