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.

The View Template

18th April 2021 at 8:52am

So far, every time we have created a template to display some fields or other useful information about a tiddler, we have had to manually say in each tiddler that we wanted to display that template. For instance, in Ex:AddContactTemplates, you added a {{||ContactInformationTemplate}} to every contact in your wiki. This is convenient when we only want to display the template in a few tiddlers, perhaps in different places, but if we want it at the start or end of every tiddler that matches some obvious criteria, it is boring, error-prone, and a waste of time. Let's look at a better way.

Understanding the ViewTemplate

Speaking of templates, every time TiddlyWiki displays a tiddler in the story river, it uses a template to do so. There are two important templates for this purpose, the ViewTemplate and the EditTemplate. The ViewTemplate controls what displays when the tiddler is viewed, and the EditTemplate controls what displays after you click the edit button. Let's look at the ViewTemplate; the EditTemplate will work very similarly.

If you open up and edit $:/core/ui/ViewTemplate, you'll see something of a hornet's nest of filters. If you look closely at the end, though, you'll spot this bit:

<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem">
    <$transclude tiddler=<<listItem>>/>

This is beautiful, because it means most of the time we need not edit the ViewTemplate itself (and thus have to override a complicated shadow tiddler that could change in a future version of TiddlyWiki). Instead, we merely have to adjust the individual tiddlers tagged with $:/tags/ViewTemplate which define parts of the interface. Go ahead and find that tag in the Explorer and open it up. You'll see that it has a list field, to place the interface elements which appear when rendering a tiddler in a certain order (see Ordering Tiddlers). In a default installation as of TiddlyWiki 5.1.23, the list looks like this:

What we need to do is define our own view tiddler and sneak it into the list wherever we want to display it. We can then transclude the ContactInformationTemplate within that view tiddler. (We could also simply tag the ContactInformationTemplate itself with $:/tags/ViewTemplate, but this would be less flexible, as we'll see in a moment.)

Adding to the ViewTemplate

Let's call our new tiddler $:/yourname/TiddlerTypeTemplates/Contact; this will leave space for us to add similar templates for other types of tiddlers. Drop in {{||ContactInformationTemplate}} there, add the $:/tags/ViewTemplate tag, remove {{||ContactInformationTemplate}} from all your contacts so the information isn't displayed twice, and you should be set.

Actually, there are two small problems. The first is that instead of a header Information about JaneDoe, the double exclamation point is literally appearing on each tiddler. This is because the transclusion is starting in inline mode. Unfortunately, this can be tricky to fix; I find the easiest way is begin with a block-level HTML element instead of wikitext, so here change the !! title to <h2>title</h2>. In this case, there's no way TiddlyWiki can parse it wrong; an <h2> simply cannot be an inline element, whereas !! can be since it could be part of some running text.

The second is that our contact information is now appearing even on tiddlers that aren't contacts! Oops. Fixing this part is left as an exercise.


Exercise: (m) [Ex:ContactsOnlyOnContacts]

Adjust the $:/yourname/TiddlerTypeTemplates/Contact component of the ViewTemplate so that the contact information template is used only on tiddlers tagged Contact.

go to answer

Exercise: (m) [Ex:MoveContactInformation]

Move the contact information above the rest of the tiddler's body, rather than below it.

go to answer

Exercise: (s) [Ex:MeetingInformation]

Put the MeetingInformationTemplate on meetings globally as well.

go to answer

Exercise: (m) [Ex:EditTemplateInformation]

Add the tiddlers under $:/yourname/TiddlerTypeTemplates/ to the edit template as well. What do you notice about where they appear? Does it make sense to have them here?

go to answer

Exercise: (m) [Ex:DontOverrideViewTemplateTag]

In Ex:MoveContactInformation, we edited the list field of $:/tags/ViewTemplate, which means that we now have an overridden shadow tiddler for that tag. (You can confirm this by looking under the tag pill or in the Shadows or Explorer sidebar view – it will no longer be listed in bold.)

In this case, that's not the end of the world, since the tag contains no body text and it's relatively unlikely extra elements will be added to this list in a future version of TiddlyWiki (thus necessitating a manual merge if we want them to show up). However, suppose we want to be purists and avoid overriding a shadow tiddler unless absolutely necessary. How can we achieve the same effect without needing to override $:/tags/ViewTemplate?

Delete the overridden shadow tiddler $:/tags/ViewTemplate prior to attempting this exercise to put your $:/yourname/TiddlerTypeTemplates/ templates back in their default position, so you can tell if you've succeeded.

go to answer


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

↑ 6: Looking Under the Hood