You can add graphics to a view and establish the logic used to select graphic based on column value using JavaScript. In the following example we will customize “All Opportunities” view and display icons alongside “Rating” column.
Select Icons
Select the icons that you would like to use. In this example we have selected 32×32 PNG icons for Rating options: Hot, Warm and Cold.
Image Web Resources
- Create 3 Web Resources for these images, for example: new_Hot, new_Warm and new_Cold.
- Save and Publish.
Create JavaScript Web Resource
Next we create a JavaScript Web Resource, for example: “new_OpportunityStatus_JavaScript”.
In this example, we have a separate JavaScript Web Resource for each column that we want to show an icon on.
| function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData); var col_data = str.opportunityratingcode_Value; var imgName = “”; var tooltip = “{” + col_data +”}”; switch (col_data) { case 1: imgName = “new_Hot”; tooltip = “Hot”; break; case 2: imgName = “new_Warm”; tooltip = “Warm”; break; case 3: imgName = “new_Cold”; tooltip = “Cold”; break; default: imgName = “opportunityratingcode”; tooltip = “Unknown”; break; } var resultarray = [imgName, tooltip]; return resultarray; } |
Link JavaScript to a Column in View
In this example, we open the “All Opportunities” view and for “Rating” column click Change Properties.
In this example we provide the following information:
- Web Resource: new_OpportunityStatus_JavaScript
- Function: displayIconTooltip
Optionally Select a width for this column, say 150px and click OK. Save and Publish the changes.
Go to Sales Hub in Dynamics 365 and for Opportunities open “All Opportunities” view to see the change.
Hey – I followed the instructions to the dot but the icons do not show up. Is there anything we need to change in the code other than the var col_data. That would be equal to str.new_urgency_Value where (new_urgency) is the schema name of the field in the view where we want to show the icons. Is there anything else we need to change?