Help to Dynamically Add Names to a Dropdown List in TiddlyWiki

#1

Hello everyone,

I’m working on a TiddlyWiki project for a children’s welfare association, and I’ve encountered a technical challenge that I hope to overcome with your help.

Context: I’ve designed a user interface in TiddlyWiki that allows educators to enter daily activity notes about the children. Part of the interface includes a dropdown list (<select>) that displays the names of the children (referred to as “person” in my code). Currently, this list is statically populated with a few predefined names.

Goal: I aim to allow users to dynamically add new children’s names to this list, without manually editing the tiddler each time. Ideally, a user would simply type a new name into an input field, press an “Add” button, and then see that name appear in the dropdown list for future use.

Challenge: I’m unsure of the best approach to accomplish this in TiddlyWiki. I’ve tried using $action-sendmessage to add names to a specific tiddler that serves as the source for the dropdown list, but I’m struggling to refresh the dropdown list once a new name is added.

Do you have any suggestions or code examples on how to implement this feature? Any advice or pointers to resources, plugins, or custom widgets that might help would be greatly appreciated.

Thank you very much for your time and assistance!

Best regards,

2 Likes
#2

Here’s a snippet of code. It will add a new tiddler, and my list of check boxes is based on a filter that gets tiddlers with the suffix “:hash:RunDt”. (The list of check boxes could be a drop-down list instead.)

I figure you could do something very similar, either adding each new child as a tiddler, or adding each new child as a new item in a data tiddler.


<!-- Here would be whatever code creates a drop-down list -->

* Other:<$edit-text tiddler="$:/temp/NewRunDeviceTarget" tag="input" default=""/><$button disabled={{{ [[$:/temp/NewRunDeviceTarget]get[text]addsuffix[#️⃣RunDt]is[tiddler]then[yes]] [[$:/temp/NewRunDeviceTarget]get[text]else[yes]] +[nth[1]] }}}><$action-createtiddler $basetitle={{{ [[$:/temp/NewRunDeviceTarget]get[text]addsuffix[#️⃣RunDt]] }}} tags=".class"/><$action-deletetiddler $tiddler="$:/temp/NewRunDeviceTarget"/>Add</$button>
1 Like
#3

Thank you for taking the time to read and respond to my issue. However, I am not sure I understand how to integrate this solution into my current code.

  • The dropdown list should only be updated if the user has added a name in a section called “Add/Update” (button). I already have my dropdown list, and my
    current goal is to link this dropdown list, which is the following code:
  • <$list filter=""" [[Chloé]] [[Adan]] [[Noham]] [[Pierre]]"""><option value=<>> <$view field='title'/>

</$list>

to my section for updating the dropdown list. In such a way that when updating to add a “name”, for example, the change is reflected immediately in the code I presented earlier, hence in my dropdown list. Here is the code for my “child update” section:

  • <$action-sendmessage $message=“tm-add-tiddler” $param=“ListeEnfants” text={{{ [[$:/temp/newPerson]] }}} tags=“person”/>
    Add / Update
    </$button>
    I hope I have been clear enough in my explanations. Thank you again for your responses, and please do not hesitate to ask me for more information if you need further details.

Best regards,

#4

Give this a try:

<!-- Add a person tiddler -->
<$edit-text field="newname" placeholder="enter a new name"/>
<$button>{{$:/core/images/done-button}}
   <$action-setfield $tiddler={{!!newname}} tags="person"/>
   <$action-deletefield $field="newname"/>
</$button>
<$button>{{$:/core/images/close-button}}
   <$action-deletefield $field="newname"/>
</$button>

<!-- select a person tiddler -->
<$select field="selected">
   <$list filter="[tag[person]]">
      <option><<currentTiddler>></option>
   </$list>
</$select>

<!-- show selected name -->
Selected person={{!!selected}}

Notes:

  • The $edit-text lets you input a new name.
  • The first $button displays a checkmark icon (“ok”). When pressed, it:
    • creates a tiddler using the newname input as the tiddler’s title and tagged with “person”
    • deletes the newname field value, so the $edit-text input is ready for a new entry
  • The second $button displays an X (“cancel”). When pressed, it:
    • deletes the newname field value, so the $edit-text input is ready for a new entry
  • The $select droplist will set a field named “selected”
  • Within the $select widget generate an <option> element for each tiddler tagged with “person”, using that tiddler’s title as the list item value.
  • The value of the currently selected list item is then referenced using {{!!selected}}

Let me know how it goes…

enjoy,
-e

1 Like
#5

@EricShulman Thank you so much for this response; I have just tested the entire code and it works just as I expected. I already have my dropdown list; I just need to link this text area to my dropdown list. Thank you once again.
I will keep you updated on whether or not the implementation of your response works with my code.

Kind regards,