Incorporate Custom Icons with Tooltips into a Grid Column

Adding custom icons to your subgrid not only makes the experience more interactive and enjoyable but also leverages the adage “a picture is worth a thousand words” by enhancing the user interface to be more engaging and informative. A notable feature of Dynamics allows for the conditional inclusion of custom icons, which adds a dynamic visual element to user interactions.

However, it’s important to note that this feature is not compatible with the new PowerApps designer and can only be configured using the classic designer. To begin, create all necessary images as web resources within the Dynamics solution you are working on. For illustration, I’ll use a red flag to indicate an overdue task and a green flag for tasks that are on schedule. The resources needed for this setup include:

• Two image web resources: cds_flag_red and cds_flag_green.
• One JavaScript web resource: task.js.
• One view titled “All Open Tasks”.

Set up the following code as a task.js web resource.

function handleDisplayDueIcon(rowData, userLCID) {   
    var str = JSON.parse(rowData);  
    var scheduledEndDate = new Date(str.scheduledend_Value);
    var today = new Date();
    var coldata = 2;
    if (scheduledEndDate < today) {
        coldata = 1;
    }

    var imgName = "";  
    var tooltip = "";  
    switch (parseInt(coldata, 10)) { 
        case 1:  
            imgName = "cds_flag_red";  
            switch (userLCID) {  
                default:  
                    tooltip = "Task is overdue";  
                    break;  
            }  
            break;  
        case 2:  
            imgName = "cds_flag_green";  
            switch (userLCID) {  
                default:  
                    tooltip = "Task is in control";  
                    break;  
            }  
            break;          
        default:  
            imgName = "";  
            tooltip = "";  
            break;  
    }  
    var resultarray = [imgName, tooltip];  
    return resultarray;  
};

Continue by opening the “All Open Tasks” view in the classic designer. Click on the “Subject” column and choose “Change Properties.” In the “Web Resource” section, select the JavaScript web resource named task.js. For the “Function Name,” enter handleDisplayDueIcon as shown below.

After making the changes, save and publish your view. Additionally, perform a ‘Publish All’ to ensure all your modifications are fully applied across the system. Once completed, you will see the end result as described below.