Thursday, July 22, 2021

Passing Parameters in Bubble

One of the most common actions in web design is passing information from one web page to another. If you're on a recipe website and ask for meals that use paprika, you'll probably see a new page load whose URL ends in something like "/?search=paprika". You pass parameters from one page in your Bubble app to another the same way. 

As an example, let's say you have an app that allows the user to enter the purchase price and projected lifetime of an asset (such as a lathe or drill press) and then try out different methods of depreciating that asset. Once the asset's purchase price and expected lifetime are entered, users can click a button to start a workflow in Bubble with the workflow's first (and only) action being to navigate to the page where they can select different depreciation scenarios. The action editor would look like this:


The destination is the page where the users select different depreciation methods ("depreciation"), the checkbox "Send more parameters to the page" is checked, and two parameters have been entered. Each parameter consists of a "key" and a value. In this case, the first key is named "q" (it could be any text string) and its value is the value of the asset purchase price. The second parameter's key is named "qq" and its value is the value of the asset lifetime. Any number of parameters can be passed to another page this way.

If the user entered a purchase price of $875 and an expected lifetime of 8 years, the tail end of the URL of the "depreciation" page would look like this:

/depreciation?debug_mode=true&q=875&qq=8

(notice our two parameters added onto the end of the URL)

There's nothing complicated about passing parameters like this in Bubble, but I read one explanation online that was a bit confusing, so I thought I would show a simple example of how it works. Hope this helps if anyone isn't clear about how to send data between pages.


No comments:

Post a Comment