Tuesday, 26 December 2017

Dynamics CRM - Dynamically change row color in grid view



















Sometimes we get requirements for visually appealing representation of data in CRM Grids.
Like, we have to cater to requirements like “High” Priority cases should appear in “Red” color, or like high gross revenue opportunities should appear highlighted in the Grid.

In this article, we will show grid rows of Qualified Leads in Green Color, Lost or Disqualified Leads in Red color and Newly created Leads in Yellow Color

Step 1: Create a web resource of JavaScript Type and paste the below code under Text Editor.

    function showLeadStatus(rowData, userLCID) {

    if (rowData == null || rowData == 'undefined'return;

    // read rowdata
    var str = JSON.parse(rowData);

    // get leads status
    var coldata = str.statuscode_Value;

    //get row/record guid
    var rowId = str.RowId;

    if (coldata == null || coldata == 'undefined' || coldata.length < 1) return;

    switch (coldata) {

        case 4: //if 'Lost
   
            // This is the way to get the whole row
           // This syntax might get changed in your case based upon requirement
           // First you need to find the 'td' tag (by doing F12 in gridview) based on the attribute you want to color the grid view
           // For Example, here I am using lead status field (statusreason) and the 'td' of 
status reason  field is span that is why I have used span to get the 'td' then used the 'closest' method to get the 'tr' of that 'td' in order to make the row colorful

            $('span:contains("Lost")').closest('tr').css('background-color', 'coral')
            $('span:contains("Lost")').closest('tr').css('color', 'white')
 
            break;

        case 3: //if 'qualified':

            $('span:contains("Qualified")').closest('tr').css('background-color', 'greenyellow')
            $('span:contains("Qualified")').closest('tr').css('color', 'white')

            break;

        case 1: //if 'new':

            $('span:contains("New")').closest('tr').css('background-color', 'yellow')
           
            break;

        default:
          
            break;
    }

}

























Step 2: Open 'All Leads' view and mention the web resource and function name. I have selected Status Reason field because we have to perform the logic based on Lead Status value.



























































Step 3: Save and Close the View. Publish the Entity to see the changes.















Cheers ✌

9 comments:

  1. Hello,
    do you know if th same issue is possible in Unified Interface ?
    Currently a line like "$('span:contains("New")')" doesn't work in new interface.

    Tanks

    Jerome

    ReplyDelete
  2. Hello,
    I tried this exactly same and it is not working.Any idea what could have gone wrong? Thanks

    ReplyDelete
  3. Hi,
    is there a way to change row color for editable grid views?

    ReplyDelete
  4. Hi Arpit,

    could you please post the modified code for UCI editable grid ?
    Your code seems to be working fine in web client.
    Thanks for your time

    ReplyDelete
  5. Hi Arpit,

    Could you help me? I tried to apply everything in from above but nothing happens when I tried to open the view. Is there limitations on this? did I missed any triggers that not mentioned on this blog? Please help.

    ReplyDelete
  6. certainly like your website but you need to check the spelling on quite a few of your posts. Many of them are rife with spelling issues and I find it very bothersome to inform the reality on the other hand I’ll certainly come back again.
    application of hospital management system

    ReplyDelete
  7. Any one have managed to do the same for UCI?

    ReplyDelete
    Replies
    1. Cause UCI powered by React, you can use only microsoft provided features.
      I know only one similar way to make rows looks different:

      https://docs.microsoft.com/en-us/dynamics365/customerengagement/on-premises/customize/display-custom-icons-instead

      Dont forget install LCID package if you on-premise.

      Delete
  8. This comment has been removed by the author.

    ReplyDelete

Blogger Widgets