Join our Community in its new Home - The Datorama Trailblazer Community Group!

It's been an amazing 3 years coming together in this forum to collaborate, innovate, support, and inspire each other about our shared usage of Datorama. While this is not quite a goodbye, we are excited to announce that we are getting a fresh start in our new home within the Salesforce Trailblazer Community. We have a ton of fun new content planned and you may even see the revival of some of our most popular posts from the past few years.

We’ll be keeping this group around for a bit for you to peruse, but as of November 15, we will no longer be allowing new posts or comments. Be sure to join our new group at https://www.salesforce.com/success-datorama to keep the conversation going.

We can’t wait to see you there!

Dynamic Text Based on Measurement Thresholds

Ever wanted to display text dynamically based on your measurement data meeting a certain threshold or goal? Well, wonder no more!

First, you're going to want to create a Custom Widget in your dashboard page:




In that custom widget, you'll want to include the measurements and dimensions you want to see represented, as usual:



Next, go ahead and navigate into the Custom Widget Editor, by clicking on the Pencil icon:



On that screen, you'll see four sections:
  1. A preview pane of your widget results (in the upper left)
  2. An HTML section (in the upper right)
  3. A Javascript section (in the lower left)
  4. A CSS section (in the lower right)

In the HTML section (upper right), put the following code:
<div><!-- <pre id="json"></pre> --></div><div><p id='display'></p></div>

In the Javascript section (lower left), put the following code:
<div>var res = DA.query.getQueryResult();</div><div>var metric = res["rows"][0][2]['formattedValue'];</div><div>//document.getElementById("json").textContent = JSON.stringify(score, undefined, 2);</div><div><br></div><div>var display = 'Text';</div><div>if(metric > 6)</div><div>{display = 'This measurement is above a 6 (currently a '+ metric +').';}</div><div>else {display = 'This measurement is below a 6 (currently a '+ metric +').';}</div><div><br></div><div>document.getElementById("display").innerHTML = display;&nbsp;</div>

Note - you may need to customize two elements in this javascript code:

  1. In defining the 'metric' variable, the code is looking for you to specify the row and column index values for the underlying query result. In this example, we would choose the first row - [0], and then select the third column - [2]. (The counter here starts with 0, so 2 represents the third value. See the table view image below
  2. In the definition for var display, this is where we set the differential text logic. In our example, we are coding our value based on whether or not the metric value is greater than 6. In your own usage, you may have a different threshold, or you may want to make a relative comparison to another measurement entirely

If you're not sure of what row/column index to use, simply open up the widget's table view to find out:




In our example, our row index value is the red [0] to indicate the first row, and our column index value is the blue [2], to indicate the third column we want returned.

This is a basic example, but you can add even more if logic to allow for additional cases, and you can even add additional measurements in your logic as well.

In the meantime, happy data visualizations!
Sign In or Register to comment.