Organizing "tagging" list by tabs

#1

Hi - I’ve done some digging but still a little confused.

I’m trying to put the “tagging[]” list in the bottom of every tiddler, organized into tabs by “type”.

I’ve created a tiddler as follows:

16784736266256697429698131899733
167847362662566974296981318997331920×1080 254 KB

That part is working. I’m thinking that I can get the tab list by tagging specific tiddlers with “tabList”, then create a filter to get that list of tiddlers to create the tabs. So if I want a tab for “todo” items, then I’ll tag the todo tiddler with “tabList”.

But then how do I populate the individual tabs, so that when I click the tab I get a list of links?

My end goal is that I can go to any tiddler, and at the bottom I’ll have a set of tabs. If I want to see any meetings that are tagged to the current tiddler, I’ll click the “meetings” tab, for todo items I’ll click “todo”, etc.

Thanks in advance!

1 Like
#2

I’m not quite sure what output you want. But perhaps if you start with this:

<$list filter="[tag<currentTiddler>] +[sort[title]]">
  <$transclude tiddler="$:/core/ui/TagTemplate"/>
</$list>

you could get a sense of where to go, replacing that TagTemplate transclusion with what you would like.

#3

Here’s a demonstration of what I’m looking to do. Each image shows a different state for TiddlerA (where a different tab is selected at the bottom). All boxes represent tiddlers.
The fourth slide shows how the tabs themselves are set up. Hopefully this is more clear.

Slide1
Slide11280×720 12 KB

Slide2
Slide21280×720 12 KB

Slide3
Slide31280×720 12 KB

Slide4
Slide41280×720 4.04 KB

#4

@Shane_Ashby

If I follow correctly: at bottom of each tiddler, you’d like to see a row of tabs, including one for each tag that the current tiddler has, and within that tab you’d like to see a list of whatever else is tagged there. (So, it’s a bit like having the tag-pill drop-down effect, but always expanded for whatever tag you click to focus on.)

First, you’ll want to set up a tab template – because otherwise the tab will render the text field of the tiddler that corresponds to the tag. The tab template will look something like this:

<$tiddler tiddler=<<currentTab>>>

<$list filter="[all[current]tagging[]]"/>

</$tiddler>

And it will need a name – I’m calling it $:/tabs/tagging-template

Then, in the tiddler tagged $:/tags/ViewTemplate, put something like this:

<<tabs tabsList:"[all[current]tags[]]" template:"$:/tabs/tagging-template" >>

Does that do what you’re looking for?
-Springer

1 Like
#5

I think you’re close, except that I don’t want the current tiddler’s tags, I want the things that are tagged to this tiddler - I think that’s called the “tagging” list? (I’m kind of new to TW.)

For example, if I’m looking at TiddlerA from my example, if I click on the “todo” tab, I want to see todo items that are also tagged with TiddlerA.

#6

Give this a shot, create the following 4 tiddlers…

title field: $:/.shahby/RelatedTiddlers
tags field: $:/tags/ViewTemplate
list-before field: $:/core/ui/ViewTemplate/body
text field:

<$list variable="ShowWhenTagging" filter="[<currentTiddler>tagging[]first[]]">
<<tabs "todo meeting reference" "todo" "$:/state/related">>
</$list>

title field: todo
text field:

<$list filter="[all[tiddlers]tag[todo]tag<currentTiddler>]">

* <$link />
</$list>

title field: meeting
text field:

<$list filter="[all[tiddlers]tag[meeting]tag<currentTiddler>]">

* <$link />
</$list>

title field: reference
text field:

<$list filter="[all[tiddlers]tag[reference]tag<currentTiddler>]">

* <$link />
</$list>

If you tag a few tiddlers like in your diagram, you should end with something like:

RelatedTabs

#7

This is great, thank you! Now is it possible to adapt it to use the tab-template strategy, so I don’t need to populate the todo, meeting, reference tiddlers (which I’d then need to change in multiple places if I change anything)?

I have been playing with this, but I’m having trouble using the “save-currentTiddler” variable that’s mentioned in the tabs documentation…

#8

Change the $:/.shahby/RelatedTiddlers text field to:

<$list variable="ShowWhenTagging" filter="[<currentTiddler>tagging[]first[]]">
<<tabs tabsList:"todo meeting reference" default:"todo" state:"$:/state/related" template:"RelatedTemplate">>
</$list>

Use the list-after field for $:/core/ui/ViewTemplate/body instead of list-before to put the tabs below the text field.

Create a new tiddler: RelatedTemplate

text field:

<$list filter="[all[tiddlers+shadows]tag<currentTab>tag<currentTiddler>]">

* <$link />
</$list>
#9

Brian - thank you - this is beyond awesome. Works great!
For anyone else looking for this, I adapted the solution slightly as follows:

  • Instead of hard-coding the tab names, I instead tagged tiddlers with “tabList” if I wanted them to go into the tablist at the bottom.
  • Instead of bulletizing the links, I just put
    after to keep the list more compact.
  • Slight differences in naming, but that’s irrelevant as long as your naming is consistent throughout

RelatedTiddlers
<$list variable=“ShowWhenTagging” filter="[tagging[]first[]]">
<<tabs tabsList:"[tag[tabList]]" “todo” “$:/state/related” template:"$:/tabs/tagging-template">>
</$list>

tagging-template (I used this instead of “RelatedTemplate” just because I already had it)
<$list filter="[all[tiddlers+shadows]tagtag]">
<$link />

</$list>

#10

Just a tip, the Info button on tiddlers opens up the Info view at the top of each tiddler, there are already tabs that display information about the current tiddler.

  • In future solutions you could put a tab in the info dropdown to save space on tiddlers.
  • If you install the link-to-tabs plugin it is easy to open the tiddler for each tab and see the source code, and make use of this as you wish.