AGOL Dashboard Indicator Widget Advanced Settings

[Christopher_Spadi]

Greetings,

I have a feature with various string and numeric values. I just want the value to 5 decimals places and medium black (Before I had advanced formatting that changed the color to light green, light red, medium black, and dark grey depending on certain value ranges in if statements via Arcade and it worked but given each subset of features having different ranges its not feasible).

What I would like to do is use a string field that has Increasing, Decreasing, No Change, or Insufficient Samples as the options. I would like to display on the bottom part of Indicator widget and have the change color based off string value (Light Green Decreasing, Light Red Increasing, Medium Black No Change, and Medium Grey Insufficient Samples). 

Is it possible to achieve this? I would also like to use the icons from ESRI on the left of the text bottom or top possibly if that looks better by adding the up triangle (Increasing), down triangle (Decreasing), circle (No Change), and square (Insufficient Samples) and have them change colors too.

I couldn't get it to work in advance formatting via Arcade. Is it possible to use a string field that is in the same map feature the calculated value is using in the middle of the indicator and data settings?

Thanks.

[JenniferAcunto · Accepted solution]

You can do this using Advanced Formatting. The only tricky part is the icon. Dashboard icons will display next to the middle text and there's no way to change that. The easiest solution would be to move your decimal value to the top line and your string value to the middle line so that the icon displays next to that. 

Then set up 2 When statements to control the color and icon name based on your string values. 

var tcolor = When($datapoint.MEASUREMENT == 'Estimated', '#00A1E4', $datapoint.MEASUREMENT == 'Not Available', '#E0ACD5', $datapoint.MEASUREMENT == 'Measured', '#04E762', '#274C77')

var icon = When($datapoint.MEASUREMENT == 'Estimated', 'up', $datapoint.MEASUREMENT == 'Not Available', 'down', $datapoint.MEASUREMENT == 'Measured', 'square', 'circle')


return {
  textColor:'',
  backgroundColor:'',
  topText: $datapoint.MAGNITUDE,
  topTextColor: '',
  topTextOutlineColor: '',
  topTextMaxSize: 'medium',
  middleText: $datapoint.MEASUREMENT,
  middleTextColor: tcolor,
  middleTextOutlineColor: '',
  middleTextMaxSize: 'medium',
  // bottomText: ,
  // bottomTextColor: ,
  // bottomTextOutlineColor: '',
  // bottomTextMaxSize: 'medium',
  iconName: icon,
  iconAlign:'left',
  iconColor: tcolor,
  iconOutlineColor:'',
  //noValue:false,
  //attributes: {
    // attribute1: '',
    // attribute2: ''
  // }
}

Make sure the icon name matches the names you give the icons when selecting them. 

This assumes you are using the Feature value type.

If you are using the Statistic value type, then you will need to look at the third method in this blog, Dashboards That Pop: Indicator Hacks

[Christopher_Spadi]

Thanks for the response Jen.

I updated the Arcade you provided with my fields in advanced settings, created the icon list, named appropriately, set the data settings to below, and get 'Unable to execute Arcade script'. Wasn't sure if Slope Percent Median needed to be string so I even tried creating a new string field and rounded to 5 decimals but that didn't work. Any idea why it wont work? 

Thanks for your assistance. 

var tcolor = When($datapoint.GIS_Trend == 'Increasing', '#E74C3C', $datapoint.GIS_Trend == 'Decreasing', '#2ECC71', $datapoint.GIS_Trend == 'Insufficient Samples', '#BDC3C7', $datapoint.GIS_Trend == 'No Change', '#7F8C8D')

var icon = When($datapoint.GIS_Trend == 'Increasing', 'up', $datapoint.GIS_Trend == 'Decreasing', 'down', $datapoint.GIS_Trend == 'Insufficient Samples', 'square', $datapoint.GIS_Trend == 'No Change', 'circle')


return {
  textColor: '',
  backgroundColor: '',
  topText: $datapoint.Slope_Percent_Median_String,
  topTextColor: '',
  topTextOutlineColor: '',
  topTextMaxSize: 'medium',
  middleText: $datapoint.GIS_Trend,
  middleTextColor: tcolor,
  middleTextOutlineColor: '',
  middleTextMaxSize: 'medium',
  // bottomText: ,
  // bottomTextColor: ,
  // bottomTextOutlineColor: ,
  // bottomTextMaxSize: ,
  iconName: icon,
  iconAlign: 'left',
  iconColor: tcolor,
  iconOutlineColor: '',
  //noValue:false,
  //attributes: {
    // attribute1: '',
    // attribute2: ''
  // }
}

[JenniferAcunto]

Both of your When statements are missing a default value at the end. 

var tcolor = When($datapoint.GIS_Trend == 'Increasing', '#E74C3C', $datapoint.GIS_Trend == 'Decreasing', '#2ECC71', $datapoint.GIS_Trend == 'Insufficient Samples', '#BDC3C7', $datapoint.GIS_Trend == 'No Change', '#7F8C8D', '')

var icon = When($datapoint.GIS_Trend == 'Increasing', 'up', $datapoint.GIS_Trend == 'Decreasing', 'down', $datapoint.GIS_Trend == 'Insufficient Samples', 'square', $datapoint.GIS_Trend == 'No Change', 'circle', '')

[Christopher_Spadi]

Oops. I had an extra value/color I added, used those single quotes, and forgot to replace them.

Thanks for your help. 

[jcarlson]

The Indicator widget is pretty inflexible. In cases where I've needed something more malleable, you can use a Data Expression and create a 1-item "list". In something like the List widget, you have full access to things like SVGs and HTML formatting.