Dynamics 365 – Icons in Views

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;

1. Create some image Web Resources.
   
2. Create an optionset.
   
3. Create JavaScript Web Resource.
   
4. 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.

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