Show icon based on database value

[Adrian Stoch]

Is it possible to show a master-detail list where images (icons) are used to represent database values in the list. For example:
database value 1 = smiley face
2 = sad face
3 = questioning face
4 = kissing face etc.

Thanks in advance

[Alena Prykhodko]

Hello Adrian,

1 Add (list/read/query) database service to the page.

2 Click "Edit mapping".

3 Make mappings in accordance to your needs.

4 Link some response parameter to image component asset and click "Add JS".

5 Populate it with following code:

prevar src;

if(value == 1)
src = "http://domain.com/smileyFace.png";

if(value == 2)
src = "http://domain.com/sadFace.png";

if(value == 3)
src = "http://domain.com/questioningFace.png";

if(value == 4)
src = "http://domain.com/kissingFace.png";

return src; /pre

[Adrian Stoch]

Thanks for the response Alena. I do have a quick simple follow up question please. In the JS, can I refer to images that I have uploaded to source web_resources?

If so, how would I do that?

[Alena Prykhodko]

Should be like codesrc = "/files/resources/image/kissingFace.png&quot/code

[Adrian Stoch]

Thanks again Alena. Sorry for being so slow, and for being such a beginner at this, but I cannot get the JS to work.

Here is the mapping:
I map the 'Category' field from the collection to the 'Category' image component.

Then here is the JS, where I am trying to use the value of the Category field in the collection to determine which image to show.

[Adrian Stoch]

I just realized that 'C' in category in the JS needs to be capitalized. But still doesn't work.

[Evgene Karachevtsev]

Hello Adrian,

You should use a variable value instead of category in the conditions.
Like this:
pre....
if(value == 'Humor')
.../pre

[Adrian Stoch]

Thanks Evgene, but I still can't get it to work.

2 questions please:

1. Where the initial guidance stated:
   Add (list/read/query) database service to the page.
   Am I supposed to be adding all 3 services to the page and then invoking all 3 services?
   If so, which service(s) should I be mapping?

2. Where you say "use a variable value instead of category..." how is value being set?

   Thank you

[Maryna Brodina]

Hello!

1) No, use one service you need.
2) When you add code in mapping, it this code in value variable will be mapped value.

[Adrian Stoch]

Thanks Maryna, that helped a little and I've been able to narrow down the issue and it has something to do with the image itself.

I say this because when I map the collection field to a label with the JS, it works. But when I change the component to an image it does not work.

This works:
When I map the collection field to a label and use this JS:
var src;
if (value == 'Advice') src = "Help";
if (value == 'Dispute') src = "Argue";
if (value == 'Humor') src = "Funny";
return src;

But this does not work:
When I map the collection field to an image component and use this JS:
var src;
if (value == 'Advice') src = "/files/resources/image/Help.gif";
if (value == 'Dispute') src = "/files/resources/image/Argue.gif";
if (value == 'Humor') src = "/files/resources/image/Humor.gif";
return src;