[TW5] Formatting the results of a <$list> as a <dl> [Resolved]

[Hegart Dmishiv]

This is my first attempt at displaying content programmatically within a tiddler. Well, almost my first anyway. I have successfully displayed a tiddler field in the text of the same tiddler itself, using {{!!fieldname}}, but apart from that this is all new territory for me.

As you'll see from the attached screenshot, I'm trying to build a list of definitions of technical terms, using a <$list>..</$list> code block, containing <$view field="fieldname" /> elements. But I'm trying to format the results as a definition list using the semicolon and colon tags. This clearly isn't quite working for me, and I was wondering how to make it work properly. My logic seems sound, and it is displaying the results I expected, but not with the formatting I had hoped for.

I've tried looking at the official TW5 documentation, searching through the forums, and staring blankly for many long hours at @Tobi's example code, as mentioned in another recent discussion thread, but I still can't work it out. I guess I need to be using a <dl>..</dl> code block rather than <$list>..</$list>, but I cannot work out how to change the parameters in Tobi's example to make them do what I am trying to do.

As a secondary issue, the results of the <$view field="defn" /> line are not being parsed properly as wikitext, yet when I use {{!!defn}} on the tiddler where the field is created, it shows properly as wikitext. What gives?

[Evolena]

Le samedi 19 septembre 2015 12:28:13 UTC+2, Hegart Dmishiv a écrit :

As a secondary issue, the results of the <$view field="defn" /> line are not being parsed properly as wikitext, yet when I use {{!!defn}} on the tiddler where the field is created, it shows properly as wikitext. What gives?

 

First this one, because it's easier.

The view widget displays the required field with the specified format, by default text. There is no wikified format available for this widget, because that would be redundant with transclusion... so if you want wikifed output, you need to use the transclude widget instead.

[Evolena]

Le samedi 19 septembre 2015 12:28:13 UTC+2, Hegart Dmishiv a écrit :

This is my first attempt at displaying content programmatically within a tiddler. Well, almost my first anyway. I have successfully displayed a tiddler field in the text of the same tiddler itself, using {{!!fieldname}}, but apart from that this is all new territory for me.

As you'll see from the attached screenshot, I'm trying to build a list of definitions of technical terms, using a <$list>..</$list> code block, containing <$view field="fieldname" /> elements. But I'm trying to format the results as a definition list using the semicolon and colon tags. This clearly isn't quite working for me, and I was wondering how to make it work properly. My logic seems sound, and it is displaying the results I expected, but not with the formatting I had hoped for.

I've tried looking at the official TW5 documentation, searching through the forums, and staring blankly for many long hours at @Tobi's example code, as mentioned in another recent discussion thread, but I still can't work it out. I guess I need to be using a <dl>..</dl> code block rather than <$list>..</$list>, but I cannot work out how to change the parameters in Tobi's example to make them do what I am trying to do.

 The first issue you're encountering here is that the term/definition syntax is "block mode", so you need a linebreak after your entering list (else the whole content of the list is parsed as inline mode, and the term/definition syntax is not recognized):

<$list filter="[tag[Definitions]]">

; <$view field="title"/>
: <$transclude field="defn"/>
</$list>

