Forum | Appery.io

Hi,
I am a little concerned with the functionality of the list item component in the interface when mapping rest services to the list items.

Following your tutorial:
Learn How to Build Mobile Apps in the Cloud with HTML5, jQuery Mobile, REST, and PhoneGap

I have created a new service and tested this and all is well I get the records returned in the test window as expected.

On the page I added a list and reduced the items to one removed the default text ‘item1’ and dropped a grid into the item adding a label to the list, I the attempted to add the mappings to the list item and labels as per your tutorial. I pulled the $ over the list and dropped this over the list name the interface mapped this to the visible property of the list and not the item itself and no matter what I did the mapping refused to follow the correct mapping structure! Is there a bug in the interface?

Regards,
Joe

Can you send me a link to the tutorial? Also, please post a screen shot of the mapping and which connection is not working?

Hi Max,

The tutorial is: https://www.youtube.com/watch?v=gF9qwM...

I had the list correctly mapped and changed the ui the mapping refused to work correctly after this although I have dismantled and rebuilt the ui since in an attempt to get the mapping right.

Thanks for your speedy response,
Joe

That connection is not valid as it maps an array to a single property. You can map any parameter inside the $ to that element. The $ has to be mapped to a component such as a grid or a list (iteration component)

Hi Max,
I can see that but in the tutorial the list has a grid component embedded and the list is mapped to the array the suggestion being that this extends the single item! This confuses! How do I populate a list of items in this fashion that allows me to access the extended information held in the array but presents the user with a clean scrollable list?

Thanks for your time,
Joe

Hi,

I have figured this out now! I have placed the items I want to display into a grid and have made some of the items invisible this fits in very well with what I require apart from the spacing(as in the uploaded image) which is taken up by invisible items in the grid, Is it possible to collapse these items so that the space between items is reduced?

Regards,
Joe

Hi Joe,
You cannot hide the invisible element or decrease the distance between the rows. But you can always add 'Run custom JavaScript' action to do this:
code$($('[dsid=grid2] tr')[1]).hide();/code
code$($('[dsid=grid2] tr')[1]).show();/code

In this sample code 'grid2' is a grid component name, '1' is a row's number, starting from 0.