Creating a search bar to search different pages

Question
1

I have created an app for EMS protocols. What I have essentially done is create a home page with a scrolling list of all the protocols, each list item will open a new page when pressed with a simple headline and the JPG of the protocol. Is it possible to set up a search bar to search the different pages and if so how would I implement this into the app.

2

Hi! Unfortunately implementing this will be quite bothersome at the moment, as we don’t have the pages available as a variable in the app :frowning: (we do have plans of making that available, but not sure when that will happen)

Since that’s the situation, there’s two options: either you have one page that would show all the other pages depending on the page parameter based on it (that is, all the page content is in containers or based on data and shown dynamically based on which page it should be and what data should be shown). Or the list item has a cascading structure of "if repeated.current.id == “should_go_to_page_X” nodes that each have a corresponding “open page” node…

Sorry I couldn’t provide a quick and neat way to do this, but I hope this helps!

3

Thanks for the reply! I am still pretty new to the whole coding thing. how would I go about the first option you suggested about the one page showing other pages?

4

Hi!

Showing and hiding components is done via the visibility property found in Properties > Advanced. For getting started, I recommend watching our App Programming 101 tutorial collection to get familiar how to use variables and bindings, as it will be important to get this to work :slight_smile:

Very rough guide to implementing this would be:

  1. Create “Protocol Page” to display all the protocols on one page. Add a page parameter for the page called “id” or whatever
  2. From the “home page with a scrolling list of all the protocols”, (hopefully you’ve repeated a variable for the protocols to make this list instead of creating each separately…) when a list item is tapped call “Open Page” flow function, open Protocol page and pass the id (or other identifying field from repeated.current if you had repeated a variable) of that protocol in the page parameter (“id”).
  3. On “Protocol Page”, based on the page parameter (“id”), show the data (and show/hide components if needed). Preferably fetch from API / app variable into a page/data variable and then show the contents of that data/page variable in components on the page.