Thanks @Scott_Sauyet for the field option.
Nice to have the choice.
Sunny
Hi @Scott_Sauyet thank you for your contribution! Your solution looks way more simple than mine, i tryed to use but the links to the next tiddles are show in lines
Did you include the CSS?
Put the following in a tiddler that has the tag, $:/tags/Stylesheet:
nav.footer {
display: flex;
font-size: 90%;
border-top: 1px solid #ccc;
flex-direction: row;
.prev, .next, .up {flex: 0 0 auto; width: 33.3%;}
.up {text-align: center;}
.next {text-align: right;}
}
You could also add it to a <style>...</style> tag inside the view template, but I always prefer separate stylesheets.
Thank you, it’s another configuration in my stylesheet, i tryed your code in a new tiddlywiki and it worked perfectly!
Thanks guys!
If the selectors in that stylesheet are not specific enough, or if they conflict with other styles you have, it should be easy to alter the markup and alter the outer selector in the stylesheet to match.
<div class="my-wrapper"><nav class="footer">
<!-- ^^^^^^^^^^^^^^^^^^^^^^^^ -->
<div class="prev"><% if [<prev>!match[]] %>
<!-- ... -->
<% endif %> </div>
<!-- ^^^^^^ -->
</nav></div>
div.my-wrapper nav.footer {
/* ^^^^^^^^^^^^^^ */
display: flex;
font-size: 90%;
/* ... */
}
Hello forum,
I’d like to navigate via timeline. Therefore I have 2 fields:
- “erstellt” (date for better reading)
- “published” (=converted “erstellt” field)
This are my Test tiddlers:
Now it shows always the field of the current tiddler in the navigation.
How do I show the correct “erstellt” field of the tiddler in the navigation?
I tried to transclude, but wasn’t successful 
<% if [<currentTiddler>has[erstellt]] %>
<$let
published = {{!!published}}
prev = {{{ [has[published]sort[published]] :filter[get[published]compare::lt<published>] +[last[]] }}}
next = {{{ [has[published]sort[published]] :filter[get[published]compare::gt<published>] +[first[]] }}}
>
<nav class="footer">
<div class="prev"><% if [<prev>!match[]] %>
<$link to=<<prev>> > <span style="color: rgb(255, 201, 102)">← </span><<prev>> <span style="font-size: 70%; color: rgb(144, 238, 144)"><$view field="published" format="date" template="DD. MMM YYYY"/></span></$link>
<% endif %> </div>
<div class="next"><% if [<next>!match[]] %>
<$link to=<<next>> > <<next>> <span style="font-size: 70%; color: rgb(144, 238, 144)"><$view field="published" format="date" template="DD. MMM YYYY"/></span> <span style="color: rgb(255, 201, 102)"> → </span></$link>
<% endif %> </div>
</nav>
</$let>
<% endif %>
<style>
nav.footer {
display: flex;
padding-top: 0.6em;
font-size: 90%;
flex-direction: row;
.prev, .next, .up {flex: 0 0 auto; width: 50%;}
.next {text-align: right;}
}
</style>
Thanks for feedback
Stefan
Maybe you can use a function:
\function fn.view.nav(which) [<which>getvariable[]get[erstellt]]
in the prev/next links like this:
<nav class="footer">
<div class="prev"><% if [<prev>!match[]] %>
<$link to=<<prev>> > <span style="color: rgb(255, 201, 102)">← </span><<fn.view.nav prev>> <span style="font-size: 70%; color: rgb(144, 238, 144)"><$view field="published" format="date" template="DD. MMM YYYY"/></span></$link>
<% endif %> </div>
<div class="next"><% if [<next>!match[]] %>
<$link to=<<next>> > <<fn.view.nav next>> <span style="font-size: 70%; color: rgb(144, 238, 144)"><$view field="published" format="date" template="DD. MMM YYYY"/></span> <span style="color: rgb(255, 201, 102)"> → </span></$link>
<% endif %> </div>
</nav>
Here I just replaced <<prev>> and <<next>> inside the link label by function calls <<fn.view.nav prev>> and fn.view.nav next>>, I did not try to change your <$view> widgets.
Fred
Is this not what you wanted to see? What exactly do you expect for each link? Could you show an example or a mockup?
You need to specify the tiddler=... param in your $view widgets, like this:
<$view tiddler=<<prev>> field="published" format="date" template="DD. MMM YYYY"/>
and
<$view tiddler=<<next>> field="published" format="date" template="DD. MMM YYYY"/>
-e
1 Like
Sorry @tw-FRed, if I’m not clear:
I’d like to see the prev / next of current tiddler based on timeline (field “published”):
You need to replace
<$view field="published" format="date" template="DD. MMM YYYY"/>
with
<$view tiddler=<<prev>> field="published" format="date" template="DD. MMM YYYY"/>
<!-- ^^^^^^^^^^^^^^^^ -->
and
<$view tiddler=<<next>> field="published" format="date" template="DD. MMM YYYY"/>
<!-- ^^^^^^^^^^^^^^^^ -->
oops, beaten to it by Eric, as usual! 
Thanks @EricShulman, @Scott_Sauyet and @tw-FRed
This code works fine:
<% if [<currentTiddler>has[erstellt]] %>
<$let
published = {{!!published}}
prev = {{{ [has[published]sort[published]] :filter[get[published]compare::lt<published>] +[last[]] }}}
next = {{{ [has[published]sort[published]] :filter[get[published]compare::gt<published>] +[first[]] }}}
>
<% if [<currentTiddler>has[erstellt]] %>
<$let
published = {{!!published}}
prev = {{{ [has[published]sort[published]] :filter[get[published]compare::lt<published>] +[last[]] }}}
next = {{{ [has[published]sort[published]] :filter[get[published]compare::gt<published>] +[first[]] }}}
>
<nav class="footer">
<div class="prev"><% if [<prev>!match[]] %>
<$link to=<<prev>> > <span style="color: rgb(255, 201, 102)">← </span><<prev>> <span style="font-size: 70%; color: rgb(144, 238, 144)"><$view tiddler=<<prev>> field="published" format="date" template="DD. MMM YYYY"/></span></$link>
<% endif %> </div>
<div class="next"><% if [<next>!match[]] %>
<$link to=<<next>> > <<next>> <span style="font-size: 70%; color: rgb(144, 238, 144)"><$view tiddler=<<next>> field="published" format="date" template="DD. MMM YYYY"/></span> <span style="color: rgb(255, 201, 102)"> → </span></$link>
<% endif %> </div>
</nav>
</$let>
<% endif %>
<style>
nav.footer {
display: flex;
padding-top: 0.6em;
font-size: 90%;
flex-direction: row;
.prev, .next, .up {flex: 0 0 auto; width: 50%;}
.next {text-align: right;}
}
</style>
Very nice 
Oh, my bad, I didn’t notice the date didn’t match the tiddler title! Thanks for the explanation 
Fred
Hello @EricShulman,
I tried to display also the tags of the tiddler in the navigation with <$transclude $variable=tag-pill tag={{!!tags}}/> - but I failed. It shows the tags of the current tiddler:
<div class="next"><% if [<next>!match[]] %>
<$link to=<<next>> > <<next>><span style="font-size: 80%; color: rgb(144, 238, 144);"> <$view tiddler=<<next>> field="published" format="date" template="DD. MMM YYYY"/></span>
<span style="font-size: 65%; color: rgba(204, 204, 255, 0.45); margin: 0 0.5em">aus Gruppe:</span>
<span style="font-size: 65%; opacity: 0.9;"><$transclude $variable=tag-pill tag={{!!tags}}/></span>
<span class="arrow">{{$:/images/arrow-right-pointer}}</span></$link>
<% endif %>
</div>
</nav>
Addidtional by switching to prev / next I’d like to close the current tiddler.
How can that be achieved?
Thanks, Stefan
Try this:
<div class="next"><% if [<next>!match[]] %>
<$button class=tc-btn-invisible to=<<next>>>
<$action-sendmessage $message="tm-close-tiddler" $param=<<currentTiddler>>/>
<<next>>
<span style="font-size: 80%; color: rgb(144, 238, 144);">
 <$view tiddler=<<next>> field="published" format="date" template="DD. MMM YYYY"/>
