[TW5] Create a table template - transclusion?

[Rafael Aprato]

Hey all,

Apologies for the newbie question, but I've read the official documentation about transclusion, templates and widgets and I can't make sense of it (or what I should be reading to begin with). I welcome a link to more specific help, or just to what I should focus on.

I'm trying to build a table template that shows up partly filled in a tiddler when I want. And then in the new tiddler, I enter the tiddler-specific values. The key thing I'm looking for is to be able to modify the table fixed values or formatting without having to change it in every page. So if, for example, I decide to change the background color in the title, I can do so in one edit for all the hundreds of tiddlers with the table.

For example, I want to have this in a tiddler titled 'Person 1':

@@.persontable
|>| @@display:block;width:23em;<div class="lightgrey">''[Tiddler-specific title]''</div>@@ |
|^@@display:block;width:6.5em;''Value 1''@@ |@@display:block;width:15em;Tiddler-specific text 1@@ |
|^@@display:block;width:6.5em;''Value 2''@@ |@@display:block;width:15em;Tiddler-specific text 2@@ |
|^@@display:block;width:6.5em;''Value 3''@@ |@@display:block;width:15em;Tiddler-specific text 3@@ |
@@

So in another called 'Templatepersontable', I have this:

@@.persontable
|>| @@display:block;width:23em;<div class="lightgrey">''[Tiddler-specific title]''</div>@@ |
|^@@display:block;width:6.5em;''Value 1''@@ |@@display:block;width:15em;@@ |
|^@@display:block;width:6.5em;''Value 2''@@ |@@display:block;width:15em;@@ |
|^@@display:block;width:6.5em;''Value 3''@@ |@@display:block;width:15em;@@ |
@@

And in CSS I have:

.persontable {
margin-left: auto;
margin-right: 0;
margin-left: 1em;
float: right;
font-size: 0.8em;
}


.persontable td,
.persontable tr,
.persontable th,
.persontable tbody
{ border :0 !important;
padding-top: 0.5em;
}


.lightgrey {
background-color:lightgrey;
}

Now, I can write this in the 'Person 1' tiddler, and the table comes up:

{{Templatepersontable}}

But I can't fill the blank cells with the values I want.

Any tips on how to make this work, or what should I have been reading and what terms to look after in order to understand it? Hard to make sense of the "Transclusion in WikiText" in tiddlywiki.com.

Best regards

[Mark S.]

Well, those values in the table have to come from somewhere. Typically those would be from fields. I'll demonstrate with one field, and you can see if that gets you on your way.

Modify your Templatepersontable:

@@.persontable
|>| @@display:block;width:23em;<div class="lightgrey">''[Tiddler-specific title]''</div>@@ |

|^@@display:block;width:6.5em;{{!!value1}}@@ |@@display:block;width:15em;@@ |

|^@@display:block;width:6.5em;''Value 2''@@ |@@display:block;width:15em;@@ |
|^@@display:block;width:6.5em;''Value 3''@@ |@@display:block;width:15em;@@ |
@@

The {{!!value1}} entry will transclude values from a field, "value1". Note that it won't be bold -- add font-family to your style definition for that.

Now add the field "value1" to your "Person 1" tiddler and put a value in it (e.g. "Hi There!"). You add fields at the bottom of the edited tiddler, BTW.

Now for the text in your Person 1 tiddler, put: {{||Templatepersontable}}. The double pipe symbols mean to transclude the tiddler, using the current tiddler as though it were the template's tiddler. Sorry if that sounds munged -- just try it.

Now the table will appear and the field will be filled with the value from the "Person 1" value1 field.

You can even adapt your template so that it will get automatically applied to any tiddler that has a "value1" field (or some specified tag) without having to type in the template each time.. But I'm out of time for the moment.

Good luck!

-- Mark

[Rafael Aprato]

Hey Mark,

Thank you for the help! It definitely helped me make some sense of it, and I'm now very close to my ideal result. The values I wanted to input were the ones of the second column, not the first, like so:

|^@@display:block;width:6.5em;''Value 1''@@ |@@display:block;width:15em;{{!!value1}}@@ |

So now the first column has "Value 1" in bold in every table, and the second one has the value I input in the fields under the tiddler edit. I also managed to make the input bold if I want to, like this:

|^@@display:block;width:6.5em;''Value 1''@@ |@@display:block;width:15em;''{{!!value1}}''@@ |

But I still have some issues...forgive me if I pester you for a bit longer.

- Is there a way to add dozens of fields to a new tiddler (with blank values) with a single tag? My tables are pretty big, it would make quite a difference. I've read about the <$button> widget and I guess I could have one in the Home tiddler making it so that it would create a new tiddler with the tags needed, but it's important that new pages are created when clicking in missing links in other tiddlers. I imagine tags are the way to do what I want, but google isn't helping me here.


