Can someone help point me to the right direction?
I'm trying achieve below with retool mobile
- On create page, a textarea input that's saved to postgres text_field
- On view page, render a simple checklist from textarea input, one line -> one checklist
- On view page, if status toggled to open, then have the checklist interactive
- On status toggled to close, save the checked/unchecked value, ideally back to the original text_field, also make the rendered checklist non-interactive
My first thought is to use markdown like below, but retool doesn't support []
- [ ] Mercury
- [x] Venus
If using HTML component, it doesn't seem to render input tags <input type="checkbox" >
If I use check box group component, then essentially I'll define my own saved_checklist_format, something like below. My gut feeling this is not the best approach.
checked | text line1
unchecked | text line2
Is there any other approach?
If I'm understanding the question correctly, it sounds like you just need to split the text input at the new lines.
{{ textArea.value.split(/\r?\n/) }}
This gives you an array of elements that you can then use as the checkbox group value/label inputs.
The save you'd do the inverse, joining the values with new lines as the join character.
From a bigger picture standpoint, the more conventional way to do this would be to split the lines prior to saving, then insert a row for each checkbox item with a foreign key that links them to a singular record. Something like checklist and checklist_items. The checklist record would contain any metadata that you want associated with a list and checklist_items would be the actual content for each row.
Thanks for the thoughts.
Yes, I was thinking .split() from textArea.value -> checkbox display.
What I haven't quite thought through is how to feed checked/unchecked from checkbox display -> back to textArea.value, or rather, table.column. And how to ensure consistency after multiple load & edit.
Creating table and linking them is best for consistency, but seems a bit overkill in my app's scale.
I guess the best all around option is to have 2 direction rendering for checked/unchecked value as markdown style- [x] & - []
An object would probably be best for that.
1 Like
Thanks for the hint.
Guess I was overthink it a bit too much, string.split() and array.map works pretty well translating either direction
1 Like
