Custom icons not showing in list views

Custom icons not showing in list viewsFollow
Kristy Wilhelm
Kristy Wilhelm29 days ago
Has anyone ever had any luck with getting custom icons to display alongside values in a list view? My …
1. Custom icons not showing in list views

Kristy Wilhelm
Posted 29 days ago
Has anyone ever had any luck with getting custom icons to display alongside values in a list view?

My inspiration is this article: https://learn.microsoft.com/en-us/power-apps/maker/data-platform/display-custom-icons-instead

I have tried this for my own custom column by adding web resources/scripts by the same rules listed in the article, and I can’t seem to get an icon to appear. My images are 16×16, my column has plenty of free space width-wise, and I’ve tried changing my option value numbers to smaller numbers.

I even tried doing these exact steps to add an icon to the Opportunity Rating column like they did, and I still only see text.

Any tips would be appreciated!

 

——————————
Kristy Wilhelm
Customer Engagement Administrator
Wenger Manufacturing
Sabetha, KS
——————————

2. RE: Custom icons not showing in list views

Jason McAndrew
Posted 26 days ago
Hi Kristy,

I have had success with displaying icons on view columns, however they can be tricky to debug when running into issues.

Recently i opted to move away from this approach in favour of something much simpler, which could also work for you.

You can include emoji’s in the label of your choice column. This site has a huge amount to choose from. 📙 Emojipedia – 😃 Home of Emoji Meanings 💁👌🎍😍

If this is not suitable I’d be happy to take a look at your code.

 

——————————
Jason McAndrew
D365 Admin / Dev
Sheffield, UK
——————————

 

3. RE: Custom icons not showing in list views

TOP CONTRIBUTOR
Donal McCarthy
Posted 26 days ago
You can use native Windows emojis in choice and calculated columns.
Click Windows 🪟 . (fullstop) to open the selector.

 

——————————
Donal McCarthy
BrightWork 365 Solution Architect
BrightWork
Galway
——————————

 

4. RE: Custom icons not showing in list views

SILVER CONTRIBUTOR
Jeff Orris
Posted 26 days ago
Hi Kristy,

May you post the javascript code?

Regards.

 

——————————
Jeff Orris
Jeffrey Steven Orris – Independent Consultant
Harrisburg
——————————

 

5. RE: Custom icons not showing in list views

Kristy Wilhelm
Posted 26 days ago
Edited by Kristy Wilhelm 26 days ago
Thank you all for your tips! I had not tried the emoji addition yet, and I just got that to work. I’ll have to see if the end users like any of the emoji options available for Trending Up/Down.

Just out of curiosity, here is the latest JavaScript code I have tried. I had tried verbatim what the Microsoft article had and couldn’t get it to work, so I started looking at other user posts with slightly different code.

Name of my choice column is new_Trending. Images are saved as PNG files. I also tried adding .PNG in the parenthesis below.

function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var col_data = str.new_Trending_Value;
var imgName = “”;
var tooltip = “{” + col_data +”}”;

switch (col_data) {
case 1:
imgName = “wen_NeutralTrend”;
tooltip = “Neutral”;
break;
case 2:
imgName = “wen_UpTrend”;
tooltip = “Up”;
break;
}
case 3:
imgName = “wen_DownTrend”;
tooltip = “Down”;
break;
}
var resultarray = [imgName, tooltip];
return resultarray;
}

 

——————————
Kristy Wilhelm
Customer Engagement Administrator
Wenger Manufacturing
Sabetha, KS
——————————

 

6. RE: Custom icons not showing in list views

Jason McAndrew
Posted 25 days ago
Hi Kristy,

Glad the emoji solution worked!

There shouldn’t be a problem with the images saved as PNG’s and you don’t need to include .png in the imgName.

I have a look at your code and spotted an extra } that shouldn’t have been there and also removed the final break; in the switch as it’s not needed. Everything else looks fine.

Just make sure in col_data you are using the logical column name and not the schema name.

Here is the code with the adjustments.

function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var col_data = str.new_Trending_Value;
var imgName = “”;
var tooltip = “{” + col_data + “}”;
switch (col_data) {
case 1:
imgName = “wen_NeutralTrend”;
tooltip = “Neutral”;
break;
case 2:
imgName = “wen_UpTrend”;
tooltip = “Up”;
break;
case 3:
imgName = “wen_DownTrend”;
tooltip = “Down”;
}
var resultarray = [imgName, tooltip];
return resultarray;
}

 

 