- Any way to make this work with the cell background color? It would avoid having to create a template for every color I need to use. In my mind, it would work by having this in the template:

|>| @@display:block;width:23em;<div class= "{{!!tablecolor}}">''{{!!tablename}}''</div>@@ |

And then "lightgrey" in a "tablecolor" field in "Person 1", but it doesn't change anything, and the cell comes out with default background color (note that lightgrey is already defined in the Stylesheet). Tried including different parts of the div class in the {{!!}} and writing them in the field, and no deal. Maybe it's possible to link it to the "color" default field, or to a tag?

Thank you for taking time to help me out.

Cheers,

Rafael

[Mark S.]

Tables can add their own class with a line like:

|firstclass secondclass|k

at the start.

If you define classes for each color you will be using, and wrap your table using a macro (so you can pass it a class name), then something like this:

\define mytable(colorclass)
|persontable $colorclass$|k

|>| @@display:block;width:23em;<div class="lightgrey">''[Tiddler-specific title]''<

/div>@@ |

|^@@display:block;width:6.5em; ''Value 1''  @@ |@@display:block;width:15em;{{!!value1}}@@ |

|^@@display:block;width:6.5em;''Value 2''@@ |@@display:block;width:15em;@@ |
|^@@display:block;width:6.5em;''Value 3''@@ |@@display:block;width:15em;@@ |
\end
<$macrocall $name="mytable" colorclass={{!!tablecolor}}/>

Can be used as a template, where the name of the class is stored in the field "tablecolor" (which I suppose should become "tableclass", but oh well).

I don't know if there is a way to trigger actions when a tiddler is opened. Maybe someone else can answer that.

I would tend to use the technique described here:

https://tiddlywiki.com/#WidgetMessage%3A%20tm-new-tiddler

or here:

https://tiddlywiki.com/#ActionCreateTiddlerWidget

to create the new tiddlers with all fields added.

-- Mark

[Rafael Aprato]

I know there's something obvious I'm overlooking, but how do I add another class for yellow, for example? if I have this in a "mytable" tiddler:

\define mytable(colorclass)
|persontable $colorclass$|k

|>| @@display:block;width:23em;<div class="lightgrey">''[Tiddler-specific title]''</div>@@ |

|^@@display:block;width:6.5em; ''Value 1''  @@ |@@display:block;width:15em;{{!!value1}}@@ |

|^@@display:block;width:6.5em;''Value 2''@@ |@@display:block;width:15em;@@ |
|^@@display:block;width:6.5em;''Value 3''@@ |@@display:block;width:15em;@@ |
\end
<$macrocall $name="mytable" colorclass={{!!tablecolor}}/>

And then call the template with {{mytable}} in "Person 1", the cell comes out as lightgrey without any "colorclass" field. I imagine the solution has to do with what you said here:

Tables can add their own class with a line like:

|firstclass secondclass|k

at the start.

But playing around that second row only produces errors...

Do I need to modify the Stylesheet? What am I missing?

Rafael

[Mark S.]

Yes, you need to create classes for each color. Sorry if that wasn't clear.

-- Mark

On Friday, October 12, 2018 at 3:36:38 PM UTC-7, Rafael Aprato wrote:

I know there's something obvious I'm overlooking, but how do I add another class for yellow, for example? if I have this in a "mytable" tiddler:

\define mytable(colorclass)
|persontable $colorclass$|k

|>| @@display:block;width:23em;<div class="lightgrey">''[Tiddler-specific title]''</div>@@ |

|^@@display:block;width:6.5em; ''Value 1''  @@ |@@display:block;width:15em;{{!!value1}}@@ |

|^@@display:block;width:6.5em;''Value 2''@@ |@@display:block;width:15em;@@ |
|^@@display:block;width:6.5em;''Value 3''@@ |@@display:block;width:15em;@@ |
\end
<$macrocall $name="mytable" colorclass={{!!tablecolor}}/>

And then call the template with {{mytable}} in "Person 1", the cell comes out as lightgrey without any "colorclass" field. I imagine the solution as to do with what you said here:

Tables can add their own class with a line like:

|firstclass secondclass|k

at the start.

But playing around that second column only produces errors...

[Rafael Aprato]

I understood that, my problem is how to do it! It might help to say that I'm very new to TiddlyWiki, not at all familiar with html/css, and English is not my native language (especially troublesome when I have to google every other word, as in the case of the official documentation).

I tried creating a "yellow" class by changing and adding a lot of stuff in the "mytable" tiddler, like for example:

\define mytable(colorclass)
|persontable $lightgrey$ $yellow$|k

|>| @@display:block;width:23em;<div class="lightgrey">''[Tiddler-specific title]''</div>@@ |

