How do I insert a dynamic list into a collapsible block content?

[Chris Fuller]

First, a little background for context:
I have a restaurant app which displays the restaurant's menu. On the back end, the menu consists of a collection called MenuItem, which has all the items on the menu (e.g., hamburgers, cheese sticks, sodas, ice cream, etc.). This MenuItem collection has a pointer to a separate collection called ItemType. ItemType is just a list of types, with values like 'Appetizer', 'Entree', 'Dessert', etc.

Next, my goal:
I want to have a collapsible block set with each ItemType value as a header, and under each header, a list component with all of the MenuItems that fall under that ItemType. I've mocked up a sample of what this might look like:

Now, here's what I've done so far:

1. I have created a collapsible set, with a webservice to populate the headers from the ItemType collection. It works as intended.

2. I have created a list, with a webservice to populate the list items from the MenuItem collection. It works as intended.

   Finally, my remaining challenge and the reason for this post:
   I tried dragging the list component into the collapsible block content, and when I test it, the collapsible block headers still show the ItemTypes correctly, but the content sections are empty. This implies that the webservice which was working outside of the collapsible set is now failing.

   I've tried e-mailing support, and so far, the majority of the responses have basically pointed me to the documentation for mapping to components. This documentation only shows how to map to a collapsible header. It doesn't show how to map to the content section.

   Can anyone point me in the right direction here? I can't find ANY documentation that addresses what I'm trying to do. Has anyone done this (or something similar) before? Any thoughts on what might be the solution?

   Thanks!
   Chris

[Illya Stepanov]

Hi Chris -

It works for me with this mapping structure:

It's could be some issue with your database data structure, so could you please share your app with us and describe the steps to reproduce it.

[Chris Fuller]

The above mapping only shows how to map the content, not the header and content. I can get both to work individually. The challenge is getting both to work at the same time, so that both the header and content are populated from the database.

As stated above, I had both working separately, but when I merged them into a single collapsible set, the content piece failed. I'm thinking this has to do with running two webservices to populate a single component.

To that end, I also tried creating a single webservice to provide both the header (ItemType) and the content (ItemName). I created a webservice to pull the menu item information, and included the item type via pointer reference in the webservice, so that the response structure looks like this:

Then, I mapped that webservice to the collapsible set like this:

When I run the test, however, it is clear that there is still an issue. All the data is there, but each menu item gets its own header, even though the item type is often the same:

Notice above, there are two appetizers, two entrees, etc. That's because we have entered two of each item type in the database as sample data, and each item is being given its own header, instead of all appetizers being listed under a single 'Appetizer' header, and all entrees being listed under a single 'Entree' header. Is there any way, using the webservice response structure shown above, to accomplish this? If not, is there another approach that would provide the desired output?

[Chris Fuller]

I have shared the app with Appery.io Support. The app name is Off-the-Table. To recreate the issue, please follow these steps:

1. Run the app in test mode, and you will see the login page.

2. Click the username and password fields in turn. Default admin credentials will populate in both fields.

3. Click 'Log In', and the restaurant search page will load.

4. Select a restaurant from the list. Any restaurant should work, as they all have similar test data populated in the database. The restaurant details page will load.

5. Click 'View Menu', and the menu page will load.

6. You should see two main components on this page: the collapsible set (which is the subject of this forum post), and a separate list component which is essentially a flat representation of the same data. This list element will be removed once we resolve the collapsible set issue.

   If anything else needs to be shared to give you the access needed to see the issue and identify the solution, please let me know. Thanks!

[Chris Fuller]

I think I may have a solution, but I'll have to test it to be sure. Hopefully, I'll have time to get it working tonight. Here's my plan:

1. Create a session storage variable, ItemType, as an object with two attributes: Type (string) and Items (array).

2. Create a session storage variable, MenuList, as an array of ItemType objects.

3. Use a webservice to populate the MenuList array with an object for each item type in the database. The Type attribute would be populated, but the Items array would not.

4. Use another webservice to populate the Items array with a list of MenuItem names for each Type listed.

5. The resulting MenuList structure would mirror my intended collapsible set structure, with a list of item types, each with its own list of associated menu items. I should just have to map this session storage variable to the collapsible set in order to get my intended results.

   Does this approach sound like it should work? Is there a simpler way to get the intended results?

   I'll try to implement this plan tonight if time allows, and post an update afterward.

[Maryna Brodina]

Hello!

To get structure like this https://d2r1vs3d9006ap.cloudfront.net... use mapping like this http://gyazo.com/436db08e32897c7e914b... where JS on b-mobilelistitem is the following preelement.text(value);/pre

[Chris Fuller]

Thank you for the response!

It looks like the mapping you've indicated matches the data structure I described in my last comment, where the menu items are listed in an array under the appropriate item type. The data is not currently in the structure, so I'll have to take the above steps to translate the data into a more suitable data structure, and then I will use this mapping to output to the collapsible set.

The challenge now is getting the data into that structure. I'll work on it as time permits and post the results later, hopefully tonight. Thanks again!

[Louis Adekoya]

Hi Maryna, suppose that based on your second screenshot, I want the text field of mobilecollapsblockheader_18 to show the value of a + b? How would I do this? I have tried various ideas I gleaned from this forum but none work. The last one I tried was to do return value + " - " + value.b; in the JS of the text field (a), but it just returns "a - undefined".

My actual fields are of course nit named a and b, I'm just trying to use your example.

[Serhii Kulibaba]

Hello Louis,
Does value object have children elements? It looks like a string not a json object

[Louis Adekoya]

Hi Segiy,

Thanks but I'm afraid I don't follow. Perhaps I should explain better what I want to do, using my own example.

I have a collapsible set and I want each header text of the collapsible set to display text from two service response fields, concatenated. The first response field is from one collection and the second is from a related collection. This is exactly like a and b in the screenshot above. My question is how can I get my header text to show a + b?