Forum | Appery.io

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

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

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?

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

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.

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

Hello Adrian,

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

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

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.

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;