You can then have another issue: each ";    :" syntax for the definition will be its own definition list, and you will have margins after each term/definition couple.
If you want to avoid that, you have to switch to HTML, in order to declare the definition list outside the list widget (and this way you don't need the extra linebreak...):

<dl>
<$list filter="[tag[Definitions]]">
<dt><$view field="title"/></dt>
<dd><$transclude field="defn"/></dd>
</$list>
</dl>





[Hegart Dmishiv]

That is awesome, thanks Evolena. I've also added a sort[title] to the filter, and it now looks exactly as I wanted it to. One thing I don't get though, is why the transcluded wikitext from the defn field looks correct, when your example code above doesn't specify mode="block". Is "block" the default mode for the TranscludeWidget?

[Evolena]

Usually, the mode is determined by whether the transclude widget itself has been parsed in block or inline mode. This can be overridden with the mode attribute.

So I guess that being in a definition list, the parent mode is block, and so is the transclude widget mode. But I'm not sure, this is incoherent with the example given in TranscludeWidget.
To be honest, I often correct the inline/block mode or linebreak issues when they arise, I can't always anticipate when writing my code!


[Tobias Beer]

Hi Hegart,

Glad to see someone else fancy definition lists.
I find them to be quite appropriate for many usecases.

Evolena already explained things nicely.

There's that learning curve to tackle,

but once that's made, you're good to go.

I'll make a post for it on tb5 later,

because I think it's very useful to...

• advocate using definition lists
• have that as an example of working with the list wiget
• promote using a summary field
• also show the use of selector:before {content:"&raquo;"} in css to make things look more list-like

Best wishes,

— tb

[Hegart Dmishiv]

Thanks for that @Evolena. Yeah, I was anticipating having to use <$transclude field="defn" mode="block"/> for that, but then I saw your example code and got confused a bit.

Hey @Tobi, thanks for your input too. I tried adding your selector:before {content:"&raquo;"} to my <dd> tag element as inline CSS, but it spat the dummy with having too many quotation marks when I put it inside of style="". Did I mention I'm not very good at coding? That includes CSS as well, hehe. I guess you're doing your &raquo; trick from a separate stylesheet, and using a class="" in the <dd> tag instead. I'm still learning how to do that, and even moreso with TiddlyWiki. But I'll get there. Thanks for your patience with all my dumb n00b questions.

[Tobias Beer]

Yes, a custom stylesheet it is.

$:/.tb/styles @ tb5

We're all n00bs in so many ways.
Seeing as how every moment never was before,

it's not a state we're going to quit any time soon. ^_^

Best wishes,

— tb

[Hegart Dmishiv]

Thanks @Tobi, I could actually follow that, and I've made my first stylesheet in TW. My one has a lot more internal documenting with comments than yours does though, so I can remind myself of what each CSS element is supposed to be doing. Most of my CSS stuff is copy/pasted from the W3Schools CSS Reference.

[Evolena]

As nothing in your examples or in the screenshot told me that you needed block mode for the dfn field, I've indeed not specified the transclusion mode. I often try to go to the simplest solution, and go to more parameters only if it happens that I really need it. Maybe it's a bad habit, I don't know.

[Hegart Dmishiv]

Now that this feature is working properly for me as a <dl> list, I'd like to reuse the same information stored in my defn tiddler variable. I was thinking of the <abbr> or <acronym> tags to create a popup (hover) explanatory text, possibly even from within a link, something like this...

[[GIMP]] is an [[<abbr title="<$transclude tiddler="Open Source" field="defn" mode="inline"/>">open source</abbr>|Open Source]] graphics application.

I know that this code won't work as it is. There are too many quotation marks for the parser to even look at it without spitting the dummy. But it illustrates what I'm trying to achieve. My definition of the term "open source" is already stored within the defn variable in the tiddler named "Open Source", so I'd like to make use of it here. Is there a simple way to make this happen, without having to write lots of additional code / create intermediary-step tiddlers?

[Eric Shulman]

On Saturday, September 19, 2015 at 10:55:22 PM UTC-7, Hegart Dmishiv wrote:

[[GIMP]] is an [[<abbr title="<$transclude tiddler="Open Source" field="defn" mode="inline"/>">open source</abbr>|Open Source]] graphics application.

Use the <$link> widget around the <abbr>, and use TextReference syntax to retrieve the "defn" field value from the target tiddler:

[[GIMP]] is an <$link to="Open Source"><abbr title={{Open Source!!defn}}>Open Source</abbr></$link> graphics application

For convenience, you could make a macro like this:

\define dlink(target)
<$link to="""$target$"""><abbr title={{$target$!!defn}}>$target$</abbr></$link>
\end

You can then write:

[[GIMP]] is an <<dlink "Open Source">> graphics application

enjoy,

-e

Eric Shulman

ELS Design Studios

TiddlyTools - "Small Tools for Big Ideas!"

InsideTiddlyWiki: The Missing Manuals

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Evolena]

Look at the LinkWidget. If I correctly understand what you try to achieve, something like this may work:

<$link to="Open Source" tooltip={{Open Source!!dfn}} tag="abbr">open source</$link>

or:

