Support Portal ContactGet in touch

Red, Amber, Green Statuses in Dynamics 365 Views

   Words by CRM Consultancy

   on 01/07/2018 18:00:00

imageOften when we show a list of records to the User in Dynamics we want the ability to highlight particular Rows.

This can be helpful to show SLAs, overdue Tasks or other items that need more urgent attention – and so allow a CRM List to act as a better ‘call-to-action’ for the end user, and so increase the usefulness of CRM.

Previously this was only available via Custom Development or building a Custom Diary Screen – however Dynamics 365 allows us to produce this view of records in a supported way with only a minimal amount of custom development.

How do we do it..

We can implement this by using a new area of functionality in Dynamics 365 that allows us to attach a Webresource to a Column in a CRM View.

This Webresource will then be processed with each Row loaded into the View, and allow us to include an Image and Tooltip for that Row is certain conditions are met.

We begin by customising the View in Dynamics in the usual way and ensuring we include the Column that we want to perform the RAG Calculation, and then clicking into the Column we want to show a visual indicator for:


Here we can specify a Javascript Webresource and then a Function within that Webresource to run for each Row.

This Javascript Function can then take in the following attributes:

// Display a Custom Icon and Tooltip within a CRM View
function displayRAGIcon_date(rowData, userLCID) {
    try {
        // parse the rowData into JSON format that we can query
        var jsonRowData = JSON.parse(rowData);

The rowData being supplied to the function as a String that we can then parse into a JSON object to query the data as an object.

// getting the Field we want from the JSON Data for the Row
var colData = jsonRowData.duedate_Value;

Here we read the ‘duedate’ property from the Row so we use this in a condition to determine whether to show the Row as either Green (okay), Amber (warning), Red (take action) or Grey (n/a).

// only attempt to parse the data if the field is not blank
if (colData != null) {
    // what do we want to do with the data
    // parse coldata into a Date Format we can analyse

    var targetDate = new Date(colData);
    targetDate.setHours(0, 0, 0, 0);
    // get the current Now Time
    var now = new Date();
    now.setHours(0, 0, 0, 0);

Here we have our ‘duedate’ as the targetDate to which we can compare to Now.

if (targetDate > now) {
    imgName = "crmcs_RowIcon_Green_16";
    tooltip = "Within Payment Terms"
else if (targetDate < now) {
    imgName = "crmcs_RowIcon_Red_16";
    tooltip = "Overdue"
else if (targetDate == now) {
    imgName = "crmcs_RowIcon_Amber_16";
    tooltip = "Due"
else {
    imgName = "crmcs_RowIcon_Grey_16";
    tooltip = "Not Sent Yet"

This then tracks the Image and Tooltip to use for the row – which the JavaScript function can then return:

var resultarray = [imgName, tooltip];

// pass back our calculation to affect Dynamics 365 accordingly
return resultarray;

This then results in the ‘imgName’ being displayed alongside the Column that we have set the Webresource for:


One point here – the image indicated by the ‘imgName’ passed back in the ‘resultarray’ must be a path to a known Webresource in Dynamics; so to implement this approach we must have uploaded 16x16 icons into our deployment of Dynamics as new Webresources.


When matched up, our Javascript Webresource indicates which Image Webresource to display for that row and so allows us to show either a Static or Dynamic Image for that Column – and so give a better User Experience for that View in Dynamics.

This can be particularly useful for Cases, Orders, Invoices or other ‘transactional’ entities that have Due Dates or other Action Dates when the transaction should be actioned by.

Useful Points

  • We can only retrieve Fields from rowData that are being shown in the View – as the data here is a view of the data that Dynamics is rendering out to the page.  So if we need a particular field for a RAG Calculation then we should ensure this Field is somewhere in the View and so available to the Javascript.

// parse the rowData into JSON format that we can query
var jsonRowData = JSON.parse(rowData);

// getting the Fields we want from the JSON Data for the Row
var dueDateStr = jsonRowData.duedate_Value;
var completeDateStr = jsonRowData.crmcs_paymentdate_Value;

  • Parsing rowData is ideally done via JSON but we still need to parse from String into the Format we want to work with the data in – so in the above example, formatting into a DateTime but this can be formatted as an Int or Guid for OptionSet or Lookup fields respectively.
  • We should be careful with how much Javascript we load onto the View via the Column Webresources – as effectively every Row being displayed is calling out to this Javascript and so any slower processes will degrade the performance of the View.  I would not recommend any calls out to a Webservice or the Dynamics oData Service at this row-by-row level, but if these need to happen then we should be sure to invoke any such logic Asynchronously to avoid performance slowdown.

Solution Download

If useful to your Dynamics Project, the Icons and Scripting outlined above can be downloaded freely here:

Further Reading

Being both a new feature in Dynamics 365 and a long requested addition to functionality in CRM, this feature has plenty of reading in Blogs and TechNet articles for further reading:

Display custom icons instead of values in list views

Dynamics 365 – Icons in Views

View Customisation with Javascript in Dynamics 365

How to Setup Tooltips and Icons in Microsoft Dynamics 365 Custom Views

Prefer to go old-school?

Write to us using the below addresses.

Head Office
CRM Consultancy
61 Oxford Street
M1 6EQ

London Office
CRM Consultancy London
Grosvenor Avenue

Content © CRM Consultancy.