This is a stripped-down version of a single section of Grok TiddlyWiki, optimized for fast loading and readability by search engines. Some features are missing.

For the full Grok TiddlyWiki experience, please visit the wiki version of this page.

Your First Dynamic List

9th April 2021 at 12:20pm

Searching with filters is all very nice, but what if we want to look for the same thing all the time? For instance, we probably often need to go back and look at our notes from recent meetings. It would be nice to have a list of all our meetings from newest to oldest, rather than having to remember what we called each meeting or exactly when it was and search for it.

Fortunately, one of the things TiddlyWiki does best is create dynamic lists – lists of tiddlers or other content that automatically update as the wiki changes. Dynamic lists take a filter and do something with all of the tiddlers that filter returns. In Slicing Up Content, we said the role of a tiddler containing a dynamic list was much like that of a sentence: it describes the relationships between other things.

Let's create a new tiddler and call it MeetingList. If we want to give it a tag, we could tag it Tool.

Creating a $list widget

The $list widget is among the most important and frequently used TiddlyWiki widgets. This widget is named quite appropriately for our purpose, since we're trying to create a list, but you can also use a list widget to accomplish some other things that don't necessarily look like they involve listing anything. We'll see more of those uses later.

Here's how we create a list of meetings from the output of a filter:

<$list filter="[tag[Meeting]]"></$list>

That was easy. But wait, there's something wrong…all of the meeting names are run together in a single line, without even a space between them!

When the list widget is used without any contents, like we did above, it simply plops each tiddler title that the filter returns right after the previous one. In HTML, line breaks only happen when you explicitly ask for them, either with a rich formatting tag like </p> to indicate the end of a paragraph or </li> to indicate the end of a list item, or with the simple <br> for a line break. Let's fix this by adding a <br> between each item:

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

That's better! But you're probably wondering, what the heck is this <<currentTiddler>> thing? We'll be talking more about the concept of the current tiddler, as well as the <<double angle bracket>> syntax, in chapter 4. For now, just think of it as a placeholder for “the item in the list currently being processed”. (If you've done any programming, the $list widget is much like a loop: the contents of the widget are displayed once for each output tiddler in the filter.)

There's one more problem here, which is that we haven't actually listed our meetings from newest to oldest. Let's fix that by adding a sort filter step:

Here are all your meetings from newest to oldest:

<$list filter="[tag[Meeting]!sort[at]]">

The future

In this example, we only see a list of tiddler titles that match the search criteria, which is nifty but hardly revolutionary. However, it turns out we can actually display any information we want that can be derived from the contents of the tiddlers we're listing: any field on those tiddlers, the tiddlers they link to, the number of tags they have, and so on. We'll learn how to do this in the next chapter.


Exercise: (m) [Ex:JaneMeetingList]

Modify the MeetingList so that only meetings that Jane attended are shown. Be careful not to exclude meetings that Jane attended along with other people.

go to answer

Exercise: (m) [Ex:BulletedMeetingList]

Modify the MeetingList so that instead of separating the meetings with a simple line break, they form a bulleted list.

Hint 1: Remember that HTML code for creating a bulleted list?

Hint 2: The contents of the list widget are rendered once for every tiddler output by the filter. Which parts of the HTML code for creating a list need to be used repeatedly, and which need to be used only once?

go to answer

Exercise: (m) [Ex:ContactList]

Create a ContactList, similar to our MeetingList, that shows all contacts in alphabetical order by their first name.

Tip: To create a new tiddler and start it with the contents of an existing tiddler, click the "more" drop-down on the existing tiddler's toolbar and choose Clone.

go to answer

Exercise: (m) [Ex:ContactListNoPhoneExclusion]

Modify the ContactList so that contacts with no phone number are excluded.

go to answer

Exercise: (m) [Ex:LinkPattern]

There's a problem with this pattern that we've been using throughout this section to create a list of links to tiddlers:

<$list filter="a filter">

The problem is that if the name of the currentTiddler has a space in it, it is not linked. The only reason the results have displayed correctly so far is that they're in CamelCase and as such are linked automatically.

To explicitly create internal links, as we alluded to back in Widgets, we can use the $link widget:

<$link to="Tiddler Name to Link To">Text of the Link</$link>

Add a space to the title of one of your meeting tiddlers, so you can see the problem, then modify the MeetingList you created in Ex:BulletedMeetingList, using the $link widget to fix this problem.

Hint: <<currentTiddler>> will get replaced in more places than you might think.

go to answer


Takeaways are not available in the static version of Grok TiddlyWiki. Visit the wiki version of this page to study takeaways.

↑ 3: Filtering and Formatting