<$set name="tv-wikilink-tooltip" value="{{!!dfn}}">
<$link to="Open Source" tag="abbr">open source</$link>
</$set>

You can remove the tag attribute if it is not necessary to what you want.

[Hegart Dmishiv]

Thanks @Eric and @Evolena, it's always great to get multiple answers showing different ways of achieving something, it gives me more opportunity to learn.

Speaking of which, I just wanted to explain myself a bit, and why I'm asking all these strange questions. I'm really struggling to understand the official TW5 documentation. It seems to be written from the perspective of a developer, rather than an end-user. No disrespect to those who have contributed to the current official TW5 documentation, and I'm sure it works fine for many/most end-users who begin using TW5 from a more knowledgeable position than I have. I'm just finding the learning curve very steep, coming from MediaWiki, where much of the coding is cloaked in a wikitext language that hides a lot more of the underlying HTML and Javascript than TW does.

I am finding, however, that practical examples, with real-life data, like the ones in this discussion thread, are really helping me to understand how to do things the TiddlyWiki way. I may ask a lot of dumb questions at first, and rely on you experienced TW users to turn my pathetic attempts at writing code into something that TW understands. But I want to assure you all that the solutions you give me are not just copy/pasted into my TW instance and forgotten about. I look carefully at each one, and try to work out how you came to the solution, comparing it to the official TW documentation, so that (hopefully) the documentation will make more sense to me.

On that note, I tried both of your solutions, and both worked fine, but I had to change the tiddler variable to defn in Evolena's. Your solution made use of the tooltip attribute of the LinkWidget, which resulted in a single dotted underline under the link, while Eric's solution gave a double underline. Not sure what the difference is.

Eric's was the first macro I've used in a new tiddler in my TW implementation. I copied the macro definition to the very top of the tiddler, and the call to the macro lower down in the body text of the same tiddler. I guess there must be some way to make this macro accessible globally within my wiki, by moving the macro definition into a new tiddler named something like $:/_Macros/defn-link or something. Is that all I'd need to do to make it globally accessible to other tiddlers within my wiki?

Thanks again both of you for this valuable learning experience.

[Tobias Beer]

Hi Hegart,

 

I guess there must be some way to make this macro accessible globally within my wiki, by moving the macro definition into a new tiddler named something like $:/_Macros/defn-link or something. Is that all I'd need to do to make it globally accessible to other tiddlers within my wiki?

Macro Definitions in WikiText

I guess that doc tiddler would benefit from the words "global macro".

You can also use the tiddler widget to define a scope, sets the context of the inner widgets to that tiddler...

\define dlink(target)
<$tiddler tiddler="$target$">
<$link><abbr title={{!!defn}}>$target$</abbr></$link>
</$tiddler>
\end

- tb

[Hegart Dmishiv]

Hi @Tobi,

In the official docs: "make a macro available to all tiddlers" vs my: "global macro", and I'm the one complaining that the current documentation is too developer-centric?! Oh gosh, what a dunderhead I must seem. I guess that's why I couldn't find it when searching for "global macro" in the TW5 docs. My bad. I didn't really understand the concept of System Tags until now, too, even though I used $:/tags/SideBar in the TOC, and $:/tags/Stylesheet in the example you helped me with earlier. But I see how they work now. Thanks.

Anyway, so I just need to tag my $:/_Macros/defn-link macro with the $:/tags/Macro tag, then I can call it from any tiddler in my wiki using Eric's example, renamed to <<defn-link "tiddler-name">> as per my new macro, right? Extending this further, how would I (optionally) convert the resulting link to lowercase characters? I often use [[open source|Open Source]] notation within my regular links, so that the displayed text is lowercase, but the link to the tiddler itself is passed as mixed-case. The macro I'm now using returns the tiddler name as it is, which I default to naming them all mixed-case. However, in the body text I want them to appear as lowercase. I'd like this to become a toggleable option in the macro, such as...

<<defn-link "tiddler-name" case="lower">>

...and defaulting to whatever the tiddler title is if case isn't specified in the macro call.

Thanks again for the help,

Hegart.

On Sunday, September 20, 2015 at 7:47:28 PM UTC+12, Tobias Beer wrote:

Hi Hegart,

 