|^@@display:block;width:6.5em; ''Value 1''  @@ |@@display:block;width:15em;{{!!value1}}@@ |

|^@@display:block;width:6.5em;''Value 2''@@ |@@display:block;width:15em;@@ |
|^@@display:block;width:6.5em;''Value 3''@@ |@@display:block;width:15em;@@ |
\end
<$macrocall $name="mytable" colorclass={{!!tablecolor}}/>

And neither this nor other options work.

In essence: I have no idea of what I'm doing. I've read the 'Styles and Classes' documentation, but the code there is different, and it doesn't seem to explain how to do exactly what I want...

Really sorry for bothering you with this, I'm sure your explanations are great, it's just that I'm a bit more of a newbie than most of newbies here!

Rafael

[Mark S.]

Remove $lightgrey$ and $yellow$ -- they'll just distract you.

So, did you:

1. Make a class "yellow" ?

2. Put the value "yellow" in the "tablecolor" field of your "Person 1" tiddler?

3. Make sure all tiddlers are out of edit mode (so changes will propagate) ?

Good luck!

-- Mark

[Rafael Aprato]

2 and 3 yes, I'm just not sure how to do 1. How do I create two classes (lightgrey and yellow) instead of just one? Is this done in the "mytable" tiddler, or in the Stylesheet?

[Mark S.]

You'll be happy to know that I'm having troubles too! Also, CSS drives me nuts! ;-)

Sometimes, I have to abandon using pipe (|) tables and go back to using HTML. Perhaps Jed, Mat, Tony or someone can explain how to fix it using pipes, but in this case I had to switch to table structures, as you'll see in the attached.

Here's a little kit. Download the attached JSON file. Drag it to your TW, and when the green bar appears at the top drop it. Then import the tiddlers. Hopefully this will give you a working start!

HTH

-- Mark

[Rafael Aprato]

Hey Mark,

Feedback from importing your file:

- Upon importing, "Person (green)" and "Person (yellow)" have two fields (tablecolor=green, and value1=Hello), two tags ("exportme" and "MyTable") but show nothing.

- When I write "{{Template}}", the table shows up, but like this:

Nothing shows up: the background color in the title cell, the title or the value1 (which should show up to the right of "Value 1")...

Using {{Template Original}} instead produces a slightly different table, with the title text at the center instead of what you see above. Still no color or value1.

Two thoughts:

- I imagined my Stylesheet (where I had already defined the yellow and green values, identically to the "lightgrey" definition I posted in my first message) might be conflicting with your new one, so I deleted my color definitions. No change.

- If your results differ from mine with what you sent, maybe I'm lacking an extension? I only have the "TiddlyWiki 5 core" and "Documentation from tiddlywiki.com" ones.

Can't thank you enough for spending time trying to working this out! Btw, it might be useful to know that I'm on Firefox 62.0.3, Windows 10, and using TiddlyDesktop (results without TD are the same).

Rafael

[Mark S.]

My bad. The kit was missing a key file. Try again with this.

-- Mark

[Rafael Aprato]

So...I have good news, and I have bad news :/

The good news is that it works! I can now select the color I want by writing in it the field. Don't even need to call the template inside the tiddler!

The bad news is that what it does is color the letters of all the text inside the table...

I should have started by posting what I'm aiming for. This is what I manually built, and want as an end result (don't mind the text, it's from Wikipedia):

So, what I want is just to have that grey in that one cell to be easily changeable, since it will save me from having dozens of templates (one color for each family).

With your second files, I tried different solutions to solve this:

- First I changed the "color" to "background-color". However, it colored the entire table, including the padding;

- Then I tried ending the class inside the table somehow, so that only the title had the background. This didn't work, as it breaks the code;

- Then, tried creating two tables: one for the title, another for the rest of the table (both class="persontable"). Had to insert "<div style = "clear:both;"></div>" between the two to make them appear on top of eachother, but it retains a space between the two. Managed to remove it with margins, but a small border between the two still remains. I'll probably be able to remove it, but it's not worth it if I don't solve the final issues:

- The fact that the background color includes the padding, and the fact that it's not centered or bold. Managed to make it centered by substituting the <<>> with {{!tabletitle}} and adding "text-align:center;", but neither '' '' nor <b></b> work for bold as they did before. As for padding, changing it in "MyStyles" only makes the cell larger...it's still completely colored, instead of having the bit of color-less padding like in my example.

At this point, I'm considering just creating one template for each color, it seems easier.

What do you think? Is there an easy solution, or should I give up?

Rafael

[Mark S.]

So you just want the title block of the table to change color? The cells have their own background attribute, called bgcolor.

So just rearrange the Template tiddler to have this text:

