Create dynamic new line for each user interaction - an unlimited number of times

#1

How should I go about creating a tiddler that can create dynamic content like below

The initial state of the tiddler would be

[text box] AddMoreBtn

When the user clicks the “AddMoreBtn” button, the tiddler should become

[text box] DeleteBtn
[text box] AddMoreBtn

When the user clicks the “AddMoreBtn” a second button, the tiddler should become

[text box] DeleteBtn
[text box] DeleteBtn
[text box] AddMoreBtn

and on and on a new line created for each time the “AddMoreBtn” is clicked by the user.

Would actionwidgets + javascript macros be the right way to start off on this ?

#2

No need for javascript… try this:

\define add_item()
<$let item={{{ [<currentTiddler>fields[]removeprefix[item_]last[]add[1]] :else[[1]] +[addprefix[item_]] }}}>
<$action-setfield $field=<<item>> $value={{!!newitem}}/>
<$action-setfield $field="newitem"/>
\end

\define del_item()
<$action-setfield $field=<<item>>/>
\end

<$list filter="[<currentTiddler>fields[]prefix[item_]]" variable="item">
   <div>
   <$edit-text field=<<item>>/>
   <$button actions=<<del_item>>>{{$:/core/images/delete-button}}</$button>
   </div>
</$list>
<$edit-text field="newitem"/>
<$button actions=<<add_item>>>{{$:/core/images/new-button}}</$button>

Notes:

  • add_item() creates a new tiddler field named “item_N” (where N is a calculated number)
    • The $let widget gets the list of all existing item fields, finds the last item field and adds 1. If no items exist yet, it defaults to “1”. It then adds the “item_” prefix to generate the new “item_N” fieldname.
    • Then it copies the current “newitem” input value to the “item_N” field and clears the “newitem” input field.
  • del_item() deletes an existing item field
  • The $list widget finds all existing item fields (i.e., fields starting with “item_”)
    • For each existing item field, it displays an edit field and a delete (“trashcan”) button.
    • Editing the existing item immediately updates the stored “item_N” field value
    • Pressing delete removes the existing item field
  • The final $edit-text widget creates a temporary “newitem” field, which is then copied into an “item_N” field when the add ("+") button is pressed

enjoy,
-e

2 Likes
#3

Hey Eric,

nice solution… how to insert in the target field links to other tiddlers ?
I think this is not possible in the edit mode, but useful later when you transclude the content of the field in wikified text area.
Best