Double Chocolate with Filters

Tips & Tricks
, ,
#1

:chocolate_bar: Two-Step Filter Generation for Delicious TiddlyWiki Results

Ever wanted to dynamically bake a filter before TiddlyWiki even gets to chew on it? Meet “Double Chocolate with Filters”—a technique where:

  1. First Chocolate Layer (Filter Generation):
  • Use backticks (``) or {{{ ... }}} to substitute variables into a filter string.
  • This creates a custom filter recipe on the fly.
  1. Second Chocolate Layer (Execution):
  • The generated filter is fed to a widget (<$list>, <$set>, etc.), which then serves the results.

Basic Recipe: Simple Search Procedure

\procedure simple-search(searchTerm, fields:"title,tags")
<$list filter=`[!is[system]search:$(fields)$:literal<searchTerm>]`>
    <!-- you wikitext goes here .. -->
   🍪 <$link/> (Found in: <<fields>>)<br>
</$list>
\end

Example i

<<simple-search "HelloThere">>

Testing on TiddlyWiki v5.3.7 — a non-linear personal web notebook will produces:

image
image694×423 38.4 KB

and this one

<<simple-search "HelloThere" "caption, list">>

produces

image
image694×222 11.8 KB

What happens here? In the

filter=`[!is[system]search:$(fields)$:literal<searchTerm>]`

TiddlyWiki first substitute the $(fields)$ variable into filter string, the filter string passed to $list widget and it produces results.

Second Recipe: Simple Search ii

Code taken from core tiddler: $:/core/ui/DefaultSearchResultList

\procedure simple-search-ii(configTiddler)
<$list filter={{{ [<configTiddler>get[first-search-filter]] }}} emptyMessage={{$:/language/Search/Matches/NoResult}}>
<span class={{{[<currentTiddler>addsuffix[-primaryList]] -[<searchListState>get[text]] +[then[]else[tc-list-item-selected]] }}}>
<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
</span>
</$list>
\end

Example ii

<$let userInput="HelloThumbnail">
<<simple-search-ii "Second Recipe: Double Chocolate">>
</$let>
  • where the first-search-filter field of Second Recipe: Double Chocolate tiddler contains the below filter string: [!is[system]search:title<userInput>] will produces

image
image694×467 32.4 KB

In this example, the expression filter={{{ [<configTiddler>get[first-search-filter]] }}} works in two stages:

  1. First, the {{{ ... }}} operator retrieves the filter string from the first-search-filter field of the configTiddler tiddler
  2. Then, the resulting filter string is passed to the $list widget which executes it to generate the final results
6 Likes