Using grids/something for dynamically generated buttons

[Alan Smith]

I have a menu page on my app.

The menu page consists of buttons and their only function is to navigate to various pages on the app.

I want the buttons to be generated dynamically from a database. So if the user of the app has permission to visit a page, the button will be visible.

I have used lists to generate dynamic content from a database but I'm unsure on the best way to do this for buttons. I've read a bit about grids, but I cant seem to find any documentation about how you can do this dynamically.

Can you point me to some documentation or tutorial, or give me a a snippet of code to try and work this out for myself?

Thanks in advance

[Evgene Karachevtsev]

Hello Alan,

Here is written where and how you can map collection http://devcenter.appery.io/documentat...
Place the button into the grid and make the mapping as described here

[Alan Smith]

How will i add navigation to the button? If i had the page name in the database, how would i then add that to the button dynamically?

[Alan Smith]

Is there any documentation on this. If i was creating a dynamic navbar for example, how would I assign page navigation to that dynamic nav item?

[Yurii Orishchuk]

Hi Alan,

Here is a solution for your goals:

1. Add HTML component on the page. http://prntscr.com/515k16/direct

2. In HTML component properties set "Type" as "div". http://prntscr.com/515k85/direct

3. In HTML component properties set "Dimmensions" as "auto" and "auto". http://prntscr.com/515ku1/direct

4. Add Button component inside HTML component from 1st step. http://prntscr.com/515kjq/direct

5. Create mapping from your list service to HTML component. Like it shows on screen shot: http://prntscr.com/515luz/direct

6. Add to Button "click" event handler with following JS code: http://prntscr.com/515n9d/direct

   pre

   //Get current button page.
   var pageName = jQuery(this).text().trim();

   //Log this page to console(for debug reason).
   console.log("Navigate to '" + pageName + "' page");

   //Navigate to current page.
   Apperyio.navigateTo(pageName);

   /pre

   That's all.

   Regards.