Bubble’s inability to work with lists containing duplicate items has been a thorn in my side for some time. Without this you can’t easily construct a history / back feature on a single page application. I hadn’t found a solution on the forums so I’d thought to share my own tutorial.
The task:
Store historical actions (i.e. previously viewed pages, actions, etc) on a single page application without involving the database, custom JS, or URL parameters.
The problem:
If you want to store historical data (i.e. a list of previously viewed page views) as a state on the page, it would make sense to use a list of texts to store the data. Unfortunately, bubble doesn’t have an easy way to work with list of texts containing duplicate items, which makes it impossible to implement a page history and save it into a page state.
In general, being able to work with lists that can hold duplicate values has many benefits.
The solution:
Use bubble’s regex feature to work with a single text value, which is comma-separated. Regex can parse this comma-delimited text string into a list of texts which can hold duplicate items. The list of texts that is returned by regex can be worked on like any standard list in bubble.
Quick example: Navigating back
- Regex to get the text value of last item in your comma-separated list.
- Navigate to the value of last item
- Use find/replace to delete last item of the comma-separated text
…The new last item in the list is what the 2nd to last text item was previously (and so on)
In depth step by step
This is as I’ve done it - other ways certainly possible/better for individual needs.
This step-by-step assumes a few things.
- Your various page ‘views’ are already setup to show/hide based on a page state of type text (i.e. ‘current view’ = “Settings” )
-
Create a page state called ‘navigation history’ of type text (do not set to a list)
-
Create reusable custom page workflows for ‘Navigate to’ and ‘Go back’
-
Custom workflow ‘Navigate to’ should have a text input so that text input can be used to trigger any new view from within the workflow.
-
Navigate forward (store item into list)
4a. Every time your workflow navigate to view is triggered the following workflow step will add a new item to the ‘Navigation History’ text (remember: this is a single text, not a list)
If this is the first item, we want to store it differently than if it is 2nd-Nth item so we check if it is and use the conditional text option
4b. This is the formatting for each condition.
Notice that if the list is NOT empty, that we take the current value:
page's navigation history
and then concatenate:
, page's current view
onto the end
i.e. page’s navigation history has the value ofsettings, account, payment, orders, settings
indicating that those pages were visited in that order. Then, we concatenate the newest page orders as,orders
with the comma included to separate the new item to become
settings, account, payment, orders, settings, orders
The example image actually uses another concatenation, which is page’s current view | page’s sub view, which adds the additional feature to track two views together. It also adds complexity and is not necessary to store a list of repeating texts
-
Navigating back
a. To implement a back function we set the page’s current view to the last item in our history list.
b. Use regex to extract a list of texts from values separated by commas inside single text stored state page’s navigation history
c. Use the bubble list operations on the list of texts that is output by regex and get the last item. This is the most recent page view in our history
d. The following regex expression will parse a comma delimited list. Bubble will then return as a list of texts
Here is the selectable regex:
[^,]+$
e. To remove the last item in the comma-separate list of texts we use a find/replace
f. Use regex to FIND the last item in the comma-separated list including the last comma.
REPLACE that with nothing, thereby deleting the last item in the list.
Here is the selectable regex:
[\,][^,]+$
-
Done
You have a way of storing and modifying a list of texts with duplicate values.
Other solutions that already exist
URL parameters/paths – Use parameters and paths to trigger your page’s current view and use the user’s browser history to keep track of those paths and parameters. This has limitations: It requires exposing URLs that you may not want the user to revisit later. To work it must fills up the history with each historical page view. Clicking back may take the user away from the page. Solution has has development overhead other limitations.
Use the database - create a db item to store user page views. Sort by date created. This solution requires a lot of overhead and may come at the expense of speed. Hard to scale with a lot of users constantly writing to the db when navigating around.
Anyways I hope this helps anyone looking for a solution with lists and multiple items.