View Customization With JavaScript In Dynamics 365

In Dynamics 365, now you can even use JS scripting in Views to add icons in the view cells.

What is offered?


As you can see in the above image, those icons in View cells were already available in some OOB Views. Now, you can use it in custom View as well.

Where to customize?



Goto any View’s property, you can see 2 new fields - Web Resource and Function Name, very similar to forms when you write JS.

What to write in Web Resource?

You need to write a JS function with 2 parameters, when you’ll add it to view, first parameters will receive rowData(value with metadata shown below for one cell) and userLCID(i.e. language code of the current user). Based on those 2 inputs, you can decide what icon to show. And the name of this function goes in Function Name: field in View’s property.

/// rowData for just one cell
{
   "RowId":"{B69E62A8-90DF-E311-9565-A45D36FC5FE8}",
   "RowType":"112",
   "title":"Average order shipment time",
   "title_Value":"Average order shipment time",
   "ticketnumber":"CAS-01213-P8B3X0",
   "ticketnumber_Value":"CAS-01213-P8B3X0",
   "prioritycode":"Normal",
   "prioritycode_Value":2,
   "caseorigincode":"Web",
   "caseorigincode_Value":3,
   "customerid":"Litware",
   "customerid_Value":{
      "Data":{
         "Type":1,
         "Name":"Litware",
         "ID":"{BCA19CDD-88DF-E311-B8E5-6C3BE5A8B200}",
         "Dsc":0
      },
      "NeedsIconRendering":false
   },
   "ownerid":"Christa Geller (Sample Data)",
   "ownerid_Value":{
      "Data":{
         "Type":8,
         "Name":"Christa Geller (Sample Data)",
         "ID":"{C02D43FF-16A8-4E1E-8DD1-0B78EB058AB4}",
         "Dsc":0
      },
      "NeedsIconRendering":false
   },
   "statecode":"Active",
   "statecode_Value":"Active",
   "createdon":"1/21/2017 4:20 AM",
   "createdon_Value":"2017-01-21T04:20:45+00:00",
   "processid":"{0FFBCDE4-61C1-4355-AA89-AA1D7B2B8792}",
   "processid_Value":"0ffbcde4-61c1-4355-aa89-aa1d7b2b8792",
   "processts":"424505",
   "processts_Value":null,
   "processid_Hidden":"0ffbcde4-61c1-4355-aa89-aa1d7b2b8792",
   "processts_Hidden":"424505"
}

Let’s Implement!

I’ll be doing all the customizations in "All Cases" view of Case entity. So, you can try it right away in the new trial instance without creating any custom Entity/View.

Add one JS web resource

And write the below code in it.

function casePriorityIcons(rowData, userLCID) {
  var data = JSON.parse(rowData);
  var priority = data.prioritycode;
  var imgWebResource = "";
  var imgTooltip = "";
  switch (priority) {
    case "High":
      imgWebResource = "ashv_high";
      imgTooltip = "High Priority Case";
      break;
    case "Low":
      imgWebResource = "ashv_low";
      imgTooltip = "Low Priority Case";
      break;
    default:
      imgWebResource = "ashv_normal";
      imgTooltip = "Normal Priority Case";
      break;
  }
  return [imgWebResource, imgTooltip];
}

In the above code, I’m reading the cell data which is priority field of a case, and according to value, it will show color icon in front of it. I have added three 16x16 (if you’ll take different size it will be scaled back to 16x16, so better take optimized size) icons with color Red, Yellow, & Green for High, Normal, & Low priorities respectively. The function returns an array of size 2; the first element tells the name of image web resource to show and the second is tooltip text. You can use the below images in your web resource.

High :

Normal :

Low :

I’ve set the Web resource and function name in "All Cases" view property for Priority field.

Publish everything and navigate to "All Cases" view.

Hooray! It’s working! I didn’t play anything with the second parameter, i.e., LCID. You can explore use cases and try.

Looks good, but what happens behind the scenes is - All this magic happens in layout XML of View you can see below.

<?xml version="1.0" encoding="UTF-8"?>
<grid name="resultset" object="112" jump="title" select="1" icon="1" preview="1">
   <row name="result" id="incidentid">
      <cell name="title" width="300" />
      <cell name="ticketnumber" width="125" imageproviderfunctionname="" imageproviderwebresource="$webresource:" />
      <cell name="prioritycode" width="150" imageproviderfunctionname="casePriorityIcons" imageproviderwebresource="$webresource:ashv_ViewCustomizations" />
      <cell name="caseorigincode" width="100" />
      <cell name="customerid" width="150" />
      <cell name="ownerid" width="150" />
      <cell name="statecode" width="150" />
      <cell name="createdon" width="150" />
   </row>
</grid>

Here, <cell name="prioritycode" width="150" imageproviderfunctionname="casePriorityIcons" imageproviderwebresource="$webresource:ashv_ViewCustomizations" /> got 2 extra attributes with the name of web resource and function. They set the image source and title while rendering the View (see image below). 

Feel free to get in touch with me to resolve any query regarding this article.