View Customization With JavaScript In Dynamics 365

Ashish Vishwakarma

8y53.3k11100Article

JavaScript Dynamics 365View Customization with JavaScript

11 Comments

Join the conversation! Your thoughts help the community grow.

Vijaya2y ago
Thanks for this article. A quick question.. Can I apply custom filter to the list view? If so, I'm not sure how to apply the fetch to cusrren list view control, Any help would be greatly appreciated!
Vijaya2y ago
Hi Ashish,
Suraj Revankar2y ago
Can we add a click event in these icons... I need to open a side pane
lemursolution3y ago
Very useful. It has worked for me using other fields, but I would like to know how you have obtained the JSON of the row dataThanks a lot
Dave Storey6y ago
Thank you for this. Excellent!
Christian Fanning6y ago
Is there anyway to remove the text from the column and only have the icon showed?
- Ashish Vishwakarma6y ago
  This is not possible currently, we can only set image and tooltip using Js
Christian Fanning6y ago
Great Article, thanks :-D
Fernando Aramendi8y ago
I would like to use the option to call a JS function to calculate a value from the data base using a fetch and returning a scalar value.... is that possible?
- Ashish Vishwakarma6y ago
  Return type of function can only be an image webresource and tooltip, and executing fetchXml could be tricky but you may give it a try.
Sagar Pandurang Kap8y ago
Nice one.What is microsoft 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.