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.
A handful of widgets are frequently useful but haven't been needed 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.
$letThis is a shorter way of writing multiple $set widgets:
<$set name="var1" value="one">
<$set name="var2" value="two">
<<var1>> <<var2>>
</$set>
</$set>
<$let var1="one" var2="two">
<<var1>> <<var2>>
</$let>one two
one two
Later variables within the $let widget can refer to earlier ones:
<$let var1="one" var2=<<var1>>>
var2: <<var2>>
</$let>var2: one
This method is slightly less powerful than using the $set widget repeatedly:
<$vars <<myname>>=<<myvalue>>>, while you can say <$set name=<<myname>> value=<<myvalue>>>.emptyMessage or a filter with $let, as Hiding and Showing Things explains you can do with $set.This said, it's relatively rare to need either of these features, so $let often comes in handy.
There is also a $vars widget. This widget is identical to the $let widget except that it doesn't allow later variables named within the widget to refer to earlier ones. There's no good reason to use $vars anymore; it exists only for backwards compatibility ($let was introduced in version 5.2.1).
$countThis 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 88 sections in this book.
There are 88 sections in this book.
$tiddlerThis is a friendly way of setting the current tiddler. In addition, it 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 access to these 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
$radioThis 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 often good enough.
$selectWhen 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!
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.