As I try out the new features available in Dynamics 365 I am creating blog posts to explain each one in turn. This time I am going to look at the ability to show icons in views.
The Microsoft example for this was to display a red, amber green status on an opportunity. I wanted to do something a little different! So, I have opted to show an icon if my contacts are male or female. (And an extra one for anyone whose gender is “unknown”!)
The steps involved are pretty simple;
- Create some image Web Resources.
- Create an optionset.
- Create JavaScript Web Resource.
- Link the JavaScript to a column in the view.
Step One – Create Some Image Web Resources
This is a simple step! The hardest part was finding the icons I wanted to use. I opted for png images that were 16×16 pixels.
Step Two – Create an Optionset
This step might be considered optional! I wanted to prove that this approach will work with custom fields. So, I created a new optionset on my contact entity that I called “new_maleorfemale”.
It had three options, “Male”, “Female” or “Unknown”. With values 1, 2, and 3 respectively.
Step Three – Create JavaScript Web Resource
Next I created a JavaScript Web Resource. I called mine “MaleOrFemale_JavaScript”. But you can use any name.
In my example, I have a separate JavaScript Web Resource for each column that I would want to show an icon on.
function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var col_data = str.new_maleorfemale_Value;
var imgName = "";
var tooltip = "{" + col_data +"}";
switch (col_data) {
case 1:
imgName = "new_Male";
tooltip = "Male";
break;
case 2:
imgName = "new_Female";
tooltip = "Female";
break;
default:
imgName = "new_MaleOrFemale";
tooltip = "Unknown";
break;
}
var resultarray = [imgName, tooltip];
return resultarray;
}
Note: In my example I am working in an environment with just one language available. English. If you wished to support multiple languages then the code can be adapted. (Example below.)
case 2:
imgName = "new_Female";
switch (userLCID) {
case 1036:
// ** French
tooltip = "Femelle";
break;
default:
tooltip = "Female";
break;
}
break;
Step Four – Link the JavaScript to a column in the view.
Finally I opened my active contacts system view and added my new “Male or Female” column to the view.
I then used the change properties option to set the web resource and function fields on the view. With the web resource field being the name of the JavaScript web resource I wished to use. And the function being the name of the function it contained.
POST UPDATE (2nd March 2019) …. I was asked if this approach works in the newer Unified Interface. I can confirm that it does. The only thing I did different was use a 32×32 icon! (Results shown below.)
I admit I initially found using this new feature quite fiddly! But that was simply because it was first attempt. I actually think this is a pretty simple type of change and one that I hope you agree will add an extra dimension to your views.
J
Leave a comment