I have three buttons, I would like the user to select one of three and I would like the selected button to change colour once selected. Two questions:
Thanks, CT
Hi CT 
This is definitely possible. One way to set this up would be to use a repeating group. That repeating group would probably be a custom type, and have a field to store the value you would typically have as the label of the radio button.
Preview: buttons-radio
Editor: faye-demo-app | Bubble Editor
In the above example, the User is choosing between two types of devices, Mobile or Desktop. To do this I first created a new type called “Device”:
Then created two entries in the App data tab for Mobile and Desktop:
Back on the page, place a repeating group on the page and a button in the cell. Here we’re presenting two button choices to the User, Mobile or Desktop, and can use “Do A Search for Devices” in order to display those options as buttons:
To temporarily store the Device value that the User just clicked, we can use a custom state. (Note: custom states aren’t saved on a Thing until a workflow specifically does that. If the page is refreshed or closed, the custom state is reset to empty). Here I created a custom state on the repeating group with these settings:
This workflow then sets that custom state to the Device that was just clicked:
There is also a conditional formatting change on the button which will create a border on the button that is currently ‘selected’, similar to a radio button. In this example, a blue border is around the button, but this could be anything you choose of course.
Last but not least! You can use the custom state expression “RepeatingGroup’sSelectedDevice” in order to save that Device value to the Current User:
And that should do it! If you have any questions feel free to let me know.
Thank you so much @fayewatson, this is a brilliant example. Perfect for App builders at my level. Would love to get your input on my app as I build it out. Thank you again, CT
Awesome! 
No problem at all, CT! Yes, definitely post back to the forum with new questions as you build out your app!
Thank you @fayewatson Much appreciated, I am now trying to do something similar with colours instead of buttons. I have tried to follow the same process that you have outlined for radio buttons however I cant get a 'Colour" to populate in a repeating group like I can a Name. Should I be following the same approach or something different? Thanks, CT
No problem at all! This will be slightly different because you’ll have to store the HEX value to display dynamic color values in the repeating group. Here is a link to the example:
Editor: faye-demo-app | Bubble Editor
Preview: dynamic-color
For example, in the Colour data type you could have two fields: “Name” (type: text, list: no) and “HEX” (type: text, list: no). *The Name field isn’t mandatory, but it might be helpful in keeping track of the colors.
If you already have a list of HEX values and colors you could manually enter them through the App Data tab. But if you’ll be edit and adding Colours through Bubble, it will probably be easier to create an admin setup which allows you to select a color from the ColorPicker plugin (Plugins → “Air Color Picker”), input a name for the color, and add that to the database. Then on the User’s side, they can select one color from the repeating group of Colours:
The colors are displayed dynamically by setting the background color of the shape to “Current cell’s Colour’s HEX” (And the tooltip for the square is the Colour’s Name):
In the database the Colours look like this:
On the User’s side of the page, there is a custom state on Repeating Group Colour (User) called SelectedColour:
When a User selects a Colour, the border of the square becomes darker grey, and the Colour is displayed beneath the repeating group:
Then you can save that Colour to the User by saving the custom state SelectedColour’s value:
That should work! But feel free to let me know if you have any questions
This topic was automatically closed after 70 days. New replies are no longer allowed.
