Simple check box todo from Markdown or HTML

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 works pretty well translating either direction

1 Like