Hi guys,
All past publications about navigator between tiddles use tags, but is possible to create a navigator using fields? Like adding manually previous and next fields to a specific tiddlers and made some rules to show only if this fields exists?
My objective is to make something similar to Grok Tiddlywiki, but i have so many subsections that the Grok logic don’t work (read i dont know how to do this).
I know i can add manually links using the [[Example]], but it’s not so beautiful like grok
Hi @Hildebrando_Pereira
@EricShulman posted a possible solution using fields Next / Last functionality using fields
Another post by @Scott_Sauyet Wizard Navigation Plugin may also help
Sunny
Hi @Sunny thank you for your reply!
I adapt the code from @EricShulman inside the Grok Navigator and it works like a charm!
It’s a gross adaptation of course, i dont know nothing about javascript but it work like i expect
\whitespace trim
<$list filter="[<currentTiddler>has[seq]]" variable="here">
<$set name=tids filter="[has[seq]sort[seq]]">
<$let
prevSection={{{ [enlist<tids>before<here>] }}}
nextSection={{{ [enlist<tids>after<here>] }}}
upChapter={{!!parent}}
>
<div class="gtw-section-manager">
<div style="text-align: left; float: left;">
<!-- if this is a section and it's the first section in the chapter -->
<% if [<prevSection>is[blank]] %>
<$set
name="endMessage"
filter="[enlist<tids>first[]!match<here>]"
value="//Início do Livro//"
emptyValue="//Primeira seção//"
>
<% if [list[Outline]before<upChapter>] %>
⟸
<$link to=<<upChapter>>>
Up to chapter:
<$text text=<<upChapter>>/>
</$link>
<% else %>
<<endMessage>>
<% endif %>
</$set>
<% endif %>
<!-- if this is a section and there's a previous section in the chapter -->
<% if [<prevSection>!is[blank]] %>
←
<$link to=<<prevSection>>>
Anterior:
<$text text=<<prevSection>>/>
</$link>
<% endif %>
</div> <!-- left column -->
<div style="text-align: right; float: right;">
<!-- if this is a section and there's a later section in the chapter -->
<% if [<nextSection>!is[blank]] %>
<$link to=<<nextSection>>>Próximo: <<nextSection>></$link> →
<% endif %>
<!-- if this is a section and it's the last section in the chapter -->
<% if [<nextSection>is[blank]] %>
//Final do Livro//
<% endif %>
</div> <!-- right column -->
</div>
<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>
<style>
div.gtw-section-manager div {
border-top: 1px solid <<color table-border>>;
padding-top: 10px;
margin-top: 6ex;
width: 50%;
}
</style>
Certainly. While @Sunny mentioned my WizardNav plugin, that is another tag-based solution. And it’s designed to cater to multiple different paths through various parts of the content.
But we can do this based on a seq field.
Here’s my approach:
<% if [<currentTiddler>has[seq]] %>
<$let
seq = {{!!seq}}
prev = {{{ [has[seq]sort[seq]] :filter[get[seq]compare::lt<seq>] +[last[]] }}}
next = {{{ [has[seq]sort[seq]] :filter[get[seq]compare::gt<seq>] +[first[]] }}}
up = {{!!parent}}
>
<nav class="footer">
<div class="prev"><% if [<prev>!match[]] %>
<$link to=<<prev>> >← <<prev>></$link>
<% endif %> </div>
<div class="up"><% if [<up>!match[]] %>
<$link to=<<up>> >↑ <<up>></$link>
<% endif %> </div>
<div class="next"><% if [<next>!match[]] %>
<$link to=<<next>> > <<next>> →</$link>
<% endif %> </div>
</nav>
</$let>
<% endif %>
with minimal styles like this:
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 can test this by downloading the following and dragging the file onto any wiki:
SequentialNav.json (7.8 KB)
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:
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
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
