Hello!
So this seems like it should be easy and yet I’m not getting it.
I have a form that contains radio buttons and dropdowns. How do I set the initial content when making the form editable?
Thank you for any guidance or links to videos.
Hi there and happy Bubbling,
Can you elaborate slightly on what you are asking for?
Do you want to know how to set the initial content with dynamic datatypes? or do you want to know how to set the initial content only when the form is in an editable state?
If it’s the first question, you’ll want to set your elements up like this:
Here, “Status” is an option set I created with a few different options.
Avoid using the default yes/no simple data type and instead make your own yes/no option set called something like “boolean” or whatever you prefer.
If it’s the second question, you’ll want to create a custom yes/no state in your form’s parent group called something like “is-editable”, then when your form is in its editable state, change this “is-editable” state to “yes” and vice versa.
Then, in each of your form inputs’ conditionals tabs, create an expression that checks if this is-editable state is “yes”, and when it is “yes”, the action should be to set the text/content of the element to whatever you wish.
Hope that helps?
Thank you, Joshua. I am indeed enjoying Bubbling!
In this case, I think your second option applies and I will give it a try. This is an example that describes my current scenario:
- A dropdown with the days of the week
- Radio buttons with the colours of the rainbow.
If I were to submit the form with “Tuesday” selected from the dropdown, and “Violet” selected from the radio button, how do I make sure that when I come back to edit the form at a later stage, my dropdown will automatically select “Tuesday” and my radio button “Violet”?
It seems like such a basic function and yet so complex.
Thank you again for taking the time to explain my options. Let me go and play around with it!
You do not need to distinguish between whether the form is editable or not, as the form should always be editable, unless you plan to use the form as a way to also just display the values.
There are conditionals on input elements that can change the property of ‘this element is disabled’ so that a user can not click into it or change its’ value when the condition is met.
For radio buttons, it is a bit trickier as they do not have that ability I believe (I’ve honestly never used the radio button in the 5+ years I’ve been using Bubble as I just build my own).
If you are wanting to distinguish between editable or not for the purposes of making it so you can create new entries or edit existing entries from the same form, the form should always be editable, and you only need to distinguish between whether the form is met to create a new data entry or edit an existing data entry. To do that, wherever you have the form (best would be if it was a reusable element) you need to create a custom state or make a data source of the type of data your form is meant to create or edit. Then on the input elements just use a dynamic expression to set the initial content based on the custom state or datasource of the data type.
For me, I build a form as a reusable and I make the datasource of the reusable be the data type the form is meant to create/edit. For example it might be a form for a data type called Company. Then when I set the initial content of the inputs I reference the reusables’ Company field the input is for. When the data source of the reusable is empty, the initial content is empty, but when the datasource of the reusable is not empty the initial content is not empty.
I then just need to have two triggers on my workflows to save the values to the database to determine if it should create or edit. Basic condition is when the reusable elements datasource is empty it should create and when the reusable elements datasource is not empty it should edit the data entry in the datasource.
You can switch the use of datasource for a custom state if you want to use a custom state. But you should not need any conditionals on the input elements to determine if it is for creating/editing, and would only need a conditional on the input elements to disable the input if you are using the form to both display the values to users who should not be allowed to edit as well as for editing by users that are allowed to edit the values.
- A dropdown with the days of the week
- Radio buttons with the colours of the rainbow.
If I were to submit the form with “Tuesday” selected from the dropdown, and “Violet” selected from the radio button, how do I make sure that when I come back to edit the form at a later stage, my dropdown will automatically select “Tuesday” and my radio button “Violet”?
In this case, if you want the form to retain its values, you’ll need to make a datatype for this and save your selected day and colour in the datatype, using the option sets you’ve created for both the colour and day of week. Custom states are reset when the page reloads, so saving the data in the database appears to be your only option.
So, let’s say you have a datatype called “mood” and it has two fields: colour and day-of-week.
I would have your form inputs in a parent group, which has a content type of “mood”. The source could be a “do a search for” a mood, with (for example) the constraint of created by = current user.
Then, your dropdown box’s content type will be a day-of-week, with the source being the parent group’s mood’s day-of-week.
Your radio-button’s content type will be a colour, with the source being the parent group’s mood’s colour.
Hope that helps!
@boston85719 and @project-monitor, thank you so much! I will work through both of your recommendations. Every bit of information is valuable.
1 Like