Todo items in a bullet list using {button} and {repeat}

Show and Tell
1

{note}{run: item_count = 1
}{button: item_count = item_count + 1
; label=Add One} {button: item_count = item_count - 1
; label=Remove Last; disabled={=item_count = 1}}{endnote}

Task list:

  • {repeat: for index in seq(1, item_count)}{formtext}{if: index < item_count}
  • {endif}{endrepeat}

We maintain a variable item_count to determine how many bullet list items we want to show. The "Add One" button increments the variable by one. The "Remove Last" button decrements the variable by one. Note the remove button is disabled if you just have one item. This is controlled by the attribute: ; disabled={=item_count = 1}.

We then use the repeat to render a bullet list of item_count formtext fields. The trick with the {if} command is to ensure it does not render an extra bullet list item at the end.

References:

  1. {button} command: http://blaze.today/commands/button
  2. {repeat} command: https://blaze.today/commands/repeat
3 Likes
2

Here is a slightly tweaked version of this snippet that allows the buttons to move with the addition or removal of tasks. I find its a little easier than having to move back to the top to add/remove when needed. Also, hides the "run" code block. :wink:

Task list:
{repeat: for index in seq(1, item_count)}{formtext}{if: index < item_count}
{endif}{endrepeat} {note: insert=no; preview=yes}{note: preview=no}{run: item_count = 1
}{endnote}{button: item_count = item_count + 1
; label=Add One} {button: item_count = item_count - 1
; label=Remove Last; disabled={=item_count = 1}}{endnote}

2 Likes