[SOLVED] Send data from one page to another with APIs?

I have two pages “Items” and “Single Item”

I am using an API to pull in a listing of items on the “Items” page. When a user clicks on an item I want it to open the clicked item with more details on the “Single Item” page.

I have two different APIs. One to search for all items and one for the single item which needs an “id” to pull back the single item.

When I click on the single item on the “Items” page I would hope that I could pass the “id” to the “Single Item” page. I am using a Repeating group on the “Items”.

Is this possible?

1 Like

Hi, several ways to do this but here’s the clearest:

Presumably your Multi-Items API returns ID as one of several fields. Also, I’m assuming your Single Item API allows that ID to be inserted/set somewhere in the call as a parameter.

If these things are true, then:

  1. ensure your Single Item API in the setup (under Bubble API connector/Plugins) is set to allow that ID parameter to be dynamic.

  2. You said that the Multi-Items API results are in an RG? So when the user clicks on the item in the cell (maybe it’s a button, maybe it’s the text they click on, whatever it is should work the same), set up a workflow for ‘when x is clicked’ go to page --> [your Single Item page]. Ensure that the ‘Send more parameters to the page’ checkbox is checked. That opens a dialog below. Enter a ‘key’ in the provided space (e.g. ItemID) and, in the ‘=’ box that appears next to it, click ‘Insert Dynamic Data’ and then enter ‘Current cell’s… Item ID’. This sets the parameter that you will send to the next page, in this case, the ID of the specific, single Item you wish to call and display in the next page.

  3. Lots of ways to do this next bit here, so assuming you have a ‘live’ API call somewhere on the page… Let’s assume you have an RG with 1 big single cell. You select ‘get data from an API’ as the data source, set up the Single Item API, and – because in step 1 you made the ID parameter for this call dynamic – you will have the opportunity to set the URL and/or the parameter (depending on what you made dynamic in step 1 - parameter or entire URL) dynamically here. Use the ‘insert dynamic data’ here and select ‘get a parameter from URL’. A dialog box will open up that allows you to enter the ‘key’ you set on the previous page (in step 2 above we set it in our example as ‘ItemID’). This will insert the ID from the RG cell from the previous page that the user clicked on to see more details about.
    NOTE: If in step 1 you made the entire URL dynamic, then leave all of the URL untouched EXCEPT the part that is the ID. Delete that ID only and replace it with the dynamic data/‘get a parameter from URL’. If in step 1 you, instead, made ONLY the parameter dynamic, then obviously you can just set the dynamic data/‘get a parameter from URL’ here and leave it at that. Depends on how you previously set it up…

That should be it. User should now be able to click on an item in your multi-item RG, and that should trigger another page, with the item ID passed along to the next page and directly into the ‘live’ single-item API on your page. Everything will render just as you hoped.

Good luck - hope this helps,
P

3 Likes

Thanks, I was trying to send the parameter through workflow on a button, but it wasn’t setting the parameter. I switched to a link and was able to pass the parameter.

Ok, I’ve done it as a workflow triggered by ‘when user presses a text’ (i.e. a text in the RG) - haven’t tested a button but I don’t see why it would be different (I.e. provided the button is inside the cell you want to send the ID from).

Anyway, glad you worked it out.

Best regards,
P

Hi,

I do not understand what you mean by “ensure your Single Item API in the setup (under Bubble API connector/Plugins) is set to allow that ID parameter to be dynamic

To be dynamic : how do you set this ?

In my example i want to open an “employee detail page” from “employee list page”. I try to pass the selected employee _Id
image
In my API i want to set this parameter:


It works if i set the value here, but cannot figure out how to make it dynamic and filled by the previous parameter EmpId sent when opening the detail page.

what’s wrong ?

many thank’s

Maybe you have solved this already, if not, I am pretty sure you need to uncheck the private checkbox so that you can get the data from your app dynamically.

I have the same issue; there doesn’t seem to be an option to make it dynamic, and if I leave the value blank intialize gives an error that there must be a value there. Is there a clear instruction on how to do this? The ‘private’ box is unchecked.