Multipage Applications

An application can have as many pages as you need. A page is generally useful for one purpose, for example, the sign up page, about page, homepage, etc.

Adding new pages

You can create new pages in the Application Menu. A page can start blank or be the clone of another page. When a page is cloned, the entire page, including workflows will be copied and used as the basis for the new page.

There are two ways you can navigate your users among your app's pages. You can either use a Link element, or use a Go to page action if the navigation should happen in a workflow. Note that links should be preferred (instead of using a button that triggers a workflow that changes the page), as it relies on the browser native link element. The page change will be faster and your users will be able to right click on the link to open the page in a new tab. On the other hand, a change page action cannot open another tab, as the browser's protection against popups will block the tab creation.

Note that once a page is changed, the workflow will terminate. Therefore, a change page action should be the last action in the workflow, and the Issue Checker will catch situations where that isn't the case. If you use a condition on the change page action, the Issue Checker won't flag this as an issue, but it is your responsibility to make sure if such an action executes (a change page action with the condition), following actions do not need to get run.

If the destination page has a type of content, you will need to define the thing to send to that page, both at the link or the action level. This is covered in a section above.

Common questions about navigation

Is it possible to change the parameters or path of a page without explicitly reloading or doing "Go to..." the new URL?

(This is an especially common request with single-page applications.) There is not a native way to change the URL of a page without actually "going to" that page, but a couple of 3rd party plugins in the Bubble ecosystem provide this functionality.

Is it possible to implement anchor links (i.e. having #thisobject in the URL scrolls the page down to thisobject)?

Yes. You can enable the ability to add HTML id's to elements via Settings > General > General Appearance. If you add an id to an element, you can then add a link to that page that navigates to that page's URL with "#[element's id]" at the end.

Also consider using the Workflow action "Scroll to" which can accomplish a similar behavior.

results matching ""

    No results matching ""