I guess there must be some way to make this macro accessible globally within my wiki, by moving the macro definition into a new tiddler named something like $:/_Macros/defn-link or something. Is that all I'd need to do to make it globally accessible to other tiddlers within my wiki?

Macro Definitions in WikiText

I guess that doc tiddler would benefit from the words "global macro".

- tb

[Evolena]

Le dimanche 20 septembre 2015 09:38:23 UTC+2, Hegart Dmishiv a écrit :

Thanks @Eric and @Evolena, it's always great to get multiple answers showing different ways of achieving something, it gives me more opportunity to learn.

Speaking of which, I just wanted to explain myself a bit, and why I'm asking all these strange questions. I'm really struggling to understand the official TW5 documentation. It seems to be written from the perspective of a developer, rather than an end-user. No disrespect to those who have contributed to the current official TW5 documentation, and I'm sure it works fine for many/most end-users who begin using TW5 from a more knowledgeable position than I have.

I must admit that I'm not fond of the new documentation too, I often open an old TW5.1.7 to retrieve a simplest presentation.
 

On that note, I tried both of your solutions, and both worked fine, but I had to change the tiddler variable to defn in Evolena's. Your solution made use of the tooltip attribute of the LinkWidget, which resulted in a single dotted underline under the link, while Eric's solution gave a double underline. Not sure what the difference is.

My solution gives a link with a tooltip "disguises" as an <abbr> element. Eric's solution gives a link which has an <abbr> element as label, hence the difference in presentation. I don't know enought HTML to know what is better.
 

Eric's was the first macro I've used in a new tiddler in my TW implementation. I copied the macro definition to the very top of the tiddler, and the call to the macro lower down in the body text of the same tiddler. I guess there must be some way to make this macro accessible globally within my wiki, by moving the macro definition into a new tiddler named something like $:/_Macros/defn-link or something. Is that all I'd need to do to make it globally accessible to other tiddlers within my wiki?

The system tag $:/tags/Macro is what you're searching.

[Tobias Beer]

Hi Evolena,

 

I must admit that I'm not fond of the new documentation too, I often open an old TW5.1.7 to retrieve a simplest presentation.

What exactly would you mean?

Can you give an example?

-tb

[Evolena]

For example, it's a detail but I don't like to have to open a new tiddler to access examples.
It's more of a sentiment than of a reasoning, but I understand when people find it too developper-centric. Maybe it has become too formal, less explicit per se. I reckon it's been a lot of work to formalize it, but it doesn't match to what I'm looking for most of the time, it's like an advanced documentation (which can also be useful from time to time).

[Hegart Dmishiv]

Might I interject with the term "a reference manual" as opposed to "a user manual"? That's how the current documentation feels to me. If you know specifically what you're looking for, then I'm sure it's great. But from a complete beginner's perspective it's difficult to find the information you need, with specific, useful examples.

Maybe someone (I include myself in that generalisation) could build a sample use-case, keep it simple, and something that many people could relate to, like for an everyday "something" around the house. Then example code could be created that demonstrates the power of TiddlyWiki for that particular scenario. I haven't been around here long enough to know if this has already been done before, so please forgive me if it has.

For instance, the Transclusion With Templates documentation tiddler could really benefit from some better examples....

{{Transclusion||$:/core/ui/TagTemplate}}

Gah!

[Tobias Beer]

Hi Evolena,

 

For example, it's a detail but I don't like to have to open a new tiddler to access examples.

I certainly agree with you on this and

I can even see how this might actually put users off.

While concise, formalized, standardized,

these tables essentially are quite cryptic.

So, I always open the examples first.

I would sure appreciate a conditional view-tempate section

that always includes examples at the bottom.

- tb

[Hegart Dmishiv]

A couple of observations I've made since starting to use the same information stored in my defn tiddler variable as a popup (hover) explanatory text.

1. As <abbr> and tooltip don't like inline coding, all my definitions should be in plain text only.
2. Referencing a field of a tiddler is not the same as linking to a tiddler directly, so if the reference is the only link, then the target tiddler will still be an orphan.

I try to reduce the number of orphans and missing tiddlers in my TW wiki as much as I can. I just thought this information might be useful to somebody.

[Hegart Dmishiv]

