Tiddlywiki5, formatting filter results

Question

Given a filter like [tag[introduction]], how can I modify the formatting of the displayed results, for example like adding white-spaces between each one, or setting up a bullet list out of them?

Here for more info about TiddlyWiki filters.

Answer 1

You're much more likely to get a quick answer on the google groups.

A filter by itself does not render anything, widgets do... and subsequently macros.

So, simply put, your desired item-format inside the list widget that renders it:

<$list filter="[tag[TableOfContents]]">
<$link to=<<currentTiddler>>><$view field=title/></$link>&nbsp;
</$list>

Tip: Try any of this creating a test tiddler directly on http://tiddlywiki.com.

This renders a link to each iterated item on the list showing its title. Notice the   at the end to provide for simple spacing.

When the inner text of a list widget starts with an empty line, TiddlyWiki understands your code as wanting to have block-level paragraph elements, rather than an inline list.

<$list filter="[tag[TableOfContents]]">

<$link to=<<currentTiddler>>><$view field=title/></$link>
</$list>

However, I sometimes prefer using a nice » » and a trailing newline via <br>...

<$list filter="[tag[TableOfContents]]">
&raquo; <$link to=<<currentTiddler>>><$view field=title/></$link><br>
</$list>

Alternatively you can use a template tiddler defining the item template, i.e.

<$list filter="[tag[GettingStarted]]" template="$:/.sagado/templates/my-list"/>

With a standard template ...

<$list filter="[tag[TableOfContents]]" template="$:/core/ui/ListItemTemplate"/>

This is perhaps the cleanest approach as it allows you to reuse that template elsewhere.

Alternatively, use the list-links macro to output simple link lists, e.g.:

<<list-links filter:"[tag[TableOfContents]]">>

Note: Notice the syntax differences between a macro and a widget call, i.e. double angle brakets and colons for (optionally named) parameters, rather than attrib="value".

You can easily wrap this in your custom css class, e.g.

@@.my-class
<<list-links filter:"[tag[TableOfContents]]">>
@@

To properly render tables or definition lists, use html tags outside and inside...

<dl>
<$list filter="[has[url]]">
<dt><$link to=<<currentTiddler>>><$view field=title/></$link></dt>
<dd>{{!!url}}</dd>
</$list>
</dl>

Here's an a bit more elaborate table syntax using a macro to generate a link...

\define link(url) [ext[>>|$url$]]
<table>
<tr><th>Title</th><th>Link</th></tr>
<$list filter="[has[url]]">
<tr>
<td><$link to=<<currentTiddler>>><$view field=title/></$link></td>
<td><$macrocall $name=link url={{!!url}}></td>
</tr>
</$list>
</table>

For more, see...

http://tb5.tiddlyspot.com/#How%20to%20style%20lists