\define mytable(colorclass)
<table class="persontable ">
<tr><td colspan=2 bgcolor=$colorclass$> @@display:block;width:23em;color:lightgrey; <<currentTiddler>> @@ </td></tr>
<tr><td> ''Value 1''  </td><td>@@display:block;width:15em;{{!!value1}}@@</td></tr>
<tr><td>@@display:block;width:6.5em;''Value 2''@@ </td><td>@@display:block;width:15em;stuff@@ </td></tr>
<tr><td>@@display:block;width:6.5em;''Value 3''@@ </td><td>@@display:block;width:15em;@@ </td></tr>
</table>

\end
<$macrocall $name="mytable" colorclass={{!!tablecolor}}/

>

Note that all I did was remove $colorclass$ from the table tag and add bgcolor=$colorclass$ to the first <td> tag.

Hopefully we're getting close!

-- Mark

[Rafael Aprato]

It worked! Now the only issue is the fact that the padding is colored, and the text isn't bold. I get this:

Instead of this (just built it manually, so the color is slightly different):

Is this perhaps related to what you said before? Here:

[Mark S.]

Hola Rafael,

Here's another version. I've gone back to "colortable" being the name of a color. The first row uses <th> tags to make it bold. The stylesheet has been changed to drop the green/yellow styles and add a couple things. In particular I found I needed

border-collapse: separate;

to get the kind of border you wanted.

I think at this point the particular parts of what you wanted are in place. The template is applied
automatically and the table is constructed for you. Now it's a matter of just working out the exact 
CSS and HTML to tweak the look. I can't help much with that -- I usually just google whatever
I'm trying to achieve and then just try all sorts of things. It becomes a little more complicated
in TW because so there is already so much CSS floating around. Like "border-collapse" must have something
somewhere setting it's status differently than the default.

Good luck!
-- Mark

[Rafael Aprato]

It worked!

It's a relief; my experience with MediaWiki wasn't that good, and I desperately needed a solid and accessible wiki software. Thank you so much for having the patience to help me out!

Cheers,

Rafael

[Mohammad]

Mark,

 I see the Table overflows the tiddler borders! Isn't it the same for you?

Mohammad

[Mark S.]

I think that's because of the float in your CSS. TW uses CSS for everything, so you have to make sure your CSS works with TW's CSS. I *think* you need to sharpen the definition of your selector for float, but I'm not really great at CSS.

Perhaps you can post a question about how to float a table inside of a tiddler using CSS.

Good luck!

-- Mark

[Mohammad]

Thanks Mark! I will look into it to see how I can keep float tables inside Tiddler!

Mohammad

[Rafael Aprato]

I'm sorry to resurrect an old thread; but I noticed a rather important issue only after I had started applying the new tables to my TW.

Even when I use your json, the table doesn't stick to the top anymore...It works as if the table was inline with the text; the more I write, the more it goes down. That means I can't give it that "Wikipedia look" anymore, since it doesn't allow me to write to the left of the table (having the table fixed to the top-right).

Any ideas? Tried searching around for solutions in W3 and such sites, but the CSS float property only allows 'left' and 'right'.

But it worked before when the table was manually inserted (no tags), so I wonder if there's a solution.

Best regards,

Rafael

[Mark S.]

Here's a kludgey solution. You will probably need someone who understands CSS better to come up with a better solution.

First change the template tiddler to:

\define mytable(colorclass)
<div class="specialTable">
<table class="persontable ">
<tr><th colspan=2 style="background-color:$colorclass$;"> @@display:block;color:lightgrey; <<currentTiddler>> @@ </th></tr>

<tr><td> ''Value 1''  </td><td>@@display:block;width:15em;{{!!value1}}@@</td></tr>
<tr><td>@@display:block;width:6.5em;''Value 2''@@ </td><td>@@display:block;width:15em;stuff@@ </td></tr>
<tr><td>@@display:block;width:6.5em;''Value 3''@@ </td><td>@@display:block;width:15em;@@ </td></tr>
<

/table>
</div>
<div style="clear:both">
</div>

\end
<$macrocall $name="mytable" colorclass={{!!tablecolor}}/

>

This wraps the table in a div identified by class specialTable and adds a bit on the end to clear divs.

Then add this to the stylesheet:

.specialTable {
float: right;
}

[data-tags*=myTable] .tc-tiddler-body
{
width:40% ;
float: left;
}

This makes your text float left and your table float right. It also limits your text width to 40% of the entire space -- which works on my system but may be too little or too much on yours. This is where someone who understands CSS is needed. Without the 40% the text will expand to fill up the entire area, which will push the div down. So what's needed is some configuration that will use whatever space is available AFTER the table has taken it's bit.

Good luck!

-- Mark

[Rafael Aprato]

Hey Mark, sorry for the late response.

Your solution worked exactly as you said. The text not filling up the whole page after the table isn't a huge problem, but I'll wait to see if anyone else has a solution.

Best regards,

Rafael