I could not find answer im looking for on the forums so I’m posting it here. I’m fairly new to bubble platform so please be gentle in the explanation of things.
I’m creating a multi-step service order that users will need to complete to request a service from my company. For a better UX I started to use groups instead of pages to pass the data thru but I can’t figure how to properly so this. Below will be list of things I’m looking to accomplish
- Group all steps inside a master group to simulate no page load
- Collect data from evey step group depending on what use chooses
- Send data from group to group to create one service order inside of data tab
- Attach service order to current user to then later create a “service order history page”
If anyone has any suggestions or advice to achieve this please reply to this thread.
Thank you
Numerous ways to do this. A few thoughts:
- Best to put all elements into 1 master group per view and have the master group show/hide when needed – don’t show/hide each individual element because that’s a lot harder to set-up and maintain.
- I typically use a custom state to store (client side) which group should be visible. Maybe make it an integer (e.g., 1, 2, 3, 4, etc.) Then for the master groups set each to conditionally show when that custom state is the number of that master group. And, when someone is done with a step in the process just increment the custom state to the next number.
- You probably don’t need to pass data from one group to the next as the input from the user is still available on that page (until they load a different page) – of course, depends on your requirements. Additionally, you can pass data to the database anytime you want instead of storing all of it client side. Or, if you’re just collecting a bit of information on each page, it may be better to wait to store it in the database until use is done with all of the steps on that page. Both are viable. Best approach is somewhat subjective and fairly dependent on your goals.
Hope this helps!
2 Likes
@blueback09 I do believe that’s what im trying to achieve, but right now when i go from one group to another when clicking one the selections (which by the way im using groups as buttons instead of the actual button element) it creates two lines of data inside of the data tab as if its making two different orders instead of one unified order with all the information.
thanks @sridharan.s this defiantly does help, like i mention i am still learning a lot when it comes to the bubble platform so explanations like these are easy to breakdown logically but are hard to implement because i am still new to the platform. Custom states especially are proving to be quite difficult to wrap my head around. If you have any links to any good tutorials that bread down how to do this. Please reply with a link. I’ve already brought lessons on codelessacademy, code-freeschool and udemy but not luck 
Yeah, I understand. The more you use Bubble the more you learn. Most of the things that are hard to do are only hard the first time. The second time it’s quite easy. This is probably one of those.
Perhaps create a new page and play around with custom states. The way they work is that it’s a value that’s stored on the users computer (i.e., client-side in computer speak). Custom states are attached to a specific element on the page. I usually use the page-level element so that I can quickly find all of the custom states on the page and don’t need to figure out which elements have custom states.
You can use workflows to change the value of the custom states. You can also set things to happen when a custom state changes. One specific implementation is if you have a group, on the conditions tab (click edit for that group, then it’s the 2nd tab) you can set a condition that basically says, “When 's <custom-state-name” is " and then select a property to change “this element is visible” and check the checkbox so it is yes. Then, also set the default for that group to be hidden (on the edit tab). This way, that group is hidden unless the custom state equals that one value.
You can do the same for the other groups as well. (Try it with just one before you spend time coding the others). Then, you’d want to set-up a workflow szo that when a user clicks, say, a button to go to the next view you run a workflow that changes the hidden state’s value. Changing the value will automatically hide the current group that’s visible (if you set up conditions on it correctly) and also show the new group you want to be visible (if the conditions are set-up on that new group correctly).
2 Likes
@blueback09 for points #3 and #4 the groups which will hold the data is collected based upon the user selection (or clicked), not input fields that user is typing into. I guess my question is:
- What type of element is best that I should use to store the data, and then be collected at the end of the form based upon user selection from those choices.
You can store data in an elemen’s value or in an element’s custom state. Element values will have their type of data set by the element. You can make a custom state any type of data you want.
Since you’re building a form, you need the user to input data into elements of the appropriate data type (text, dates, images, etc). So all of the elements are kind of like an array. You can get whichever piece of data you want later by asking for that element’s value.
