GRID IMAGE: DISPLAYING IMAGES ON HOME GRID/SUB GRID COLUMN BASED ON FIELD VALUE

Have you ever encountered a business requirement which requires you to display some icons or images on home grid section or sub grid of an entity based on the value of a field? If yes, you are looking at the right article. The main aim of this article is to teach how to display custom images/icons beside a column on home grid section inside CRM based on the column fields value. Screenshot attached.

In the above screenshot, we are looking at ‘My active cases’ view inside case module. If you look at the left most column, there are some custom icons displayed in the grid beside the priority column. These icons are actually displayed based on the value of the priority field which is of type option set.

First step towards achieving this business requirement is to find appropriate images which suite the business requirement. Dynamics CRM platform has been so flexible to developer that you can upload images of type PNG format, JPG format, GIF format and ICO format as a web resource. Upload all the images which you intend to show on home grid or sub grid section inside CRM as a web resource. In our case, we have a priority field which is of type option set and wanted to display a unique icon for each option that we selected in a case record.

After successfully uploading all the required icons to CRM, the next step is to find a method using which we display the icons inside home grid section of an entity. We used java script to meet the business requirement. So I wrote a java script, uploaded it as web resource to CRM and attached the web resource to our desired field (Priority field in above case). Whenever we try to reload a form containing sub grid section or home grid, all the records displayed inside grid are refreshed thus triggered our java script which is written on ‘Priority’ field to execute.

The JS code is attached below:

function casegridimage(rowData, userLCID) {

    var str = JSON.parse(rowData);

    var coldata = str.prioritycode_Value;

    var imgName = "";

    var tooltip = "";

    switch (coldata) {

        case 1:

            imgName = "new_Image/true";

            tooltip = "Case Status is Succeeded";

            break;

        case 2:

            imgName = "new_Image/warning";

            tooltip = "Case Status is Warning";

            break;

        case 3:

            imgName = "new_Image/false";

            tooltip = "Case Status is Failure";

            break;

        default:

            imgName = "";

            tooltip = "";

            break;

    }

    var resultarray = [imgName, tooltip];

    return resultarray;

}

If you are using the above code to meet your own business requirement, please change the coldata variable as per your organization field schema data “str.schemaname_Value” where schemaname should be replaced with your field’s schema name. Since priority field is option set, the underneath metadata value of High option is 1, normal option set is 2 and low option set is 3. Therefore, we have three case statements to accommodate all the 3 options of priority optionset field. Inside a case statement, there is a variable imgName which should exactly match the schema name of the image corresponding to that option. Tooltip variable shows the respective statement, when you hover over the icon.

The above screenshot clearly depicts how to attach the newly created js web resource to priority column. Open the My active cases view from default solution, select the Priority column and click Change properties button. A new dialog box will appear from where you can select the desired web resource in Web resource lookup field. Save and publish the changes. From now on when you try to refresh or load any grid (home grid or sub grid) set to My active cases view, the web resource attached will execute and display respective icons relevant to priority field in the section.

PRECAUTION

Sometimes the above code may not work for some of your views. In that situation, try including a debugger in the code and debug using F12 developer resource of your browser. For the coldata variable in code, you might need to append a unique identifier as a prefix to it. You can easily sort out the solution once you are able to debug the code.