Navigation for Newbie

I am new to AppGyver but this is not my first rodeo and yet the whole thing is driving me nuts… please help!
I plan to have about 150 individual product pages.
I want to have a search bar that auto-completes the word as the user types and will then take them there when they click.
I also want a dropdown list of the choices available, again with a direct link to the relevant page.
Neither option sounds even remotely complicated and yet…
Is there a tutorial that I have missed that doesn’t just muddy the waters?

Hi,

that sounds doable! I wouldn’t recommend creating 150 individual pages, but instead create one product page and use a page parameter to pass the data of what product the user selects in the navigation, here’s more about passing data from one page to another

As for the dropdown list, I would imagine the dropdown list would have the product name as the label, and its id as the value, so you can pass the id as a page parameter to the product page.

As for the autocompleting search bar, this might be a bit trickier as I’m not sure if it’s possible to have the search bar suggest a completion while keeping the cursor at the point of typing :thinking: maybe the component searchable list or these instructions to create a search could help you in getting started!

Many thanks Cecilia! I am more than open to limiting the number of pages, but each product needs photos, 'phone numbers, URLs, note taking function, map link etc etc so I am imagining that all of this is beyond a page parameter. Is there another way around this? Does a lot of pages slow down functionality or bloat the app’s size?
I will follow up on your dropdown and search suggestions, but the searchable list component appears to do what I need, so thank you for that.

Hi,

In the case of the page parameter, I’m guessing you’re using some kind of database or variable to store all products? In the page parameter, you can pass e.g. an id of the product (or whatever property you want) to the individual product page, and with the help of that id you can find the selected product in the list of products, store that object into a page or data variable, and use its information to fill out all the details.

From the perspective of the user is there any advantage of this method over individual pages? I want all info to be stored locally- the app needs to work in places where wifi is spotty/non existent- so does a page populated via page parameter from a local database load faster or use less memory than 150 individual pages?

Well no not for the user, the app may be larger in size but I’m not sure how that effects performance speed.

The biggest advantage is for the developer, as the development time for using a page parameter will be a fraction compared to creating 150 individual pages. It also ensures unity so all pages look the same, and maintainability is easier because all changes will have to be made to just one page instead of updating all 150 of them. Also, if you add products to your database, you won’t have to create new pages, everything will be updated accordingly. But of course it’s up to you how to implement your app, I’m sure the end result will be the same in any case :slightly_smiling_face:

Many thanks! That does make a lot of sense

OK- I may be being thick here, but please bear with me- I create a client-side stored database with various fields: this seems reasonably straightforward, but how/where do I populate it? The tutorial seems to be all about the user populating it. Is there some secret tab that I have missed that shows the whole database like an excel spreadsheet? All help gratefully received!!

PLEASE can somebody explain how to populate a client-side database. The user will just have access to the records- they can’t write or change them. I cannot find documentation on how to create this database in the first place- maybe I am not looking in the right places? Surely this isn’t hard???

In the client-side database you’ll have to create the data within the app, there is no interface to manage the data through Composer directly. However, you can initialize the client side storage when you open the app for the first time:

  1. In the global canvas, add a Get Record/Get records node for your database after the App launch event. If it succeeds, then that means the app has been opened before and the database has been populated and no further actions are required. If the Get fails, then that means you are opening the app for the first time and the database is not populated.
  2. For the failing output of the Get node, you can add Create Record nodes to add the data you want into the client side storage.

Now every time a user open the app for the first time the data will be created into the database.

so there is no external database programme that composer can read? If I have to load all the info in the way you seem to be describing it would seem far easier and quicker to create individual pages for each item, and probably easier to update them in the future too… or did I miss something?

Ah I might have misunderstood your question, sorry! You can always use a REST API to bring in data from an external database and use that when online, and then set it to client side storage to make it available offline too. Here’s instructions on doing that , similar to what I described but way simpler. What database are you using to store your product info?

I think I’m going to go with individual product pages- the details rarely change, and when they do it can be part of a global app update. It is vital that the app will work even when there is no web connection, and load quickly no matter what. The database concept sounded interesting, but looks like trouble.

So… getting back to the dropdown menu. I create a list of Product Names with their individual Page ID as the Value and then… what? I don’t understand what anyone would use a dropdown list for if not to be able to choose something from the choices available on said list, so why isn’t it obvious how to get set this up???
To be clear:
-Dropdown has a list of products
-User chooses Product from the list and taps to go to that product’s individual page

You’ll have to set up the logic for what you want to do with it when the user chooses an option. First you’ll need to store the selected dropdown value somewhere, perhaps a page variable would be easiest. So create a variable, and bind it to the selected value of the dropdown. Then you might add a “go to page” button next to the dropdown and use Open page to navigate to the selected value stored in the variable.

Or you can add a Receive event node to track when the page variable changes, and immediately use open page to navigate to that page.

OK, thank you…but, I am afraid that I have to say at this point that I am really wondering how on Earth the underlying code could possibly be any more convoluted than appgyver! What does anybody ever use a dropdown menu for if not making a selection and then going to that selected spot- without messing about with an extra button! If you’re going to go to the trouble of creating a dropdown component wouldn’t it make sense to have it actually do the job as well? I don’t mean to vent or appear ungrateful… but…but… this is driving me nuts and makes not the slightest bit of sense!!!

specifically: the “open page” component seems to only bind to a fixed page ID, so I can’t work out how to get the “receive event” info to open anything else. Sorry!

I understand your viewpoint, it is frustrating to do something with a tool that doesn’t feel intuitive. And thanks for the feedback, with the help of our users we can really improve on the product to make it the best it can be, thanks for your patience! :slight_smile: there are many use cases for a dropdown, such as filling in a form or filtering a list, so that’s why the component has to be a bit flexible and not be set to one specific function.

As for the page ID you are correct, it seems to only allow you to bind to a page id and not a variable or formula, sorry that was a misunderstanding on my part. I believe it’s made so strict to avoid any mistakes in trying to navigate to a page that doesn’t exist, as that could crash your app. This is where having one product detail page and just passing the product info as a page parameter would be the ideal solution, whatever the dropdown choice is you’d always navigate to the same details page and just pass the product id as a parameter.

So I am abandoning the dropdown idea, and having a scrollable page of buttons instead, which appears to work.
Does this also mean that the whole “Search” idea is a non starter too?