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

6 thoughts on “Dynamics 365 – Icons in Views

  1. I really hope MICROSOFT will give a wizard like interface for that.
    it should be fairly easy : 1. choose column 2. choose distinctive value of that column (bit or picklist value) 3. choose image. 4. publish.
    very tedious work to go through web resources.

    Like

    • I can suggest a curve ball alternative approach! Simply have a text field and populate it with an emoji. You may even be able to have a calculated field to set the emoji you want to see. (So no code approach!)

      The JavaScript to decide the icon can only reference fields in the view. So you have to show both. Although this might not be a bad thing. In terms of accessibility. Say you have an icon for red, amber, green a common requirement. In this case you might also want to see the words red etc. As colour blind people would need the words!

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s