Repeating Group text click into different page

Hello Everyone,

Just wondering is it possible to have a Repeating Group, displaying all my data Display from an Option Set, and able to make them clickable into a new page depending on the data?

For example:
Option Set with Display of different student names such as Jack, Jessica, Jason, Jeremy, Jenny, Jennifer; and when I click into Jack, it directs me into Jack’s page; when I click to Jason, it directs me to Jason’s page etc

Thank you!

Yes it is (although it’s slightly trickier using option sets than it is with datatypes).

Bubble pages can not have Option Sets as their content-type (unlike DB datatypes), so you can’t send the data directly to the page through a workflow action as you would if the destination page had a defined content-type.

But you can use the option set’s Display as a path parameter, then use Get Data from URL in your page elements and groups to get the dynamic content for the particular option.

To do that you need to use the navigation workflow action ‘open an external website’, set the URL of the page you want to navigate to and add the option’s Display after a forward slash at the end of the page url (e.g. mysite.com/mypage/myoption

Then on the destination page use Get data from URL (using path parameters set to the option set) to show the relevant data.

Although (I don’t know exactly what your app is or how it works) from what you’ve described about having Student names as the options in your option set, I’m not sure that’s the best idea for how to set up your app and data structure (unless you only have a fixed number of students that doesn’t change very often). So it might be worth considering having a database datatype for your students instead of using option sets here.

1 Like

thank you Adam!

Sorry I am a bit stupid, I got to the part to do workflow for open an external website, however maybe I am on a free plan testing out my development, i can’t link to the new page i created, and also on the new page i created i cant find the Get Data from URL :face_with_raised_eyebrow:

I thought using a simpler example might be easier for me to explain my data, actually I am working on a Food Menu Point Of Sales app, and want to get the Menu Items work like McDonalds Points Of Sales system, tapping on Cheese Burger and I can choose Double Cheese Burger etc, that’s why I use Option Sets for my Main Category, and Option Sets for my Sub Category, and Data Type for my Dishes items (not sure is it the right way but so far I am able to input my data well)

so far what I have is:

Option Set 1
Menu
Display (text)
these gives my main category of my menu selections such as Drinks, Burger, Steaks, Pizza etc

Option Set 2
Drinks
Display
Main Category (Menu)
these gives my subcategory from the main category such as Coffee, Shakes, Lemonades when I click on Drinks

Data Type
Item
name (text)
price (number)
Main Category (Menu)
Sub Category (Drinks)
this data type allow me to choose the Order, for example:
Black Coffee
3.59
Drinks
Coffee

and I will have another Data Type naming Order to take List of Items for my Orders

so I was thinking Repeating Group to show Option Set 1, the Main Category; for example I tap on Drinks; then I will redirect to a new page to show Repeating Group of Option Set 2, the Sub Category, showing Coffee, Shakes, Lemonade; and lastly when I tap on Coffee, it redirects me to all the Items in Coffee, where I will able to see Black Coffee for me to tap on

I saw there is an option when I choose Workflow, Navigation, Go to Page; and Data to Send i can choose This Text, but then I don’t know what to do next; will this “This Text” option able to help me to identify which page to go to?

Thank you again!

In that case there are several options, but there’s probably no specific need need to use multiple pages (although you can if you want to).

You can just show another repeating group (either on the same page or another page) with the content type of your Subcategory, and a the data source of the first RG’s Category’s Subcategories.

If you do want to have the RG on a separate page then you’ll need to send data to the new page via parameters (so click ‘send new parameters’ when using the go to page action and set the parameters and values you want to send: i.e. the Display of the option set option).

If using a separate page for the second RG you’ll need set the datasource using Get Data from URL, then set the parameter to the parameter you sent from the pervious page, and select the option set as the parameter type.

As I said, its probably easier to do all that on the same page rather than using multiple pages, but it depends on your UI/UX etc.

thank you Adam!

I think I got it to work! Below are some screenshots:

I wonder is there a way to make it more efficient, I find that if I have 20 main categories, each main categories have 5 sub categories, does that mean I need to make 100 layouts with repeating group to show all categories and able to navigate?
will it be possible to make a generic layout/group just for Main Categories, and a generic layout/group just for Sub Category, so no matter which category I tap on the generic layout/group will only display what I tap on?

this current demo I did for Drinks & Shakes already require 3 different groups to show the RGs

thanks again Adam!

If your data structure is set up correctly you should only need 3 RGs:

1 for the Categories, 1 for SubCategories, and 1 for Products.

So (if you’re using option sets):

Option Set 1: Categories (each category should have a list of subcategories)

Option Set 2: Subcategories (you may wish to have an attribute of Category on these but that depends exactly how/where you’ll need to access the data).

Datatype Product: each product should have a Category and a Subcategory

Note: annoyingly, option sets can only be created and edited manually in the editor (as opposed to using DB entries, where you can set up workflows to do it all automatically), so it can be a bit tedious setting them up, especially when linking two option sets together (such as adding subcategories to a category list, and vice versa), so you need to be careful to assign them all correctly.

That said, using option sets for categories will give better speed and performance for your app, so in most cases I’d recommend you stick with option sets for categories.

1 Like

thank you Adam for getting back!

I think I have my data structure setup correctly in the first place:

Option Set 1 for Main Categories:

Option Set 2 for Sub Categories, I have assigned attribute for Main Category I think it helps filtering

Data Type for Product (Menu Items)

As you can see for some Product I do not have Sub Category but still works fine

But I been trying all day so far, I still dont understand the concept/getting how am I able to only use three RGs as for example Main Category each item in it will counting the index, and when I click on the second item it will be the next index so I am force to go another page?

Thanks for the guidance!

But I been trying all day so far, I still dont understand the concept/getting how am I able to only use three RGs as for example Main Category each item in it will counting the index, and when I click on the second item it will be the next index so I am force to go another page?

I’m not sure I fully understand the question, especially the part about counting indexes?

But if you’re asking how to set up your RG’s it’s simple…

  1. Your Category RG needs to have a content type of Category, and it’s data source should be All Categories.

  2. The Sub Category RG Should have a content type of Sub-Category. If this RG is on the same page as the first RG then leave the data source blank.

  3. The Product RG should have a content type of Product and, again, if it’s on the same page then leave the datasource blank.

If they are all on the same page then, depending on your UI/UX you may or may not want to only have one of them visible at a time.

To display the correct data in the sub-category RG, run a workflow when an element in a cell of the Category RG is clicked to ‘Display List’ in the subcategory RG.

The data source should be All Sub Categories, filtered with the constraint This Subcategory’s Category is Current Cell’s Category.

To display data in the Product RG do the same thing when a cell in the Sub Category RG is clicked and use Display List to set the data in the RG. You’ll have to do a search for Products, with the constraint Sub Category is Current Cell’s Subcategory.

You can use the same workflows you use to display the correct data to also show/hide the other RGs.

That’s all there is to it…

If you want to use multiple pages for this then you need to send the data from the first RG to the second page using parameters.

When a cell is clicked, use the navigation action Go To A Page, to send your users to the relevant page, and add more parameters to send.

Give the parameter a name, and set the value to the current cell’s Category’s or Sub Category’s display.

Then on the second page, set up your RG and set the content type to be (for example) Sub Category.

Set the data source to All Sub Categories, filtered with a constraint to match the Category in the URL parameter (use Get Date From URL for this).

1 Like

Thank you Adam!!!

This is exactly how the way I want it to work!!! Thank you so much!!!

Just one more further question:
What if a Category do not have Sub Category, and I can jump directly into Product? Is there a way around this?

Thank you Adam!

Sure, you’ll need to use conditionals on the workflow, but it should be simple enough.

Try something like this…

Have a workflow action on the click of the Category RG element to show the Product RG and send the data to it only whenwhen Get All Subcategories: filtered (category is current cell's category): count is 0

thank you Adam again!!!

I think i got it right but do you mind check my workflow? thanks!


the UI/UX looks correct tho:


this is getting into shape now! thanks for your big help Adam!

my next phase will be work on how to Hide the RGs when a category/subcategory is selected, and also a Back button to return to previous state where we left off; and the ordering part on the right side to get order items as an order and i guess this part of the app is half done!

image

The data sources seem correct but the only when condition here is wrong (currently it doesn’t make sense as the current cell’s main category will always be the current cell’s main category - it’s just referencing itself).

I’d copy the datasource (right click and select copy expression) exactly (including the filter), and paste that into the Only When condition. Then add :count>0 so it will only run when the number of subcategories is more than 0.

The you’ll need to apply the exact opposite conditional to the other workflow action (the one that displays the data in the the Menu Items RG), i.e. when subcategory’s count is 0

Otherwise both workflow actions will run when the subcategory count is more than 0 (i.e. when the category DOES have Sub Categories both actions will run), although depending on what you want to happen that may be fine for your app, in which case don’t worry about it.

The simplest and most efficient way to show and hide the various RGs will be to use conditionals and custom states. You can set the custom states in the same workflow you use to display the data. Search the forum for ideas on how to do it if you’re still not sure.

thank you Adam!!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.