A handful of widgets are frequently useful but haven't been needed much or at all in this book thus far. Here is a quick introduction to each of them. For a full listing of all widgets, visit the appropriate page of the TiddlyWiki documentation.
$count
This is a shorter way of displaying the number of tiddlers that match a filter.
There are <$text text={{{ [all[tiddlers+shadows]tag[Section]count[]] }}}/> sections in this book.
There are <$count filter="[all[tiddlers+shadows]tag[Section]]"/> sections in this book.
There are 92 sections in this book.
There are 92 sections in this book.
$tiddler
Several times in passing, we've mentioned that the $tiddler
widget is a friendly way of setting the current tiddler. In truth, it actually does a little more than just setting the currentTiddler
variable would, by setting some variables to CSS classes appropriate to the new current tiddler. This is more esoterica than anything else, but on occasion having these correct might be important or useful.
<$set name="currentTiddler" value="New Current Tiddler">
<<currentTiddler>>
</$set>
<$tiddler tiddler="New Current Tiddler">
<<currentTiddler>>
</$tiddler>
New Current Tiddler
New Current Tiddler
$radio
This allows you to create a radio button. Radio buttons work much like the $edit-text
widget and the $checkbox
widget. You use them by listing several values the user can choose from in separate $radio
widgets, and TiddlyWiki will decide which one to show as selected based on the value of the bound field.
The tiddler
attribute defaults to the current tiddler, and the field
attribute to text
, but either can be set to something else if desired. Below, we bind our radio buttons to the text
field of a temporary tiddler.
What do you want to look at?
<$radio tiddler="$:/temp/RadioExample" value="Exercise"> Exercises</$radio> 
<$radio tiddler="$:/temp/RadioExample" value="Section"> Sections</$radio> 
<$radio tiddler="$:/temp/RadioExample" value="Takeaway"> Takeaways</$radio>
<<list-links "[all[tiddlers+shadows]tag{$:/temp/RadioExample}first[5]]">>
What do you want to look at?
Note the use of
and  
to handle spacing. These are called HTML entities, a way of writing characters that don't have keys on the keyboard or have special meaning in HTML. The former is a non-breaking space (the same width as a normal space, but the browser will prefer not to put a line break there, unless there is no other way to make the line fit on the screen), and the latter is an en space (longer than a normal space, the width of a lowercase n). A more flexible way to handle the spacing between the buttons would be using CSS rules, but spaces are simpler and often good enough.
$select
When you have more than a couple choices, you may wish to present them as a drop-down menu rather than as radio buttons. Let's rewrite the radio-buttons example to use a drop-down instead:
What do you want to look at?
<$select tiddler="$:/temp/SelectExample" default="">
<option value="">(choose an option)</option>
<option value="Exercise">Exercises</option>
<option value="Section">Sections</option>
<option value="Takeaway">Takeaways</option>
</$select>
<<list-links "[all[tiddlers+shadows]tag{$:/temp/SelectExample}first[5]]">>
What do you want to look at?
Sometimes you might want to populate the drop-down menu dynamically, rather than listing out a number of options. This is easy to do with a $list
widget:
Section:
<$select tiddler="$:/temp/SectionSelectorExample" default="">
<option value="">(choose a section)</option>
<$list filter="[all[tiddlers+shadows]tag[Section]]">
<option value=<<currentTiddler>>>
<<currentTiddler>>
</option>
</$list>
</$select>
<$list filter="[{$:/temp/SectionSelectorExample}!is[blank]]" variable="selectedTiddler" emptyMessage="Please choose a section.">
The blurb of the section //<<selectedTiddler>>// is “<$transclude tiddler=<<selectedTiddler>> field="description"/>”
</$list>
Section:
Please choose a section.
You can do something similar for radio buttons if you like, but it's more typical to use a drop-down when you aren't sure in advance what items will be in the list – if at some point in the future there are unexpectedly 200 items rendering as radio buttons, your tiddler might be pretty hard to use!
$vars
$vars
normally isn't useful anymore, but you are likely to encounter it in older wikitext, so it's good to know about. It's exactly the same thing as the $let
widget, except that it doesn't allow later variables named within the widget to refer to earlier ones. (That is, in a $let
widget each variable is set before evaluating the value of the next attribute, but in a $vars
widget no new variables are set until the body of the widget begins.)
Exercises
Locate several places in your sample wiki where you have used $set
widgets and replace them with equivalent $let
widgets.
Go to the WikiStatistics
tiddler, originally created in the exercise Ex:WikiStatistics, and replace any numbers that you can with an appropriate $count
widget.
Add a series of radio buttons on the ContactInformationTemplate
that allow you to view some information about each family member of the current tiddler.
Create a tiddler called ContactCard
that displays a drop-down menu from which you can select any contact in the wiki. Underneath the drop-down menu, the selected contact is transcluded through the ContactInformationTemplate
, showing the contact's details.