openBuild
  • Introduction
    • Introduction
    • The Framework
    • The Library
    • Release Notes
  • Core Concepts
    • Bubble vs openBuild
    • Responsive Design
      • Repeating groups
      • Advanced Responsiveness
    • Styles
      • Typography
      • Colors
      • Groups & Box Shadow
      • Inputs
      • Buttons
      • Style Variations
      • Changing styles
      • Custom CSS
    • Pages
      • index
      • base-menu
      • base-top
      • base-ribbon
      • base-mobile
      • admin
      • verify
      • styleguide
      • terms
      • login
      • reset_pw
      • privacy
      • 404
      • Menu
      • Base Layouts
  • WORKING WITH the framework
    • Getting Started
    • Navigation
      • Go to page
      • Navigation through custom states
      • Navigation through URL parameters
      • Navigation through URL parameters with Option sets
    • Data & Workflows
      • Custom States
      • Custom Events
      • Working with Reusables
      • CRUD
      • Source Popup
      • Backend Workflows
    • Users and Roles
    • Signup, Login, Password reset
    • Security & Privacy
      • Authenticating endpoints
    • Transactional Email
      • Setup Sendgrid
      • Setup Postmark
    • Alerts and Confirmations
    • Customization
    • Best Practices
      • Syntax
      • Color Coding
  • openBuild Library
    • Chrome Extension
  • Framework Elements
    • Menus
    • Option sets
    • Plugins
    • API Connector
    • User Access Management
    • CRUD Floating Group
    • CRUD Popup
    • Data Table
    • Security Redirect
    • Mail management
    • User Settings
    • Header & Footer
Powered by GitBook
On this page
  • 🧭 Navigation - Option Set
  • 🧭 NAVIGATION - Custom Event
  • 🧭 Element Display
  1. WORKING WITH the framework
  2. Navigation

Navigation through URL parameters with Option sets

A scalable way to handle navigation

PreviousNavigation through URL parametersNextData & Workflows

Last updated 2 years ago

🧭 Navigation - Option Set

Using the option set to navigate between pages and sections will help you build faster, avoid bugs and keep your app structure consistent. It also opens up a lot of possibilities around advanced navigation options such as in onboarding pages or more complex forms. It is our preferred means of navigation, especially in single-page apps.

By default, all across the template contain a in which you will find a 🧭 Source - Navigation group. It is connected to the 🧭 Navigation option set.

The simple structure contains two attributes: a) section and b) tab. The option has to at least have a Section filled for it to work properly.

Inside the 🧭 Source - Navigation group you find the following logic implemented:

If this 🧭 Navigation option's section matches the 'section' value that you we get from URL parameters and if this 🧭 Navigation option's tab matches the 'tab' value that we get from the URL then pick this Option.

Note that if for example, the 'tab' URL parameter is empty it will still match with an option that has the 'tab' attribute empty.

You can see the logic implemented in the image below:

Having two 🧭 Navigation options using the same 'section' and 'tab' values will create a conflict since the logic defaults to picking the first option that matches the criteria. If you have to use the same attribute values for the same 🧭 Navigation option (for example for different pages), you may want to create a new additional attribute called 'page' and add it to the filtering criteria.

🧭 NAVIGATION - Custom Event

On every page you will find a 🧭 NAVIGATION Custom Event. The when triggering this event you need to pass at least 🧭 Navigation option from the option set.

Because we use option set Bubble allows us to pick the option from the list when triggering this event.

In the Custom Event you will find a 'Go to page' action that will always send 3 parameters to the page.

  • section

  • tab

Multiple subsections

If your section structure has multiple subsections you have to remember that their parent section e.g Details C does not exist on its own. In other words at least one of the subsections has to always be visible. That's why the conditional on the Section itself will contain the logic to make this section visible if 🧭 Source - Navigation 🧭 Navigation option is 'tab a', 'tab b' or 'tab c'

You can find the following logic implemented in the admin page under Details C section in the openBuild template.

🧭 Element Display

Since navigating in the reusable elements is a bit different, in the template you will find a dedicated Option set specifically to use for Reusable elements, such as example CRUD Popup, CRUD Floating, Settings, and User Access Management.

🧭 Element Display option set has only two fields: display and text. The 'text' field is used in an action that gets triggered on page load (see explanation below).

For example, in the 👥 USER ACCESS MANAGEMENT reusable, the login section is visible by default. Adding the 'type=signup' parameter in the URL structure will change the section to the one that text matches the option set, in the case of 'signup' value it is going to be a signup section. You can see above that Option set 'Access - Signup' have 'signup' as 'text' field value.

👥 USER ACCESS MANAGEMENT reusable comes with a pre-build 'page is loaded' workflow. It triggers a custom event which then changes the section depending on if the URL key 'type' is not empty and there is an Option set that matches the 'text' field value.

Keep in mind that like with 🧭 Navigation logic, this action picks the first item from the list. If you have more than one Option having the same 'text' field value it will pick the first one on the list. If you find that limiting you can always add an additional attribute e.g. page and add it as an additional filter so you can use multiple Option using the same value.

We set that state on the top parent element. In our example its 👥 USER ACCESS MANAGEMENT. Here you can also set which section should be visible by default by changing the 'Default value' field.

The sections follow the basic conditional logic of being shown/ hidden depending the on the state of the Reusable.

Additionally, the 👥 USER ACCESS MANAGEMENT contains the 💡 CHANGE SECTION custom event which you pick the section you want to navigate to within that element

For information on the basics of working with Custom Events in Bubble.io, refer to the official .

UID - only used when navigating to a section or tab which requires data source. Read more about use of UID in the URL structure in .

All these parameters work automatically with allowing you for seamless transitions between sections and at the same time displaying the data that you need.

Using the 🧭 Element Display option follows the same logic as using . By default, the groups we want to navigate between are hidden.

documentation
this section
Source Popup
🧭 Navigation to navigate the pages
pages
Source Popup
🧭 Navigation Option set
Example 🧭 Navigation Option set - Admin/Section A
Filtering logic implemented
The section's conditional in referring to the 🧭 Source - Navigation Group 🧭 Navigation
Notice that UID is optional
Section with Tabs
Referring to the 🧭 Element Display state.
Because we use option set as a parameter you can pick the section you want to navigate to.