How to send data from Repeating group to Popup

You’d frequently find yourself in a position where you have a Repeating Group with a list of entries and you need a Popup which shows the details of an entry in a popup.

Setup

Let’s say that you have a repeating group which is pulling a list of Products from your database.

Now we want that when the user clicks on “View details” button, a popup should come up with more details about this product.

We can break down the entire process into 2 steps

1. Showing a popup om button click
2. Displaying dynamic data

Showing a popup on button click is straight forward. Displaying dynamic data is the part that we need to focus on.

Workflows

On button click, we’ll first create a workflow to show the popup.

Now we just need to select the popup that we want to show. In our case, we only have only 1 popup on the page.

Now we need to send dynamic data to the popup in order to display the current cell’s product information. But, before we do that, we need to make changes to the popup’s settings. So that it can accept dynamic data.

To do so, we only need to define the Type of content of the popup.

As the Type of content of the repeating group is Product, the Type of content of the popup will also be Product. The Type of content of the repeating group and popup will always match. You’ll soon understand why this is the case.

An important thing that you need to understand is that we only need to define the Type of content of the popup and not the Data source. We’ll pass the data source to the popup via workflows, which is the second and the final step.

Now go back to the same workflow that we were working on. Add a new action to that workflow. Element actions — Display data.

Using this action, we are defining the data source of the popup or you can say we are passing dynamic information to the popup. Once this is done, we need to create a few text field inside the popup to display the information received.

Once, you define the Type of content of the popup, you would have the option to use Parent group’s dynamic data inside the text, input and all other fields.

Make sure that if you create another group inside the popup, you define the Type of content and data source of that group as well. Else the dynamic information won’t trickle down to the child elements.

Preview — https://nocodeassistant-tutorials.bubbleapps.io/version-test/popup-details

Editor — https://bubble.io/page?type=page&name=popup-details&id=nocodeassistant-tutorials&tab=tabs-1

If you need some help with your Bubble app, send me an email at himanshu@nocodeassistant.com or follow me on Twitter.

I also run an official Bubble agency where we can help you bring your idea to life!