web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Community site session details

Community site session details

Session Id :
Customer experience | Sales, Customer Insights,...
Answered

Display Custom Icons in a View

(0) ShareShare
ReportReport
Posted on by 240

Hello, 

I have a requirement to display icons in a view. The field I am using is a Urgency option set with 4 values. 

1. I tried the JS method - uploading icons as web resources (tried with both 16x16 and 32x32). Used the JS from the link here - 

https://d365goddess.com/d365-ce:-adding-icons-to-views/

Is there anything we need to change in the code other than the var col_data. That would be equal to str.new_urgency_Value where (new_urgency) is the schema name of the field in the view where we want to show the icons. Is there anything else we need to change?

The icons do not show up. 

2. I also tried the PCF controls - imported the solution, configured the custom controls in the view, and assigned colors to each option in the classic editor. Even for this the icons/colored cell do not show up. For this - I followed this link https://github.com/brasov2de/ColorfulOptionsetGrid#customizing for instructions. 

I am using Dynamics 365 online. Does it matter which app this applies to? I am using the above two options for a custom entity.

Is there anything I am missing, or something I need to enable for the customizations to show?

Thanks, 

Aneeqa

I have the same question (0)
  • PhuocLV Profile Picture
    347 on at

    you can download and install solution at http://www.d365iconsandtooltips.com

    it very easy to use.

  • Suggested answer
    Community Member Profile Picture
    on at

    Hi,

    Here is the reference from Microsoft docs: docs.microsoft.com/.../display-custom-icons-instead

  • Aneeqa Pervaiz Profile Picture
    240 on at

    Hey Phuoc, 

    Thanks for the reply - but its not feasible for us right now. 

  • Aneeqa Pervaiz Profile Picture
    240 on at

    Hey Ossama,

    I have followed all instructions here, but it just does not work. I am wondering if it has something to do with LCID?  It is being used in the function, do we need to install something in the environment for this?

    Below is a snippet from the sample code. Can you please refer to the bold fonts and see if I am missing something?

    function displayIconTooltip(rowData, userLCID) {      

       var str = JSON.parse(rowData);  

       var coldata = str.opportunityratingcode_Value;  // Over here I just replaced the opportunityratingcode with the schema name of the field for which I want to show icons

       var imgName = "";  

       var tooltip = "";  

       switch (parseInt(coldata,10)) // do I need to change anything here??

           case 1:  

               imgName = "new_Hot";  

               switch (userLCID) {  

                   case 1036:  // is 1036 a random number??

                       tooltip = "French: Opportunity is Hot";  

                       break;  

                   default:  

                       tooltip = "Opportunity is Hot";  

                       break;  

               }  

               break;  

  • Suggested answer
    Community Member Profile Picture
    on at

    Hi,

    1036 is for French language.

    try to use 1033 for English LCID

    because I think you work with icons in french only

    just try this block in your code:

    case 1033:  

                      tooltip = "English: Opportunity is Hot";  

                      break;  

    for more info about lcid see this ref:

    docs.microsoft.com/.../6c085406-a698-4e12-9d4d-c3b0ee3dbc4a

  • Aneeqa Pervaiz Profile Picture
    240 on at

    Hey Ossama,

    Unfortunately it still did not work :/

    This is my final code.

    function displayIconTooltip(rowData, userLCID) {      
        var str = JSON.parse(rowData);  
        var coldata = str.new_urgency_Value; //new_urgency is schema name  
        var imgName = "";  
        var tooltip = "";  
        switch (parseInt(coldata,10)) { 
            case 1:  
                imgName = "new_Urgency1";  
                switch (userLCID) {  
                    case 1033:  
                        tooltip = "English: 1 (Schedule)";  
                        break;    
                }  
                break;  
            case 2:  
                imgName = "new_Urgency2";  
                switch (userLCID) {  
                    case 1033:  
                        tooltip = "English: 2 (Next Up)";  
                        break;   
                }  
                break;  
            case 3:  
                imgName = "new_Urgency3";  
                switch (userLCID) {  
                    case 1033:  
                        tooltip = "English: 3 (Normal)";  
                        break;    
                }  
                break;  
    		case 4:  
                imgName = "new_Urgency4";  
                switch (userLCID) {  
                    case 1033:  
                        tooltip = "English: 4 (Nonurgent)";  
                        break;  
                }  
                break;  
            default:  
                imgName = "";  
                tooltip = "";  
                break;  
        }  
        var resultarray = [imgName, tooltip];  
        return resultarray;  
    }  

    I am wondering if we need to check with the value of the option rather than the text? Also in the switch (parseInt(coldata, 10)) ,

    is the number 10 supposed to be column of the view where the code is being applied?

    Would appreciate the reply here. 

    Thanks. 

     

  • Verified answer
    Community Member Profile Picture
    on at

    Hi,

    the I think that the parseint in your code not nessecary

    check this: d365goddess.com/.../

  • Aneeqa Pervaiz Profile Picture
    240 on at

    Hey Ossama,

    I removed the parseInt, followed the link exactly and still ended up with nothing :/

    function new_UrgencyIconJS(rowData, userLCID) {      
        var str = JSON.parse(rowData);  
        var col_data = str.new_urgency_Value;  
        var imgName = "";  
        var tooltip = "{"   col_data  "}";  
        switch (col_data) { 
            case 1:  
                imgName = "new_Urgency1";  
                tooltip = "1(Schedule)";  
                break;    
                 
            case 2:  
                imgName = "new_Urgency2";  
    			tooltip = "2(Next Up)";  
                break;   
                   
            case 3:  
                imgName = "new_Urgency3";   
                tooltip = "3(Normal)";  
                break;    
     
    		case 4:  
                imgName = "new_Urgency4";  
    			tooltip = "4(Nonurgent)";  
                break;  
                }     
        var resultarray = [imgName, tooltip];  
        return resultarray;  
    }  

    What could be the missing item here?

  • Community Member Profile Picture
    on at

    Did you publish the icons?

    check the width of your column and publish the entity of this view

  • Aneeqa Pervaiz Profile Picture
    240 on at

    Hey,

    So turns out that the case number had to be the option value. case 1000001 for example. I tried it with the case number in place and I can see the icons now :)

    Thanks for the help Ossama.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Stars!

Congratulations to our 2025 Community Spotlights

Thanks to all of our 2025 Community Spotlight stars!

Leaderboard > Customer experience | Sales, Customer Insights, CRM

#1
Tom_Gioielli Profile Picture

Tom_Gioielli 50 Super User 2026 Season 1

#2
Eugen Podkorytov Profile Picture

Eugen Podkorytov 49

#3
Fiona_Tiernan Profile Picture

Fiona_Tiernan 22 Moderator

Last 30 days Overall leaderboard

Product updates

Dynamics 365 release plans