——————————
Jason McAndrew
D365 Admin / Dev
Sheffield, UK
——————————

 

7. RE: Custom icons not showing in list views

SILVER CONTRIBUTOR
Jeff Orris
Posted 24 days ago
Hi Kristy,

It looks like you are on the right path if not have solved it already but may we grasp the following declaration? I don’t see this initialized anywhere…

var str = JSON.parse(rowData);
var col_data = str.new_Trending_Value;
What does values in “col_data” mean? I see this referenced at the top of the function but the case statements reference “wen_UpTrend” for example. If the scripts have been unit tested and supposed to work, may you ensure the function call is enabled in the web resource? Sometimes the answer is so simple we need to just check a checkbox or something.

 

 

——————————
Jeff Orris
Jeffrey Steven Orris – Independent Consultant
Harrisburg
——————————

 

8. RE: Custom icons not showing in list views

Kristy Wilhelm
Posted 24 days ago
Edited by Kristy Wilhelm 24 days ago
So I removed the extra brackets like you said @Jason McAndrew , and still had the same result. This is my column I am working with.

Then I saw your post @Jeff Orris . I am not a JavaScript wizard in the slightest…. but I opened up the developer tools in my web browser and pasted my code in the console. The result was “undefined”.
I modified my script to look like this, so I could see what col_data was returning as in variable tooltip by default:

function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var col_data = str.new_Trending_Value;
var imgName = “”;
var tooltip = “{” + col_data + “}”;
switch (col_data) {
case 1:
imgName = “wen_NeutralTrend”;
tooltip = “Neutral”;
break;
case 2:
imgName = “wen_UpTrend”;
tooltip = “Up”;
break;
case 3:
imgName = “wen_DownTrend”;
tooltip = “Down”;
break;
default:
imgName = “wen_Blank”;
}
var resultarray = [imgName, tooltip];
return resultarray;
}

I am now being returned the wen_Blank image and the tooltip result that came back was “undefined”. I also tried putting a parseInt in front of the col_data and it returned a tooltip of “NaN”.

After I created my new column, I ran a power flow to update this new column in all Opportunities in my table. This is the data I see in the Trending column in the table…

 

 

——————————
Kristy Wilhelm
Customer Engagement Administrator
Wenger Manufacturing
Sabetha, KS
——————————

 

9. RE: Custom icons not showing in list views

Jason McAndrew
Posted 23 days ago
Edited by Jason McAndrew 23 days ago
Hi Kristy,

I tested the code this morning at it’s working as expected. The only issues i can think of are;

– The column name is incorrect in the col_data variable
– The web resource names are incorrect in imgName

When editing your column go to advanced options and use the logical name instead of schema name.

On the image web resources use the full name not the display name.

Also make sure the function name is correct when adding the web resource to the view column.

 

You can debug the code in Dev Tools, i use Edge or Chrome.
– Open the view in your app
– Launch Dev Tools
– Sources
– Ctrl + P enter web resource name to open file
– Then add breakpoints to each line of code you wish
– Refresh the view to step through the code

Here is the working code for you to compare against yours.

function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var col_data = str.cr817_claimstatus_Value;
var imgName = “”;
var tooltip = “{” + col_data + “}”;
switch (col_data) {
case 648930000:
imgName = “new_Warning-Message-16-Green.png”;
tooltip = “Open”;
break;
case 648930001:
imgName = “new_Warning_Message_16_Amber.png”;
tooltip = “Pending”;
break;
case 648930002:
imgName = “new_Warning-Message-16-Red.png”;
tooltip = “Closed”;
break;
default:
imgName = “”;
}
var resultarray = [imgName, tooltip];
return resultarray;
}

——————————
Jason McAndrew
D365 Admin / Dev
Sheffield, UK
——————————

 

10. RE: Custom icons not showing in list views

Kristy Wilhelm
Posted 23 days ago
It’s always the simplest things, right? The logical name has a lower case t for trending. That’s it….. that fixed it.

Thank you so much for all your help! I’m relatively new to this D365 world, so it has been a big help getting some different ideas and perspectives!

 

——————————
Kristy Wilhelm
Customer Engagement Administrator
Wenger Manufacturing
Sabetha, KS
——————————

 

11. RE: Custom icons not showing in list views

Jason McAndrew
Posted 23 days ago
Brilliant glad you got it working!

We all start somewhere, i remember being stuck for days on end when i first started out but eventually things click and it gets easier.

 

——————————
Jason McAndrew
D365 Admin / Dev
Sheffield, UK
——————————