Skip to main content

Notifications

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

  • Aneeqa Pervaiz Profile Picture
    Aneeqa Pervaiz 240 on at
    RE: Display Custom Icons in a View

    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.

  • Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Display Custom Icons in a View

    Did you publish the icons?

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

  • Aneeqa Pervaiz Profile Picture
    Aneeqa Pervaiz 240 on at
    RE: Display Custom Icons in a View

    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?

  • Verified answer
    Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Display Custom Icons in a View

    Hi,

    the I think that the parseint in your code not nessecary

    check this: d365goddess.com/.../

  • Aneeqa Pervaiz Profile Picture
    Aneeqa Pervaiz 240 on at
    RE: Display Custom Icons in a View

    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. 

     

  • Suggested answer
    Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Display Custom Icons in a View

    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
    Aneeqa Pervaiz 240 on at
    RE: Display Custom Icons in a View

    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;  

  • Aneeqa Pervaiz Profile Picture
    Aneeqa Pervaiz 240 on at
    RE: Display Custom Icons in a View

    Hey Phuoc, 

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

  • Suggested answer
    Community Member Profile Picture
    Community Member Microsoft Employee on at
    RE: Display Custom Icons in a View

    Hi,

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

  • PhuocLV Profile Picture
    PhuocLV 347 on at
    RE: Display Custom Icons in a View

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

    it very easy to use.

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

News and Announcements

Announcing Category Subscriptions!

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Verified Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,359 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,370 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans