Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Here's how to send more than one item in your database through to a new page. Before we get started, are you a Planet No Code Member? I have a repeating group of products. Let me show it to you. And I want to send through the iPhone 14 and the iPhone XS through to another page and then be able to retrieve that data that I've sent through to it.

How to create a list with a Custom State

So to do that, I need to use a custom state. A custom state is a great way of temporarily storing data, and so I need to be able to temporarily store which of the products in my repeating group I've selected to link through to the new page. So I'm going to create a custom state on my page. It doesn't matter where you create a custom state, just do it somewhere logical. You're not going to forget about it.

I tend to create them on the page level because then I know where they are. So I call this Selected Products, and it's going to be of type product. And then I'm going to say when this icon, which I'm using as a type checkbox is clicked, I'm going to set state of my page, select a product. And with custom states, you have to refer to the existing group and then put plus or minus to add or subtract an item from it. So I need to refer to my page again. Product list, selected products. I need to make my custom state a list. There. So then if I go back into workflow, I can say, Selected products plus an item current sales product. I like to use color coding here because there are two workflows I need to really run this well, which is to add a check mark in, add a product, and to remove a product. And so on the add workflow, I need to add in a condition to only run when product list selected products does not contain current sales product. I'm going to copy and paste it, change this one to red, and say when it does contain minus item.

And then last thing to create this temporary list is I want to give some visual feedback that it's indeed the case. So I could say when product list, selected products contains current sales product, then I'm going to change the icon to check. Let's preview that. So you can see we are updating our custom state. And now, how do I send the contents of the custom state across to another page? Well, here is just one way you could do it, which would be to say, let's add in our compare button. Yeah. So I'm going to say link through or navigate to go to page. And I've got a page called compare. And now, date of the send would be appropriate if I was sending one element, or if there was a main element and then there were secondary and tertiary ones. But there aren't in this case. I just want to send multiple ones.

Using Send more parameters to the page

So I could say product 1, and then I'm going to refer to my custom state and say selected products item 1, unique ID. And I'm going to say product two. I'm going to copy and paste this because it's all the same apart from item two.

So let me just demo what that does. So iPhone 14, iPhone XS. And then if I click Compare, you can see that bubble puts the unique ID for the iPhone 14 and then the iPhone 6S in the URL. And so now that it's in the URL, I can retrieve it. So I can go to my Compare page, and I'm going to add in a group. And I'm going to say this group contains product. And then I'm going to say get data from URL. And I'm going to say product one, and then tell it to expect product. This is just by all being really helpful. It's going to convert the unique ID, recognize it, and convert it back into a product. And so then I can add in an image and say current groups product image. And I'll add in a text label, current groups product label. And then I'm going to copy and paste this. And instead of product one, we'll say product one, product too.

So if I go back to my product list page, and then click preview, let's this time do the iPhone XS and the iphone 3GS. And I'll just hold it.

So I'm going to click compare, and you can see that it knows which products to display because it's retrieving data from the URL. So there you have it. That's just one way of sending multiple data entries through to a page. In this case, I'm demonstrating a simple e-commerce comparison, compare product table. You can see where I could easily go from here. I could start listing the price and the description of other items. I'd put a back button in. But that's just to get you started with one way of sending two bits of data across.


Latest videos