Seeking Assistance with Multiple Checkboxes and a Formatting Toolbar

[auguste_aug]

Hello TiddlyWiki Community,

As a newcomer to the TiddlyWiki platform, I am developing an educational dashboard and am seeking assistance to enhance user interaction with the following features:

1. Multiple Selections via Checkboxes: Currently, the dashboard uses dropdown lists for selecting “Person” and “Note Type.” I wish to transition these to checkboxes to allow for multiple selections, ensuring that the final note includes all the choices previously marked.
2. Text Formatting Toolbar: I want to integrate a formatting toolbar in the text area, giving users the capability to format their notes conveniently with options like bold, italic, lists, etc.
3. Person Management Options: While the current setup allows for adding “Persons,” I also need to implement a “Delete” option to manage these entries more effectively.

I’m encountering difficulties in storing and retrieving selections from multiple checkboxes in the final note tiddler. Additionally, I’m unsure how to integrate a formatting toolbar and the delete functionality for “Persons.”

Could you please provide guidance, code snippets, or point me toward plugins that could help achieve these functionalities? Any advice or direction would be greatly appreciated.

Below is the current code I am working with:

  <$view tiddler="TABLEAU DE BORD EDUCATEURS" field="title"/>
</h1>

<!-- Add a person tiddler -->
<$edit-text field="newname" placeholder="Ajouter Une Personne"/>
<$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>


<hr style="border: 0; height: 2px; background-color: #4A90E2;">

