I've been working from both of these helpful posts about using Arcade to format values and cells in dashboard tables.
I've been able to do some things, such as formatting numbers and percentages. But I haven't been able to figure out how to bold specific values in a column and, for other values, change textAlign from left to center.
I can use displayText to make all values bold, or textAlign to make all values center aligned. My goal, though, is to make those changes for just certain values in the column.
Below is my desired output for the "Revenue Source" field. Thank you for any suggestions.
Revenue Source |
Personal Income |
Withholding |
Other Pmts |
Refunds |
Corporation |
Estimated Pmts |
Other Pmts |
All Other Revenue |
Insurance |
Tobacco |
Other |
Solved! Go to Solution.
You need to have your arcade statement return HTML that does your desired formatting.
var bld = Concatenate('<strong>'+$datapoint.COUNTRY+'</strong>')
var lft = Concatenate('<div style="text-align: center;">' +$datapoint.COUNTRY+ '</div>')
var blft = Concatenate('<div style="text-align: center;"><strong>' +$datapoint.COUNTRY+ '</strong></div>')
var ctry = When($datapoint.COUNTRY == 'Cameroon', bld, $datapoint.COUNTRY == 'Angola', lft, $datapoint.COUNTRY == 'Ethiopia', blft,$datapoint.COUNTRY )
return {
cells: {
ADMIN1: {
displayText : $datapoint.ADMIN1,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
ADMIN2: {
displayText : $datapoint.ADMIN2,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
COUNTRY: {
displayText : ctry,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
}
}
You need to have your arcade statement return HTML that does your desired formatting.
var bld = Concatenate('<strong>'+$datapoint.COUNTRY+'</strong>')
var lft = Concatenate('<div style="text-align: center;">' +$datapoint.COUNTRY+ '</div>')
var blft = Concatenate('<div style="text-align: center;"><strong>' +$datapoint.COUNTRY+ '</strong></div>')
var ctry = When($datapoint.COUNTRY == 'Cameroon', bld, $datapoint.COUNTRY == 'Angola', lft, $datapoint.COUNTRY == 'Ethiopia', blft,$datapoint.COUNTRY )
return {
cells: {
ADMIN1: {
displayText : $datapoint.ADMIN1,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
ADMIN2: {
displayText : $datapoint.ADMIN2,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
COUNTRY: {
displayText : ctry,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
}
}
Thanks - that worked perfectly.
A follow-up question to the solution above @JenniferAcunto : If I want to also bold the values in the "Actual" and "Forecast" fields that correspond with the bolded values in the "Revenue Source" field, how do I structure the HTML and Arcade expression? I've tried several ways but I'm not getting the desired result
This is my code:
var bld = Concatenate('<strong>'+$datapoint.revenue_source+'</strong>')
var rsrc=When($datapoint.revenue_source == 'Personal Income', bld, $datapoint.revenue_source == 'Corporation',$datapoint.revenue_source == 'Total',$datapoint.revenue_source == 'All Other Revenue'
return {
cells: {
revenue_source: {
displayText : rsrc,
hoverText: $datapoint.revenue_source,
textColor: '',
backgroundColor: '',
textAlign: 'left',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
Actual: {
displayText: Text($datapoint["Actual"], '$#,###; -$#,###'),
textColor: '',
backgroundColor: '',
textAlign: 'right',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
Forecast: {
displayText: Text($datapoint["Forecast"], '$#,###; -$#,###'),
textColor: '',
backgroundColor: '',
textAlign: 'right',
iconName: '',
iconAlign: '',
iconColor: '',
iconOutlineColor: ''
},
This is my desired result. Thank you.
Revenue Source | Actual | Forecast |
Personal Income | 100 | 50 |
Withholding | 25 | 25 |
Other Pmts | 25 | 20 |
Refunds | 50 | 5 |
Corporation | 200 | 100 |
Estimated Pmts | 100 | 50 |
Other Pmts | 100 | 50 |
All Other Revenue | 300 | 500 |
Total | 600 | 650 |