Bubble’s option-set alternative in toddle.dev using variables
Hey toddlers , Coming from bubble , I ’m basically wondering how I could use an equivalent of “ option -sets ” Let me explain . It ’s a very simple use case . Let ’s say I have a list of 3 categories , ( Sales question , product info , Bug ) 1 ) I want to display them programmatically , in a list , avoiding me to : - misspell a category name - Add or remove categories in one place , without having to modify the UI each time . 2 ) When I click a category , I want the ‘category ’ to be “selected ” , and show the user a different UI , when selected . Back to bubble . Bubble ’s Option -set are stored on the client ’s browser , but act a bit like database . So in toddle , I guess , I could create my categories in the database , like a classic table … But I was thinking of using variables to solve my issue . Question : was that clear ? If so , do you have a solution ? Bubble ’s option -set alternative in toddle .dev using variables Hey , Matthieu . Option sets in Bubble sound like arrays to me . You can create a variable and then add an array with your category options as you mentioned . An array is a data structure and can be used for lots of different things . For example , creating a list of navigation items and much more . In the browser , values stored in variables do not persist , so you ’d need to leverage local or session storage to have these persist . Under the hood , I think this is very similar to what Bubble does but it abstracts the terminology and logic . It ’s worth checking out this course for Bubble devs coming to toddle in the toddle Academy : https://toddle.dev/academy/a-bubble-developers-guide-to-toddle Also check out the toddle YT and Andreas ’ video on data structures . Does that help ? To handle point 2 , this will require the use of classes to style an element based on the selected state . For navigation , it depends on whether the UI should load on the same page or a different page . There ’s a few ways to skin a cat . It would be good to start with the design and then work toward fleshing out the logic , etc . , to handle the interactivity . yeah totally get it , thanks a lot . here is how I solved it : Have one array variable "category -list " . And one object variable "stelected -category " On click of the category div , just change the variable . and bind the UI elements to that variable . category -list [
{
"category": "Sales Question",
"description": "Happy to clarify anything you like"
},
{
"category": "Product Information",
"description": "Always fortunate to hear from you"
},
{
"category": "Bug",
"description": "We will do our best to fix them"
}
]👍1
