I’m attempting to make the visual above, where radio option 1 allows the user to specify a time length, while options 2 and 3 are set options (24hrs and 0).
I’ve tried a few different ways to make this work and am stumped.
You need a Column container, this will contain everything in the image
You need your top text Duration followed by 3 ROW groups taking 100% of the WIDTH and maybe 50 px FIXED height (by the way all numbers you can change according to your project)
Then on each group you can add an icon element, give it a Yes/No custom state to the icon or the parent ROW group and make a workflow where the icon toggles that Custom State Yes/No
Than add the text, make it fit content width and type each item’s text
Make conditionals based on that custom yes/no state to have that blue background and border when its yes as well as changing the icon when its yes.
Now for the Hours and Mins
You need to add a new Row Group after the text inside the first row group and style it like the ones in your image, border, white background and rounded corners.
Then add inside of it an input field, set it to Numbers format and style it with white background, no borders, and so on, to make it blend into the white background. Then add a Text element right next to the input and type “hours”. Make sure you keep add padding to both the main first row group and to the hours row group
Once you have that looking fine just how you want it copy and paste it and just change the text to “mins”, maybe add a margin to separate the little groups
Finally, add a conditional to the Hours and Mins row groups to show when the custom state Yes/No is Yes. You dont have to collapse when Hidden on these two inner groups but you can if you prefer…
When you’re going to save the data into the database with a workflow you can just convert/calculate the amount of hours in decimals, for example Service Length of 1 hour and 30 minutes can be calculated as 1.5
or you can simply save the information into an Hours field and a Minutes field in your database, however you have that setup…
Thanks… but I think I explained my problem poorly.
I’m not concerned about the styling… just want to get the number into the database.
I have a database column for “Duration Minutes” and I’d like to populate the database based on one of the three the choices.
Choice one allows for entering the time length which I’ll convert to minutes.
Choice two would be 1440 minutes (24 hours)
Choice three would be 0 minutes
I have set up the Custom States as you suggested, but I can’t figure out how to get only one of the choice’s count of minutes into the database column.
Option sets, and a thing.
Option set:
- Option 1
- Option 2
- Option 3
Thing:
- Duration_Option: Options above (default none).
- Duration_hours: number (default empty)
- Duration_minutes: number (default empty)
Operation:
- RG Item selection of Options exampled above.
- Have them all have a workflow for when they are selected, etc (not going to go in-depth cause you said that you weren’t focused on this functionality).
- When Option 1 is selected, show those inputs, and save the values to DB. That is all the logic is needed for an input like this with DB CRUD.
Hope this helps.
Check out my website to get in touch with my community, plugins, and other futures guides!
So you have 3 checkboxes or icons with a workflow. On the checkbox workflow where you set the state, have a step where you update the database field accordingly.
When user clicks on the second checkbox or the third its pretty easy, just add the step in the workflow that will update the field in the database for that specific record and you’re done.
For the first option its kind of tricky because by the time you click the checkbox, it can happen that the hours and minutes are set to 0, then when you update them, you already clicked on the checkbox so no workflow could run. Additionally you cannot use a When Input Changed or When Conditions are true: Hours and Minutes not empty because you might leave the hours or minutes at 0 so its hard to exzecute.
My best bet would be to add the workflow somewhere that makes sense. For example, if there is a button below to “move to next step” or to “save” or “go to another page” and this button is alawys used AFTER checking one of the checkboxes you could use that button’s workflow to add a step that updates the database with the conditional “Only When When First Checkbox is CustomState is Yes”. You only need this on when the first checkbox is checked, since the other two you can easily hard-code them into the checkbox toggle workflow.
Does this makes sense?
1 Like
IT WORKS 
It’s complicated to explain…
Basically, I had to create this on the Save button:
On my workflow, I have a Set State on both the Hours/Mins inputs to update the value for the “Defined time range” and add 1.
The radios then toggle based on the Workflow using Set States changing the values.
- Option 1: Set State makes the value 1 - and makes the other two’s value 0
- Option 2: Set State makes the value 1441 - and makes the other two’s value 0
- Option 3: Set State makes the value 1 - and makes the other two’s value 0
