Customized Templates for JSON-Tiddler (and other Tiddlers)

[Torax Malu]

Target: Customized Template-View for Tiddler

Conclusion (in short)

- Tiddly Wiki adds the own defined Template simply to it's own output.

- Hiding this output via CSS ==> Resulting displaying the customized output.

Solution: https://kookma.github.io/TW-Scripts/#Conditionally%20Display%20The%20Tiddler%20Contents

Selectors for CSS see here:

• https://tiddlywiki.com/prerelease/#Custom%20styles%20by%20data-tags
• https://tiddlywiki.com/prerelease/#Custom%20Styles%20FAQ

Another HTML-Attribute to apply this filter may be the tiddler title stored in data-tiddler-title for filtering in given trees of tags. Here the filtering of the beginning (e.g.

🗝:/ as a name-space for passwords.)

(See Tree-Macro and Table-Of-Content-Macros.)

Thanks to Mohammad and others collecting the information.

Hi @all,

thanks to you guys I understood the basic mechanism for display templates. Well I tried to apply this to JSON-Tiddlers, but failed.

(Original answer post: https://groups.google.com/d/msg/tiddlywiki/wzNweZz5Jm0/Ft7h-1xMBAAJ)

The test of a simple JSON-Tiddler marked with the tag "network":

{
    "testKey" : "TestValue"
}

The template tiddler is tagged with "$:/tags/ViewTemplate" and containes the code:
<$list filter="[all[current]tag[network]]">
testkey has value {{##testKey}}.
</$list>

Well - instead of only displaying the text of the template I get the normal JSON-view followed by my template. That tells me, I made my template correct, but don't understand something of the mechanism itself. Can you give me a hint?`
Thanks and cheers.

[Mohammad]

This is a solution proposed by Eric Shulman

Create a tiddler tagged with $:/tags/Stylesheet and content

[data-tags*="network"] .tc-tiddler-body { display:none; }

Ref: TW-Scripts

https://kookma.github.io/TW-Scripts/#Conditionally%20Display%20The%20Tiddler%20Contents

[Torax Malu]

Hi Mohammed,

thanks for this solution. Unfortunately the link is running in a 404-page. And I coulnd't find, where the "data-tags*" is comming from. Do you have a hint, because this is clearly CSS-related stuff.

Cheers.

Torax

Am Dienstag, 17. Dezember 2019 17:41:09 UTC+1 schrieb Mohammad:

This is a solution proposed by Eric Shulman

Create a tiddler tagged with $:/tags/Stylesheet and content

[data-tags*="network"] .tc-tiddler-body { display:none; }

Ref: TW-Scripts

https://kookma.github.io/TW-Scripts/Scripts%20in%20Tiddlywiki.html#Conditionally%20Display%20The%20Tiddler%20Contents

[Mohammad]

Hi Torax,

 This is the correct link

https://kookma.github.io/TW-Scripts/#Conditionally%20Display%20The%20Tiddler%20Contents

By the way in my previous post I gave the solution for your case!

Cheers

Mohammad

[Torax Malu]

Hi Mohammad,

I appreciate it really and thank you for the direct solution. I also want to understand the solution. 😉

As far as I understand, the author creates the customized templat, as I’ve done. And then he simply hides the part which is rendered by TiddlyWiki for the given type.

In result I am curious about the CSS-selector which form I never seen. From where it gets the part „data-tags*“? If someone has a short explanation, please post. Thanks in advance.

Cheers.

Torax

[Torax Malu]

Okay - it is as always said by experienced Programmers: The truth is in the code.

TiddlyWiki adds to the Tiddler-Div the attribute "data-tags" and filles it with the given tags. So Mohammads code example

[data-tags*="network"] .tc-tiddler-body { display:none; }

selects the tiddler-div according the tag and the inner tiddly-body and hides it.

Addition: The star after "data-tags" is important, because without the template only works, if the given tag-pattern is exactly the same…

Is this explanation correct?

Thank you.

Cheers.

Torax.

[Mohammad]

YES!

That is true!

On Tuesday, December 17, 2019 at 10:01:02 PM UTC+3:30, Torax Malu wrote:

Okay - it is as always said by experienced Programmers: The truth is in the code.

TiddlyWiki adds to the Tiddler-Div the attribute "data-tags" and filles it with the given tags. So Mohammads code example

[data-tags*="network"] .tc-tiddler-body { display:none; }

selects the tiddler-div according the tag and the inner tiddly-body and hides it.

[Torax Malu]

Thanks.

[Mohammad]

That is correct Torax,

Please have a look at :

https://tiddlywiki.com/prerelease/#Custom%20styles%20by%20data-tags

https://tiddlywiki.com/prerelease/#Custom%20Styles%20FAQ

You will find more information there! Unfortunately not all of TW features documented.

Hope this helps.

Cheers

Mohammad

[Torax Malu]

Hey cool - you guys already collected this information! And yes, I know, that not all is documented.

Often it's a little bit difficult for a newbee to find this - espacially if English it not your native language. Hope, this thread helps someone else.

Cheers.