Simple checklist macro

I don’t think so. The cheklist is stored in a field and as far as you keep that field, checklist works.

If you like to store the items in another tiddler say mychecklist-tiddler call macro like this.

<$tiddler tiddler="mychecklist-tiddler">

<<short-checklist>>
</$tiddler>

This is really cool, though I do have one question
Is there a way to create a btn to remove an item? I’m not sure how to target a specific segment of text within a field unfortunately

This is a KISS solution, but you can use css and use better filters.
Change your $list widget as below

<$list filter="[list[!!checklist]]" variable=item>
<$button class="tc-btn-invisible">{{$:/core/images/delete-button}}
<$action-listops $field="checklist" $subfilter="-[<item>]"/>
<$action-listops $field="checked" $subfilter="-[<item>]"/>
</$button>
<$checkbox listField="checked" checked=<<item>> >
<<item>>
</$checkbox><br/>
</$list>
1 Like

That works perfectly, honestly

I like this.

For those that want to show active and completed, here is the same code with more separation between checked and unchecked

\define add-item()
<$action-listops $field="checklist" $subfilter="[{!!inflight-checklist-input}]" />
<$action-deletefield $field="inflight-checklist-input"/>
<$action-sendmessage $message="tm-focus-selector" $param=".ChecklistInput"/>
\end

\define delete-item()
<$action-listops $field="checklist" $subfilter="-[<item>]"/>
<$action-listops $field="checked" $subfilter="-[<item>]"/>
\end

\define check-item()
<$action-listops $field="checked" $subfilter="[<item>]" />
<$action-listops $field="checklist" $subfilter="-[<item>]"/>
\end

\define uncheck-item()
<$action-listops $field="checklist" $subfilter="[<item>]" />
<$action-listops $field="checked" $subfilter="-[<item>]"/>
\end

\define checklist()
<$keyboard key="enter" actions=<<add-item>> >
<$edit-text class="ChecklistInput" field="inflight-checklist-input"/>
</$keyboard>
<$button actions=<<add-item>> >Add</$button>

<$list filter="[all[current]has[checklist]]">
__Active__<br/>
<$list filter="[list[!!checklist]]" variable=item>
<$button class="tc-btn-invisible" actions=<<delete-item>>>{{$:/core/images/delete-button}}</$button>
<$checkbox listField="checked" checked=<<item>> checkactions=<<check-item>> >
<<item>>
</$checkbox><br/>
</$list>
</$list>

<$list filter="[all[current]has[checklist]has[checked]]">
<hr/>
</$list>
<$list filter="[all[current]has[checked]]">
__Completed__<br/>
<$list filter="[list[!!checked]]" variable=item>
<$button class="tc-btn-invisible" actions=<<delete-item>>>{{$:/core/images/delete-button}}</$button>
<$checkbox listField="checked" checked=<<item>> uncheckactions=<<uncheck-item>> >
~~<<item>>~~
</$checkbox><br/>
</$list>
</$list>
\end
2 Likes

I liked this thread a lot, so I packaged it up as a plugin with a few enchancements.

The Field-based Check List plugin is a basic, simple and flexible TiddlyWiki plugin used to generate orderable lists or checklists (using drag and drop ).

It sets itself apart from other similar solutions by storing its list items in tiddler fields rather than using tiddlers for each list entry.

3 Likes

Hi @fastfreddy
I like your plugin but I would like to increase the spacing/padding ? between the checkbox and each list entry and edit icon and delete icon.
Could you please tell me what is needed to be changed in the stylesheet tiddler to achieve this.
Thanks for the plugin.

If you just want to change the padding around the text, you might add padding: 0 .35em to the .fbcl declaration. But there does not seem to be a CSS hook at a higher level (@fastfreddy: would it make sense to add .fbcl or fbcl-group or similar to the tc-links-draggable-list span?), so if you want to target the edit/delete buttons as well, we have to get a bit more creative.

Here’s one version that seems to work (only lightly tested):

button:has(.fbcl) {
  .fbcl {padding: 0 .35em;}
  &+button {padding: 0 .25em;}
}

or, as I originally wrote it:

