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.

Creating Tiddlers With Predefined Fields

27th March 2021 at 11:30am

In our office wiki, we have a number of types of tiddlers that we often need to create with particular text and fields. In particular, let's focus on contacts and meetings. Right now, it's fairly complicated to add one of these – we have to remember what fields and standard content we want to add to each. It would be better if, like with the built-in journal button, we could prefill some values in the tiddler's fields.

TiddlyWiki has a built-in message called tm-new-tiddler that can help us do this. A message is a way of triggering a specific action to take place in the wiki – when you trigger a message, any widgets higher up the widget tree are given the opportunity to respond to the message. That is, if you trigger a message within a button, the button can respond, the HTML element containing the button can respond, and so on up to the level of the whole wiki. This is much like the way TiddlyWiki refreshes elements after a tiddler is changed, but the news propagates the other way: news of refreshes starts at the top of the wiki and works its way down the widget tree to each element on a page, while a message starts at an individual element and works its way up the widget tree until it reaches the root widget (the very top of the tree).

You can trigger a message using the $action-sendmessage widget. This is a new type of widget that we haven't seen before, called an action widget. (As you might have guessed, the names of all action widgets begin with $action-.) An action widget doesn't display anything on the screen, but instead causes something to happen – creating a new tiddler, navigating somewhere, sending a message, etc. An action widget can't stand alone in a tiddler but has to be part of a button or other triggerable element, or it will never do anything (if TiddlyWiki didn't enforce this restriction, the action would fire randomly whenever something happened that triggered its containing tiddler to refresh itself, which you probably wouldn't want!).

Here's how this looks in practice for creating a new tiddler:

\define newTiddlerActionWidget()
    title="My New Tiddler"
    tags="[[My First Tag]] [[My Second Tag]]" />

<$button actions=<<newTiddlerActionWidget>>>New Tiddler</$button>

It's also possible to put the action widget inside the $button widget along with the text of the button:

    title="My New Tiddler"
    tags="[[My First Tag]] [[My Second Tag]]" />
  New Tiddler

This second method is widespread in the wild, but it's usually better to avoid it nowadays, as it's deprecated and could be removed in a future version of TiddlyWiki.

In either case, when you click on the button, the action will be triggered, which will send a tm-new-tiddler message, which will create a new draft tiddler with the fields you've defined in the attributes of the action widget and open it for editing.

If you like, you can put several action widgets within the macro or the $button widget. They will be triggered in sequence when the button is clicked.


Exercise: (s) [Ex:NewContactButton]

Create a button that creates a new contact. The created tiddler should contain the four fields we've been using, email, family, manager, and phone, but empty ready for the user to fill in; it should also have a title of New Contact and be tagged with Contact.

go to answer

Exercise: (m) [Ex:NewMeetingButton]

Create a similar button for a new meeting. The at field should be populated with the current time in the standard TiddlyWiki date/time format, down to the minute (i.e., the seconds and milliseconds should be zero).

go to answer

Exercise: (m) [Ex:ButtonsOnPageToolbar]

Add these new buttons (created in Ex:NewContactButton and Ex:NewMeetingButton) to the toolbar above the search box in the sidebar. This will require applying a tag to their tiddlers.

go to answer

Exercise: (m) [Ex:SelectiveButtonDisplay]

You may have noticed, as you completed the above exercise, that the list of items that have the page controls tag is quite a lot longer than the buttons that currently appear on the toolbar. Explore your wiki to figure out how the buttons are selectively shown or hidden.

go to answer

Exercise: (M) [Ex:ButtonDisplayTweaks]

Our buttons don't display very nicely:

  • They're absolutely gigantic on the toolbar and have text on them instead of an icon.
  • Their shape doesn't match that of the other tiddlers.
  • They don't have tooltips.
  • They don't have a description in the Tools tab of the sidebar.

Correct these issues. You'll want to refer to an existing tiddler on the toolbar to see how each of these things is done.

Tip: The fastest way to choose an icon from the set that comes with TiddlyWiki is to open the tag manager and pretend to pick an icon from the drop-down. Each icon shows its full tiddler name, so you can then use that name elsewhere.

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