<details open><summary style="color: #4A90E2; font-weight: bold;">''Nouvelle note saisie par :  {{$:/status/UserName}}''    (Modifier l'utilisateur : <$edit-text tiddler="$:/status/UserName" tag="input" default=""/>)</summary>

<div style="background-color: #f9f9f9; padding: 1em; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 1em;">

  <label style="display: block; margin-top: 1em; font-weight: bold;">Personne :</label>
  <$select tiddler="$:/temp/notes" field="person" style="width: 100%; padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
    <$list filter="[tag[person]]">
      <option value=<<currentTiddler>>>
        <$view field='title'/>
      </option>
    </$list>
  </$select> 

  <label style="display: block; margin-top: 1em; font-weight: bold;">Type de note :</label>
  <$select tiddler="$:/temp/notes" field="note-type" style="width: 100%; padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;">
    <$list filter=""" [[incident]] [[sanction]] [[médical]]""">
      <option value=<<currentTiddler>>>
        <$view field='title'/>
      </option>
    </$list>
  </$select>

  <div style="margin-top: 1em;">
    <$checkbox tiddler="$:/temp/notes" listField="tags" checked="followup" unchecked="" default="" style="margin-right: 1em;"/> 
    Besoin de suivi

    <$checkbox tiddler="$:/temp/notes" listField="tags" checked="urgent" unchecked="" default="" style="margin-right: 1em;"/> 
    Urgent

    <$checkbox tiddler="$:/temp/notes" listField="tags" checked="fieldnotes" unchecked="fieldnotes" default="fieldnotes" disabled style="margin-right: 1em;"/> 
  Validez les Saisies  [Ne doit pas être désélectionné]
  </div>

  <label style="display: block; margin-top: 1em; font-weight: bold;">Notes :</label>
  <$edit-text 
    tiddler="$:/temp/notes" field="text" 
    auto-height="yes" focus="yes" size="100%" tag="textarea" 
    placeholder="Entrez le texte ici" 
    style="width: 100%; padding: 0.5em; border: 1px solid #ccc; border-radius: 4px;"
  />

</div>

</details>

<$button style="background-color: #4A90E2; color: white; padding: 0.5em 1em; border: none; border-radius: 4px; margin-top: 1em; cursor: pointer;">
  <$action-createtiddler 
    $basetitle={{{ [{$:/status/UserName}addsuffix[_]addsuffix<now>] }}} 
    text={{$:/temp/notes}} 
    person={{$:/temp/notes!!person}} 
    note-type={{$:/temp/note-type}} 
    tags={{{ [{$:/temp/notes!!tags}] }}}
  />
  Créer la note
</$button> 

Thank you all in advance for your support and valuable advice!

Best regards,
Auguste

[TW_Tones]

@auguste_aug I will look at your code shortly but working examples make giving advice much easier.

1. Have you looked at the lisfield form of checkboxes?
2. We call the text formatting toolbar the “Editor toolbar”, it Normaly displays when editing the text field. Are you doing something differently?
3. Rather than deleting the person do you mean remove them from a list?

[auguste_aug]

@TW_Tones
Thank you very much for your prompt response and suggestions. I appreciate the guidance and am happy to provide further details to clarify my request.

1. Regarding Lisfield Checkboxes: I wasn’t fully aware of this specific feature. My aim is to enable users of my dashboard to select multiple “Persons” and “Note Types” via checkboxes for a note entry.

2. For the Text Formatting Toolbar: I am looking to add standard formatting options (like bold, italic, lists) within a text field dedicated to note entry. It seems I was not referring to the standard “Editor Toolbar” of TiddlyWiki but rather wanted to integrate a similar functionality for this purpose. I wonder if there is a standard way to do this or if a plugin might be required.

3. Deleting a Person: To clarify, I wish to offer the possibility to remove a “Person” from a specific list in the dashboard, rather than deleting the entire tiddler. My intention is to dynamically manage the associations between notes and persons, allowing users to update these associations as needed.

I would appreciate any further help or specific code examples regarding these points.

Best regards, Auguste

[TW_Tones]

In your above words you are omitting to tell us where these values are to be stored. Where are persons stored, where are the notes and what are note types and where are they stored.

• I can possibly give you answer based on the above but I will take a lot of work first to try and determine what you are saying 1st.
• Can you improve the “requirements please”

[auguste_aug]

@TW_Tones Thank you for your response and for asking for further clarification. I appreciate the opportunity to provide more detailed information about how “Person” and “Notes” are stored and managed in my TiddlyWiki dashboard.

As you rightly pointed out, understanding where and how these elements are stored is crucial for providing accurate guidance. Here is a clearer explanation:

Person: When a new person is added through the dashboard, a new tiddler is created with the name provided in the newname field. This tiddler is tagged “person,” making it recognizable as a person within the wiki. These tiddlers serve as the data source for populating the “Person” dropdown list in the note creation section.

• Notes: For each note created, a new tiddler is generated, with its title comprised of the user’s name and a timestamp to ensure uniqueness. The content of the note comes from a text field, and selections for “Person” and “Note Type” are intended to be captured in specific fields within this tiddler. My goal is to modify this setup to allow for multiple selections via checkboxes, thus increasing flexibility in note assignment.

I hope this sheds more light on my setup and the functionalities I’m aiming to improve. Any insights or examples of how to efficiently implement these features, particularly the dynamic updating of dropdown lists and the introduction of a deletion option for “People,” would be immensely helpful.

Thank you once again for your time and assistance.

Best regards,
Auguste

[EricShulman]

@auguste_aug

…selections for “Person” and “Note Type” are intended to be captured in specific fields within this tiddler. My goal is to modify this setup to allow for multiple selections via checkboxes, thus increasing flexibility in note assignment.

Instead of checkboxes, have you considered using the multiple=yes feature of the $select widget? By adding this parameter to the widget, it converts the default single-selection “droplist” into a multi-select listbox. You can then use ctrl-click or shift-click to select multiple items from the list. The selections are automatically stored in the target field as a space-separated list of items, with square brackets added around items that contain spaces.

Here’s an example

<!-- select one or more people -->
<$select field="person" multiple="yes" size="10">
   <$list filter="[tag[person]]"><option><<currentTiddler>></option></$list>
</$select>

<!-- show person field value -->
{{!!person}}

<!-- show person items, one at a time -->
<$list filter="[enlist{!!person}]" variable="thisperson">
   <<thisperson>><br>
</$list>

enjoy,
-e