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

4 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

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s