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

Share this Article

Search Articles

Filter Articles

CRM Tech DocMan

Recent Articles

CRMCS Quick Start Guide: How To Produce a Microsoft Teams Live Event Dynamics 365 Marketing: Lead Scoring and Sales Acceptance Designing and Developing Microsoft Power Apps Portals Thank You for Attending CRMCS’ Webinar - Achieving B2B sales excellence with Dynamics 365 & Microsoft Teams Thank You for Attending Our Webinar - Achieving B2B sales excellence with Dynamics 365 & Microsoft Teams Webinar: Discover How CRMCS Have United Dynamics 365, SharePoint and Microsoft Teams To Create Sales Excellence Ignite your workflow by adding DocDrive365 to Office 365 The CRMCS guide to everything you need to know about integrating Teams with Dynamics 365 Saving Time By Keeping Documents In One Place TDE Database Encryption with On Premise Dynamics The Key to Successful Compliance in 2020 Part 2: Let’s get GDPR Compliant with Microsoft Power Automate Top 3 Essential Tips for Remote Working Dynamics 365 Marketing: Top 5 Best Features Dynamics Day in the Life - Puma Investments Can you use Teams to amplify collaboration in Dynamics? Part 1: Using a Scheduled Power Automate to Trigger Expiry Date Reminders The secrets of successful document collaboration in Dynamics CRMCS launches new AppSource approved DocDrive365 Dynamics Day in the Life - Moneypenny Release Management Add the App to Dynamics DocDrive365 Security: Day One - Getting Started with Dynamics to SharePoint Permissions Building a New Scheduled Process using Flow
  • "Paul has made a real difference to how my team of 24 people record and store valuable customer data and sales opportunities. Highly recommended."

    James, Operations Director

  • "Understanding your business allows us to advise when to implement aspects of CRM and, likewise, when not to."

    Paul McQuillan, Managing Director

  • "Dynamics 365 and CRMCS have made a real lasting difference to our business, allowing us to replace older systems that were holding back our performance."

    Grahame, Chief Operating Officer

  • "James worked well with us to help connect CRM with Outlook and relate how this might benefit our team using CRM for Property Care."

    Natalie, Property Care Supervisor

  • "Matt was really good with helping us run User Testing on the new Compliance Module of our CRM System."

    Tom, Compliance Administrator

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.