Forum | Appery.io

I noticed that, when mapping the response from a service to a screen, there appears to be a HUGE amount of limitation. For example, what if I want to map a width to a grid, or an image? This doesn't appear to be possible.

How would I go about doing something like this? Is there a way to add more options/expand the element in the mapping interface to include more element attributes (rather than, for example, "asset" and "visible")

Thanks!

Hi Nathanael,

Appery doesn't have such feature embedded. You can create JavaScript function instead and use it in the mapping.
Response parameters data will be sent to the function. Then you'll be able to set any custom logic using JavaScript code.

Hmm, that's disappointing.

With that considered, how would you recommend I achieve what I am trying to do? I have a grid which is looping through a JSON response that contains various poll options. That response contains a "width" value (a percentage) that is supposed to resize another grid element, which is contained in the loop. This second child grid has a background, and simply serves as a bar that visualizes the distribution of votes for the poll.

The problem is, as far as I can tell, custom JavaScript that is tied to a response is run BEFORE the screen loads. This is problematic, as I need to modify a part of the screen itself—in this case, the width of a grid element. I suppose I could hypothetically store each of these widths in separate local storage variables, and then when the screen loads, run some custom JavaScript that reads those variables, and resizes the grid based on the respective variable's value. However, I'm not sure how I would target each unique grid.

Am I missing something? Or do I actually need to create a ton of local storage variables, and then use jQuery to target each grid element on the page, and loop through those while reading the individual local storage variables?

There has to be a better way!

Any chance you can post sample JSON response and a screen shot of the how the result would look in the UI?

Here's an example JSON response.

precode{
"question":"Red + Green = ?",
"options":[
{
"id":"1",
"option":"Gray",
"correct":"0",
"percent":"22%"
},
{
"id":"2",
"option":"Yellow",
"correct":"1",
"percent":"88%"
},
{
"id":"3",
"option":"Brown",
"correct":"0",
"percent":"0%"
}
]
}/code/pre

Here's what my mapping page looks like, along with explanation of my goal.

If this is not possible, how can I achieve the same effect with JavaScript?

Hello!

In this JS transmitted not just value, but the link to element in "element" parameter also. With that element you can do anything you want, for example set width, background etc. Please note that width = 0% can be ignored. That's why the final code should look something like this:

codeif (value == '0%') {
value = '1px'; //just for a scratch bar, or you can set value = '0px' for empty bar
}
element.css({"width": value, "background": "#ff0000"});/code

Add JS in mapping (click Add JS button for quiz_bar)

Ahh, Marina! That's exactly what I was looking for. I didn't realize you could access the element like that, nor was I aware that you could even modify the screen at all prior to it loading.

Thanks a lot!