</span>
<span style="font-size: 65%; color: rgba(204, 204, 255, 0.45); margin: 0 0.5em">aus Gruppe:</span>
<span style="font-size: 65%; opacity: 0.9;">
<$tiddler tiddler=<<next>>><$transclude $variable=tag-pill tag={{!!tags}}/></$tiddler>
</span>
<span class="arrow">{{$:/images/arrow-right-pointer}}</span>
</$button>
<% endif %>
</div>
</nav>
Notes:
- Instead of using a
$linkwidget, use a$buttonwidget. This performs the sameto=<<next>>navigation, but also permits the click to trigger a “side-effect”$action-sendmessageto close the current tiddler. - In the
tag-pillmacro, you use{{!!tags}}which gets the tags field value from the current tiddler. To show a tag from the<<next>>tiddler, you can enclose the macro call within a<$tiddler tiddler=<<next>>>widget.
-e
1 Like
- very nice!Hi guys,
Sorry to return to this topic, but i identified a problem with my solution.
First: The sequence field jump from 1 to 10, or 2 to 20, so i need to write this like 0001, 0002, 0003 etc.
Second, if i need to made a entry in the middle of a chapter for some reason, i need to change all numbers and this become a problem, because i have more than 2400 tiddles.
So i think i need to made this using tags instead fields, but how to made it to obey the list field?
Just to share, i finally found a solution and now have inner peace 
I see this post Navigating complex tiddler relationships, a discussion for the enthusiast
And found a solution posted by @EricShulman and made some little tweaks to look how i needed
\define toc-root() Livro do Mestre
\define toc-depth() 3
\define toc-nav()
\define tv-wikilinks() no
<$list filter="[enlist<all>before<currentTiddler>]">
<$button class="tc-btn-invisible" style="float:left;text-align: left; color:#6e8be0;padding-top: 10px; width: 50%;" to=<<currentTiddler>>>
{{$:/core/images/chevron-left}} <<toc-caption>>
</$button>
</$list>
<$list filter="[enlist<all>after<currentTiddler>]">
<$button class="tc-btn-invisible" style="float:right;text-align: right;color:#6e8be0; padding-top: 10px; width: 50%;" to=<<currentTiddler>>>
<<toc-caption>> {{$:/core/images/chevron-right}}
</$button>
</$list>
<div style="clear:both;"/>
\end
\define toc-list(here,max,exclude,level:"1")
<$list filter="""[tag[$here$]] $exclude$ -[[$here$]]""">
<$text text="[["/><<currentTiddler>><$text text="]]"/><br>
<$reveal default="$level$" type="nomatch" text="$max$">
<$macrocall $name="toc-list" here=<<currentTiddler>> max="$max$"
exclude="""$exclude$ -[[$here$]]""" level={{{ [[$level$]add[1]] }}}/>
</$reveal>
</$list>
\end
<$wikify name="all"
text="""<$macrocall $name="toc-list" here=<<toc-root>> max=<<toc-depth>>/>""">
<<toc-nav>>
</$wikify>
<% if [<currentTiddler>has[parent]] %>
<$let
upChapter={{!!parent}}
>
<div style="text-align: center; clear: both; padding-top: 1em;">
<% if [all[current] %>
↑
<$link to=<<upChapter>>>
<$text text={{{ [<upChapter>get[caption]] }}}/>
</$link>
<% endif %>
</div>
</$let>
<% endif %>