This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

Creating SubStories

27th November 2021 at 3:22am

This example shows how to create a sub-story within a tiddler that is independent of the main story. The NavigatorWidget and ListWidget work together to:

  1. Add tiddlers to the story when links are clicked. Navigate to the tiddler corresponding to the link click. (story attribute of the NavigatorWidget)
  2. Remove tiddlers from the story when tiddler close buttons are clicked. (story attribute of NavigatorWidget)
  3. Animate the opening and closing of tiddlers. (storyview attribute of the ListWidget)
  4. Display the list of open tiddlers. (filter and template attributes of the ListWidget)
  5. Display tiddlers in draft mode. (editTemplate attribute of the ListWidget)
  6. Track navigation history. (history attribute of both NavigatorWidget and ListWidget)
  7. And more!

Here is the example code (see also StateMechanism for related discussion):

<$navigator story="$:/temp/DemoStoryList" history="$:/temp/DemoHistoryList">

{{$:/core/ui/SideBarSegments/search}}

<$list
  filter="[list[$:/temp/DemoStoryList]]"
  history="$:/temp/DemoHistoryList"
  template={{$:/config/ui/ViewTemplate}}
  editTemplate={{$:/config/ui/EditTemplate}}
  storyview="classic"
  emptyMessage="Use search box above. Clicked search links will open here instead of in the main story.<p>No search ideas? Click this link to get started: HelloThere</p>"/>

</$navigator>

That renders as:

Use search box above. Clicked search links will open here instead of in the main story.

No search ideas? Click this link to get started: HelloThere