.tc-links-draggable-list:has(.fbcl) li.tc-droppable button {padding: 0 .35em;} 
2 Likes

Hello @Scott_Sauyet,
thank you for your help,

Sorry for the delay in replying, your solution worked for me.

1 Like

more than happy to try @Scott_Sauyet. Is simply adding this style the best approach in your opinion?
<span class="tc-links-draggable-list fbcl">
in \procedure list-filter-draggable definition
in $:/plugins/phiv/field-based-checklist/list-filter-draggable

I am trying to find out the underlying compatibility issue between @BurningTreeC My TiddlyWiki — a non-linear personal web notebook and this plugin. Any pointer would help me save a bit of time…

Maybe, but if you reuse the same class name you have for the item text, you will probably also have to change your CSS a bit. If you use something like .fbcl-list, nothing else would need to change.

I’ll try to look when I’m on a computer, but I don’t have real experience with multicol. What’s the incompatibility?

Released v.0.0.4 that should address this need. Thanks for the tips!

All of the checklists disappear when the murri layout is selected… very odd… They seem to disappear from the DOM even:

vs

Oh, that is bizarre! I’m afraid I have no expertise that might help. You might need to check with @BurningTreeC .

I think I managed to fix the incompatibility by adding the legacy $:/tags/Macro tag in addition to the more modern $:/tags/Global where the procedures are defined. Released plugin’s version 0.0.5 this day.

2 Likes

v.0.0.6 Field-Based Checklist — A list and checklist generator plugin

  • users can now choose numbered or un-numbered lists
  • users can now choose to show checked items at the bottom, top or in the user-defined order

4 Likes

v.0.0.7 Field-Based Checklist — A list and checklist generator plugin

  • users can now choose to show or hide checked or unchecked items.

(my shopping list was getting unwieldy large yet only a few items needed buying, so this features shows me only items I actually need to buy, perfect for small mobile screen)

Compare with above:

3 Likes

Thanks for this compact checklist solution @fastfreddy !

I do want to point out that since this elegant solution relies on double-brackets to separate list items within a field, it is not (in current form) ideal for checklists that would contain links (for linking to contact info, etc.).

So check on [[enterprise]] rental can’t work as a to-do, nor Xfer balance from [[citibank]] to [[credit union]]. Surprisingly, despite the pre-struck-through appearance, Call [[Samantha’s Towing]] did render with a working link, though. If the link ends the to-do item, the link works, but the status of the to-do item is visually unclear.

(This solution does have a “linkify list” option — so that you can add notes about each item on a grocery list, etc…, but that option applies across a whole list, and to each line-item as a whole.)

Right @Springer, this is a limitation resulting (largely) from the design decision to store all list items in a single “list” field.

However, it seems that this solution stores items in a field and still allows links within items somehow: @benwebber 's checklist (in fact this solution seems to do most of what I was working towards, including item re-ordering!). I’ll investigate this approach… My early look points to a CSS styling problem more than anything else, and specifically, this dynamic test falls apart.

containsStr=`[contains:$(searchField)$[$(searchValue)$]]`

I didn’t see a styling issue in Ben’s solution, but the demo doesn’t apply a style dependent upon checked/unchecked status.

There are a few alternatives that also work:

More heavyweight solutions such as @telmiger’s ToDoNow that store each item as a tiddler have a similar limitations, because tiddlers’ titles also shouldn’t contain square brackets.

However, interestingly, @Maurycy’s EvidentlyCube’s TaskList Demo stores each task “title” in the body of a specifically tagged tiddler (and not its title), which can accommodate wikitext. In the “Simple task list” demonstrated at the link above doesn’t parse wikitext when rendering the task list, but the “Task List Showcase - Advanced Work Todo” does show it is possible.

1 Like

My solution stores each list item as a separate tiddler. Since rendering of an item is customizable per task list you can adjust it to parse wiki text - I don’t believe any of the example lists do it but I have it in my own TW instance I use for work.
Disclaimer: I haven’t read the topic entirely, just got pinged so I am clearing things up and hopefully not missing context :slight_smile:

Fantastic; corrected my post above.