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.

Miscellaneous Widgets

 16th October 2024 at 8:03pm

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">&nbsp;Exercises</$radio>&ensp;
<$radio tiddler="$:/temp/RadioExample" value="Section">&nbsp;Sections</$radio>&ensp;
<$radio tiddler="$:/temp/RadioExample" value="Takeaway">&nbsp;Takeaways</$radio>

<<list-links "[all[tiddlers+shadows]tag{$:/temp/RadioExample}first[5]]">>

What do you want to look at?

    Note the use of &nbsp; and &ensp; 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

      Exercise: (m) [Ex:SetLetReplacement]

      Locate several places in your sample wiki where you have used $set widgets and replace them with equivalent $let widgets.

      Exercise: (m) [Ex:CountWidgetReplacement]

      Go to the WikiStatistics tiddler, originally created in the exercise Ex:WikiStatistics, and replace any numbers that you can with an appropriate $count widget.

      go to answer

      Exercise: (m) [Ex:FamilyRadioButton]

      Add a series of radio buttons on the ContactInformationTemplate that allow you to view some information about each family member of the current tiddler.

      go to answer

      Exercise: (m) [Ex:ContactCard]

      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.

      go to answer

      Takeaways

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

      ↑ 8: Tips and Tricks