Display Custom Icons in a View

(0) Share

Report

Posted on by Aneeqa Pervaiz

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

All responses (10)

Answers (1)

Aneeqa Pervaiz 240 on at

Like (0)

Report

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 Microsoft Employee on at

Like (0)

Report

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 240 on at

Like (0)

Report
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 Microsoft Employee on at

Like (1)

Report

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 240 on at

Like (0)

Report
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 Microsoft Employee on at

Like (0)

Report

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 240 on at

Like (0)

Report

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 240 on at

Like (0)

Report

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 Microsoft Employee on at

Like (1)

Report

RE: Display Custom Icons in a View

Hi,

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

Like (1)

Report

RE: Display Custom Icons in a View

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

it very easy to use.