On Sunday, September 20, 2015 at 12:13:10 AM UTC+12, Evolena wrote:

The first issue you're encountering here is that the term/definition syntax is "block mode", so you need a linebreak after your entering list (else the whole content of the list is parsed as inline mode, and the term/definition syntax is not recognized):

<$list filter="[tag[Definitions]]">

; <$view field="title"/>
: <$transclude field="defn"/>
</$list>

You can then have another issue: each ";    :" syntax for the definition will be its own definition list, and you will have margins after each term/definition couple.
If you want to avoid that, you have to switch to HTML, in order to declare the definition list outside the list widget (and this way you don't need the extra linebreak...):

<dl>
<$list filter="[tag[Definitions]]">
<dt><$view field="title"/></dt>
<dd><$transclude field="defn"/></dd>
</$list>
</dl>

Taking this all one step further again, I'm trying to recycle this code for yet another purpose, and this time I'd like to format the <dt> (the term to be defined) as a link to the tiddler where that term is defined in the defn field. I tried changing the <$view> widget to the <$link> LinkWidget, but couldn't then work out how to constrain it by the outer <$list> widget that is being used here. There is no field parameter in <$link>, so I wasn't sure how to use it. Any advice?

EDIT: It's okay, I worked it out myself. I just had to encapsulate the <$view> in a blank <$link> code block, like this..

<dl>
<$list filter="[tag[Definitions]]">

<dt><$link><$view field="title"/></$link></dt>

<dd><$transclude field="defn"/></dd>
</$list>
</dl>

The next trick would be re-applying the <strong> text formatting to the <dt> element, as well as it being a link, resulting in something like this (as a raw  HTML example)...

<strong><a href="link.html" /></strong>

...or in plain wikitext...

;''[[This Tiddler]]''
: Definition

I see there is a template parameter of the <$view> widget which I think would do this, I just don't know how to use it, and there is no example in the official TW docs on ViewWidget.

EDIT: Nope, neither format nor template of <$view> seem to be able to apply formatting to the link, and I tried inline CSS on the <dt> element, as <dt style="font-weight: bold;"> but that doesn't work either.

[Tobias Beer]

Hi Hegart, 

1. Referencing a field of a tiddler is not the same as linking to a tiddler directly, so if the reference is the only link, then the target tiddler will still be an orphan.

Why?

Best wishes,

— tb

[Hegart Dmishiv]

(I dunno where my reply to this went, so apologies if it turns up twice. I'm not enjoying Google software at all.)

I don't know why, sorry, I can only go on observation without any real understanding of the underlying code of TW. I have many examples of orphans (tiddlers without incoming links) which are referenced using the tooltip / <abbr> technique shown to me above.

EDIT: I've just put an example in my online (dev) wiki. Have a look at the #Fruits tiddler under the Recent tab, then compare that to the list of Orphans. Sorry, direct links to specific tiddlers doesn't work if the TW wiki is hosted on Google Drive.

[Evolena]

Le mercredi 23 septembre 2015 16:04:36 UTC+2, Hegart Dmishiv a écrit :

EDIT: It's okay, I worked it out myself. I just had to encapsulate the <$view> in a blank <$link> code block, like this..

<dl>
<$list filter="[tag[Definitions]]">
<dt><$link><$view field="title"/></$link></dt>
<dd><$transclude field="defn"/></dd>
</$list>
</dl>

The link widget hasn't any "field" parameter; it uses a "to" parameter which is to be set to the title of the tiddler you want to link to. This parameter defaults to the current tiddler: here, it happens to be the current item of the list widget, so it matches your needs.
 

The next trick would be re-applying the <strong> text formatting to the <dt> element, as well as it being a link, resulting in something like this (as a raw  HTML example)...

<strong><a href="link.html" /></strong>

...or in plain wikitext...

;''[[This Tiddler]]''
: Definition

I see there is a template parameter of the <$view> widget which I think would do this, I just don't know how to use it, and there is no example in the official TW docs on ViewWidget.

EDIT: Nope, neither format nor template of <$view> seem to be able to apply formatting to the link, and I tried inline CSS on the <dt> element, as <dt style="font-weight: bold;"> but that doesn't work either.

Maybe you will have to define a new CSS... er... I don't know the correct term... "line" in a stylesheet tiddler, in order to override the appearance of a link in a dt element. I don't remember how to do that without searching, and I haven't enough time for that just now, sorry.

Because orphans and missing tiddlers, as well as backlinks/references, only takes into account the links to explicitely named tiddlers (either with the link widget or the  [[...]] shorthand), but doesn't resolve all the textReference (if the title of the tiddler you want to link to is stored in a field) or variable used in, for example, templates.

[Hegart Dmishiv]

On Thursday, September 24, 2015 at 3:11:31 AM UTC+12, Evolena wrote:

Maybe you will have to define a new CSS... er... I don't know the correct term... "line" in a stylesheet tiddler, in order to override the appearance of a link in a dt element. I don't remember how to do that without searching, and I haven't enough time for that just now, sorry.

Yes, like the example that @Eric gave me above, and that @Tobi showed me how to put into a stylesheet. Problem is, I only want to do this once, on the current tiddler. So putting it into my stylesheet would affect every tiddler that uses the <dt> element. I tried using \define to define a macro, as Eric demonstrated, but I still have no idea what I'm doing with macros in TW yet. Here's my attempt, which didn't work at all....

\define boldlink(target)
<$tiddler tiddler="$target$">
<$link to={{!!title}}>''$target$''</$link>
</$tiddler>
\end

Then I called boldlink as below, without a parameter, hoping it would pick up the parameter from the outer <$list> code block, the same as my previous <$link> call did...

<dl>
<$list filter="[tag[Definitions]]">

<dt><<boldlink>></dt>

<dd><$transclude field="defn"/></dd>
</$list>
</dl>

...but it didn't work at all.

Because orphans and missing tiddlers, as well as backlinks/references, only takes into account the links to explicitely named tiddlers (either with the link widget or the  [[...]] shorthand), but doesn't resolve all the textReference (if the title of the tiddler you want to link to is stored in a field) or variable used in, for example, templates.

Ahh, thanks, I knew there had to be a good reason for this.

EDIT: Don't worry about this now, I've changed my code entirely to no longer be a <dl> block at all for this particular usage. Now my code looks something like this...

!! Definitions
<$list filter="[tag[Definitions]sort[title]]">

!!! <$link>''<$view field="title"/>''</$link>
> <small><$transclude field="defn"/></small>
</$list>

...and the results look quite fine for what I'm trying to achieve.

[Tobias Beer]

Hi Evolena,

 

Why?

Because orphans and missing tiddlers, as well as backlinks/references, only takes into account the links to explicitely named tiddlers (either with the link widget or the  [[...]] shorthand), but doesn't resolve all the textReference (if the title of the tiddler you want to link to is stored in a field) or variable used in, for example, templates.

Ah, of course, I thought Hegart meant to say that he had some reason for which he wouldn't want them to count as a (back-)reference whereas it is a limitation of using dynamic text-references (e.g. in macros, lists, as parameters) that they won't.

Best wishes,

— tb

[Tobias Beer]

Hi Hegart,

 

I'll make a post for it on tb5 later...

Finally got around to it:

Definition Lists @ tb5

Best wishes,

— tb 

[Hegart Dmishiv]

Thanks for that Tobias,

Hey, what was that @@..@@ code block you demonstrated? Is that easy to implement, or does it require fiddling with stylesheets in the background to achieve that? Is there a list somewhere of the options that can be used in place of the .info ?

Sorry for the late reply, I've been busy focusing my efforts elsewhere for the last couple of weeks, and haven't done much on my TiddlyWiki project lately. I'll still be somewhat distracted until the end of the month, too.

Kind regards,

Hegart.

[Tobias Beer]

Hi Hegart,

 

Hey, what was that @@..@@ code block you demonstrated? Is that easy to implement, or does it require fiddling with stylesheets in the background to achieve that? Is there a list somewhere of the options that can be used in place of the .info ?

If you look at the source of that tiddler you will find the style definitions for .info.

Using this notation...

@@color:red; some content @@

...here proves insufficient as I want

to address different parts of a definition list in different ways,

e.g. even making use of the :before modifier.

Best wishes,

— tb