docs(help): improve documentation on collections

This commit is contained in:
Elian Doran 2025-07-11 19:40:54 +03:00
parent e5712c54e6
commit 9e30bcf233
No known key found for this signature in database
36 changed files with 737 additions and 415 deletions

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

View File

@ -1,3 +1,7 @@
<figure class="image">
<img style="aspect-ratio:990/590;" src="Note List_image.png" width="990"
height="590">
</figure>
<p>When a note has one or more child notes, they will be listed at the end <p>When a note has one or more child notes, they will be listed at the end
of the note for easy navigation.</p> of the note for easy navigation.</p>
<h2>Configuration</h2> <h2>Configuration</h2>
@ -11,47 +15,11 @@
the desired number.</li> the desired number.</li>
</ul> </ul>
<h2>View types</h2> <h2>View types</h2>
<p>The view types dictate how the child notes are represented.</p>
<p>By default, the notes will be displayed in a grid, however there are also <p>By default, the notes will be displayed in a grid, however there are also
some other view types available.</p> some other view types available.</p>
<aside class="admonition tip"> <p>Generally the view type can only be changed in a&nbsp;<a class="reference-link"
<p>Generally the view type can only be changed in a&nbsp;<a class="reference-link" href="#root/_help_GTwFsgaA0lCt">Collections</a>&nbsp;note from the&nbsp;
href="#root/_help_GTwFsgaA0lCt">Book</a>&nbsp;note from the&nbsp;<a class="reference-link" <a
href="#root/_help_BlN9DFI679QC">Ribbon</a>, but it can also be changed class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>, but it can also be changed manually on any type of note using
manually on any type of note using the <code>#viewType</code> attribute.</p> the <code>#viewType</code> attribute.</p>
</aside>
<h3>Grid view</h3>
<figure class="image image-style-align-center">
<img style="aspect-ratio:1025/655;" src="1_Note List_image.png" width="1025"
height="655">
</figure>
<p>This view presents the child notes in a grid format, allowing for a more
visual navigation experience.</p>
<ul>
<li>For&nbsp;<a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes,
the text can be slighly scrollable via the mouse wheel to reveal more context.</li>
<li>For&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes,
syntax highlighting is applied.</li>
<li>For&nbsp;<a class="reference-link" href="#root/_help_W8vYD3Q1zjCR">File</a>&nbsp;notes,
a preview is made available for audio, video and PDF notes.</li>
<li>If the note does not have a content, a list of its child notes will be
displayed instead.</li>
</ul>
<p>This is the default view type.</p>
<h3>List view</h3>
<figure class="image image-style-align-center">
<img style="aspect-ratio:1013/526;" src="Note List_image.png" width="1013"
height="526">
</figure>
<p>In the list view mode, each note is displayed in a single row with only
the title and the icon of the note being visible by the default. By pressing
the expand button it's possible to view the content of the note, as well
as the children of the note (recursively).</p>
<h3>Calendar view</h3>
<figure class="image image-style-align-center">
<img style="aspect-ratio:1090/598;" src="2_Note List_image.png" width="1090"
height="598">
</figure>
<p>In the calendar view, child notes are represented as events, with a start
date and optionally an end date. The view also has interaction support
such as moving or creating new events. See&nbsp;<a class="reference-link"
href="#root/_help_xWbu3jpNWapp">Calendar View</a>&nbsp;for more information.</p>

View File

@ -2,8 +2,8 @@
<img style="aspect-ratio:767/606;" src="4_Calendar View_image.png" width="767" <img style="aspect-ratio:767/606;" src="4_Calendar View_image.png" width="767"
height="606"> height="606">
</figure> </figure>
<p>The Calendar view of Book notes will display each child note in a calendar <p>The Calendar view will display each child note in a calendar that has
that has a start date and optionally an end date, as an event.</p> a start date and optionally an end date, as an event.</p>
<p>The Calendar view has multiple display modes:</p> <p>The Calendar view has multiple display modes:</p>
<ul> <ul>
<li>Week view, where all the 7 days of the week (or 5 if the weekends are <li>Week view, where all the 7 days of the week (or 5 if the weekends are
@ -14,8 +14,9 @@
<li>Year view, which displays the entire year for quick reference.</li> <li>Year view, which displays the entire year for quick reference.</li>
<li>List view, which displays all the events of a given month in sequence.</li> <li>List view, which displays all the events of a given month in sequence.</li>
</ul> </ul>
<p>Unlike other Book view types, the Calendar view also allows some kind <p>Unlike other Collection view types, the Calendar view also allows some
of interaction, such as moving events around as well as creating new ones.</p> kind of interaction, such as moving events around as well as creating new
ones.</p>
<h2>Creating a calendar</h2> <h2>Creating a calendar</h2>
<figure class="table"> <figure class="table">
<table> <table>
@ -32,17 +33,17 @@
<td> <td>
<img src="2_Calendar View_image.png"> <img src="2_Calendar View_image.png">
</td> </td>
<td>The Calendar View works only for Book note types. To create a new note, <td>The Calendar View works only for Collection note types. To create a new
right click on the note tree on the left and select Insert note after, note, right click on the note tree on the left and select Insert note after,
or Insert child note and then select <em>Book</em>.</td> or Insert child note and then select <em>Collection</em>.</td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td> <td>
<img src="3_Calendar View_image.png"> <img src="3_Calendar View_image.png">
</td> </td>
<td>Once created, the “View type” of the Book needs changed to “Calendar”, <td>Once created, the “View type” of the Collection needs changed to “Calendar”,
by selecting the “Book Properties” tab in the ribbon.</td> by selecting the “Collection Properties” tab in the ribbon.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -62,7 +63,7 @@
<img src="Calendar View_image.png"> <img src="Calendar View_image.png">
</li> </li>
<li>Creating new notes from the calendar will respect the <code>~child:template</code> relation <li>Creating new notes from the calendar will respect the <code>~child:template</code> relation
if set on the book note.</li> if set on the Collection note.</li>
</ul> </ul>
<h2>Interacting with events</h2> <h2>Interacting with events</h2>
<ul> <ul>
@ -83,9 +84,17 @@
<li>The length of an event can be changed by placing the mouse to the right <li>The length of an event can be changed by placing the mouse to the right
edge of the event and dragging the mouse around.</li> edge of the event and dragging the mouse around.</li>
</ul> </ul>
<h2>Configuring the calendar</h2> <h2>Configuring the calendar view</h2>
<p>The following attributes can be added to the book type:</p> <p>In the <em>Collections </em>tab in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_BlN9DFI679QC">Ribbon</a>,
<figure class="table"> it's possible to adjust the following:</p>
<ul>
<li>Hide weekends from the week view.</li>
<li>Display week numbers on the calendar.</li>
</ul>
<h2>Configuring the calendar using attributes</h2>
<p>The following attributes can be added to the Collection type:</p>
<figure
class="table">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -131,199 +140,169 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure>
<p>In addition, the first day of the week can be either Sunday or Monday
and can be adjusted from the application settings.</p>
<h2>Configuring the calendar events</h2>
<p>For each note of the calendar, the following attributes can be used:</p>
<figure
class="table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>#startDate</code>
</td>
<td>The date the event starts, which will display it in the calendar. The
format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus
sign).</td>
</tr>
<tr>
<td><code>#endDate</code>
</td>
<td>Similar to <code>startDate</code>, mentions the end date if the event spans
across multiple days. The date is inclusive, so the end day is also considered.
The attribute can be missing for single-day events.</td>
</tr>
<tr>
<td><code>#startTime</code>
</td>
<td>The time the event starts at. If this value is missing, then the event
is considered a full-day event. The format is <code>HH:MM</code> (hours in
24-hour format and minutes).</td>
</tr>
<tr>
<td><code>#endTime</code>
</td>
<td>Similar to <code>startTime</code>, it mentions the time at which the event
ends (in relation with <code>endDate</code> if present, or <code>startDate</code>).</td>
</tr>
<tr>
<td><code>#color</code>
</td>
<td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or
hex such as <code>#FF0000</code>). This will also change the color of the
note in other places such as the note tree.</td>
</tr>
<tr>
<td><code>#calendar:color</code>
</td>
<td>Similar to <code>#color</code>, but applies the color only for the event
in the calendar and not for other places such as the note tree.</td>
</tr>
<tr>
<td><code>#iconClass</code>
</td>
<td>If present, the icon of the note will be displayed to the left of the
event title.</td>
</tr>
<tr>
<td><code>#calendar:title</code>
</td>
<td>Changes the title of an event to point to an attribute of the note other
than the title, can either a label or a relation (without the <code>#</code> or <code>~</code> symbol).
See <em>Use-cases</em> for more information.</td>
</tr>
<tr>
<td><code>#calendar:displayedAttributes</code>
</td>
<td>Allows displaying the value of one or more attributes in the calendar
like this:&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>
<img src="9_Calendar View_image.png">&nbsp;&nbsp;
<br>
<br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;
<br>
<br>It can also be used with relations, case in which it will display the
title of the target note:&nbsp;&nbsp;&nbsp;
<br>
<br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
</td>
</tr>
<tr>
<td><code>#calendar:startDate</code>
</td>
<td>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>).
The label name <strong>must not be</strong> prefixed with <code>#</code>.
If the label is not defined for a note, the default will be used instead.</td>
</tr>
<tr>
<td><code>#calendar:endDate</code>
</td>
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
which is being used to read the end date.</td>
</tr>
<tr>
<td><code>#calendar:startTime</code>
</td>
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
which is being used to read the start time.</td>
</tr>
<tr>
<td><code>#calendar:endTime</code>
</td>
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
which is being used to read the end time.</td>
</tr>
</tbody>
</table>
</figure> </figure>
<h2>How the calendar works</h2> <p>In addition, the first day of the week can be either Sunday or Monday
<p> and can be adjusted from the application settings.</p>
<img src="11_Calendar View_image.png"> <h2>Configuring the calendar events using attributes</h2>
</p> <p>For each note of the calendar, the following attributes can be used:</p>
<p>The calendar displays all the child notes of the book that have a <code>#startDate</code>.
An <code>#endDate</code> can optionally be added.</p>
<p>If editing the start date and end date from the note itself is desirable,
the following attributes can be added to the book note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
#label:endDate(inheritable)="promoted,alias=End Date,single,date"
#hidePromotedAttributes </code></pre>
<p>This will result in:</p>
<p>
<img src="10_Calendar View_image.png">
</p>
<p>When not used in a Journal, the calendar is recursive. That is, it will
look for events not just in its child notes but also in the children of
these child notes.</p>
<h2>Use-cases</h2>
<h3>Using with the Journal / calendar</h3>
<p>It is possible to integrate the calendar view into the Journal with day
notes. In order to do so change the note type of the Journal note (calendar
root) to Book and then select the Calendar View.</p>
<p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
attribute, the calendar will know that it's in a calendar and apply the
following:</p>
<ul>
<li>The calendar events are now rendered based on their <code>dateNote</code> attribute
rather than <code>startDate</code>.</li>
<li>Interactive editing such as dragging over an empty era or resizing an
event is no longer possible.</li>
<li>Clicking on the empty space on a date will automatically open that day's
note or create it if it does not exist.</li>
<li>Direct children of a day note will be displayed on the calendar despite
not having a <code>dateNote</code> attribute. Children of the child notes
will not be displayed.</li>
</ul>
<p>
<img src="8_Calendar View_image.png" width="1217" height="724">
</p>
<h3>Using a different attribute as event title</h3>
<p>By default, events are displayed on the calendar by their note title.
However, it is possible to configure a different attribute to be displayed
instead.</p>
<p>To do so, assign <code>#calendar:title</code> to the child note (not the
calendar/book note), with the value being <code>name</code> where <code>name</code> can
be any label (make not to add the <code>#</code> prefix). The attribute can
also come through inheritance such as a template attribute. If the note
does not have the requested label, the title of the note will be used instead.</p>
<figure <figure
class="table" style="width:100%;"> class="table">
<table> <table>
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>Name</th>
<th>&nbsp;</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre> <td><code>#startDate</code>
</td> </td>
<td> <td>The date the event starts, which will display it in the calendar. The
<p>&nbsp;</p> format is <code>YYYY-MM-DD</code> (year, month and day separated by a minus
<figure class="image image-style-align-center"> sign).</td>
<img style="aspect-ratio:445/124;" src="5_Calendar View_image.png" width="445" </tr>
height="124"> <tr>
</figure> <td><code>#endDate</code>
</td> </td>
<td>Similar to <code>startDate</code>, mentions the end date if the event spans
across multiple days. The date is inclusive, so the end day is also considered.
The attribute can be missing for single-day events.</td>
</tr>
<tr>
<td><code>#startTime</code>
</td>
<td>The time the event starts at. If this value is missing, then the event
is considered a full-day event. The format is <code>HH:MM</code> (hours in
24-hour format and minutes).</td>
</tr>
<tr>
<td><code>#endTime</code>
</td>
<td>Similar to <code>startTime</code>, it mentions the time at which the event
ends (in relation with <code>endDate</code> if present, or <code>startDate</code>).</td>
</tr>
<tr>
<td><code>#color</code>
</td>
<td>Displays the event with a specified color (named such as <code>red</code>, <code>gray</code> or
hex such as <code>#FF0000</code>). This will also change the color of the
note in other places such as the note tree.</td>
</tr>
<tr>
<td><code>#calendar:color</code>
</td>
<td>Similar to <code>#color</code>, but applies the color only for the event
in the calendar and not for other places such as the note tree.</td>
</tr>
<tr>
<td><code>#iconClass</code>
</td>
<td>If present, the icon of the note will be displayed to the left of the
event title.</td>
</tr>
<tr>
<td><code>#calendar:title</code>
</td>
<td>Changes the title of an event to point to an attribute of the note other
than the title, can either a label or a relation (without the <code>#</code> or <code>~</code> symbol).
See <em>Use-cases</em> for more information.</td>
</tr>
<tr>
<td><code>#calendar:displayedAttributes</code>
</td>
<td>Allows displaying the value of one or more attributes in the calendar
like this:&nbsp;&nbsp;&nbsp;&nbsp;
<br>
<br>
<img src="9_Calendar View_image.png">&nbsp;&nbsp;
<br>
<br><code>#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"</code>&nbsp;&nbsp;
<br>
<br>It can also be used with relations, case in which it will display the
title of the target note:&nbsp;&nbsp;&nbsp;
<br>
<br><code>~assignee=@My assignee #calendar:displayedAttributes="assignee"</code>
</td>
</tr>
<tr>
<td><code>#calendar:startDate</code>
</td>
<td>Allows using a different label to represent the start date, other than <code>startDate</code> (e.g. <code>expiryDate</code>).
The label name <strong>must not be</strong> prefixed with <code>#</code>.
If the label is not defined for a note, the default will be used instead.</td>
</tr>
<tr>
<td><code>#calendar:endDate</code>
</td>
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
which is being used to read the end date.</td>
</tr>
<tr>
<td><code>#calendar:startTime</code>
</td>
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
which is being used to read the start time.</td>
</tr>
<tr>
<td><code>#calendar:endTime</code>
</td>
<td>Similar to <code>#calendar:startDate</code>, allows changing the attribute
which is being used to read the end time.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure> </figure>
<h3>Using a relation attribute as event title</h3> <h2>How the calendar works</h2>
<p>Similarly to using an attribute, use <code>#calendar:title</code> and set <p>
it to <code>name</code> where <code>name</code> is the name of the relation <img src="11_Calendar View_image.png">
to use.</p> </p>
<p>Moreover, if there are more relations of the same name, they will be displayed <p>The calendar displays all the child notes of the Collection that have
as multiple events coming from the same note.</p> a <code>#startDate</code>. An <code>#endDate</code> can optionally be added.</p>
<figure class="table" <p>If editing the start date and end date from the note itself is desirable,
style="width:100%;"> the following attributes can be added to the Collection note:</p><pre><code class="language-text-x-trilium-auto">#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
#label:endDate(inheritable)="promoted,alias=End Date,single,date"
#hidePromotedAttributes </code></pre>
<p>This will result in:</p>
<p>
<img src="10_Calendar View_image.png">
</p>
<p>When not used in a Journal, the calendar is recursive. That is, it will
look for events not just in its child notes but also in the children of
these child notes.</p>
<h2>Use-cases</h2>
<h3>Using with the Journal / calendar</h3>
<p>It is possible to integrate the calendar view into the Journal with day
notes. In order to do so change the note type of the Journal note (calendar
root) to Collection and then select the Calendar View.</p>
<p>Based on the <code>#calendarRoot</code> (or <code>#workspaceCalendarRoot</code>)
attribute, the calendar will know that it's in a calendar and apply the
following:</p>
<ul>
<li>The calendar events are now rendered based on their <code>dateNote</code> attribute
rather than <code>startDate</code>.</li>
<li>Interactive editing such as dragging over an empty era or resizing an
event is no longer possible.</li>
<li>Clicking on the empty space on a date will automatically open that day's
note or create it if it does not exist.</li>
<li>Direct children of a day note will be displayed on the calendar despite
not having a <code>dateNote</code> attribute. Children of the child notes
will not be displayed.</li>
</ul>
<p>
<img src="8_Calendar View_image.png" width="1217" height="724">
</p>
<h3>Using a different attribute as event title</h3>
<p>By default, events are displayed on the calendar by their note title.
However, it is possible to configure a different attribute to be displayed
instead.</p>
<p>To do so, assign <code>#calendar:title</code> to the child note (not the
calendar/Collection note), with the value being <code>name</code> where <code>name</code> can
be any label (make not to add the <code>#</code> prefix). The attribute can
also come through inheritance such as a template attribute. If the note
does not have the requested label, the title of the note will be used instead.</p>
<figure
class="table" style="width:100%;">
<table> <table>
<thead> <thead>
<tr> <tr>
@ -333,39 +312,69 @@ class="table">
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code></pre> <td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre>
</td>
<td>
<img src="6_Calendar View_image.png" width="294" height="151">
</td>
</tr>
</tbody>
</table>
</figure>
<p>Note that it's even possible to have a <code>#calendar:title</code> on the
target note (e.g. “John Smith”) which will try to render an attribute of
it. Note that it's not possible to use a relation here as well for safety
reasons (an accidental recursion &nbsp;of attributes could cause the application
to loop infinitely).</p>
<figure class="table" style="width:100%;">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre>
</td> </td>
<td> <td>
<p>&nbsp;</p>
<figure class="image image-style-align-center"> <figure class="image image-style-align-center">
<img style="aspect-ratio:296/150;" src="1_Calendar View_image.png" width="296" <img style="aspect-ratio:445/124;" src="5_Calendar View_image.png" width="445"
height="150"> height="124">
</figure> </figure>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</figure> </figure>
<h3>Using a relation attribute as event title</h3>
<p>Similarly to using an attribute, use <code>#calendar:title</code> and set
it to <code>name</code> where <code>name</code> is the name of the relation
to use.</p>
<p>Moreover, if there are more relations of the same name, they will be displayed
as multiple events coming from the same note.</p>
<figure class="table"
style="width:100%;">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-14 #endDate=2025-02-15 ~for=@John Smith ~for=@Jane Doe #calendar:title="for"</code></pre>
</td>
<td>
<img src="6_Calendar View_image.png" width="294" height="151">
</td>
</tr>
</tbody>
</table>
</figure>
<p>Note that it's even possible to have a <code>#calendar:title</code> on the
target note (e.g. “John Smith”) which will try to render an attribute of
it. Note that it's not possible to use a relation here as well for safety
reasons (an accidental recursion &nbsp;of attributes could cause the application
to loop infinitely).</p>
<figure class="table" style="width:100%;">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">#calendar:title="shortName" #shortName="John S."</code></pre>
</td>
<td>
<figure class="image image-style-align-center">
<img style="aspect-ratio:296/150;" src="1_Calendar View_image.png" width="296"
height="150">
</figure>
</td>
</tr>
</tbody>
</table>
</figure>

View File

@ -0,0 +1,30 @@
<figure class="image">
<img style="aspect-ratio:990/590;" src="Grid View_image.png" width="990"
height="590">
</figure>
<p>This view presents the child notes in a grid format, allowing for a more
visual navigation experience.</p>
<p>Each tile contains:</p>
<ul>
<li>The title of a note.</li>
<li>A snippet of the content.</li>
<li>For empty notes, the sub-children are also displayed, allowing for quick
navigation.</li>
</ul>
<p>Depending on the type of note:</p>
<ul>
<li>For&nbsp;<a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a>&nbsp;notes,
the text can be slightly scrollable via the mouse wheel to reveal more
context.</li>
<li>For&nbsp;<a class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;notes,
syntax highlighting is applied.</li>
<li>For&nbsp;<a class="reference-link" href="#root/_help_W8vYD3Q1zjCR">File</a>&nbsp;notes,
a preview is made available for audio, video and PDF notes.</li>
<li>If the note does not have a content, a list of its child notes will be
displayed instead.</li>
</ul>
<p>The grid view is also used by default in the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a>&nbsp;of
every note, making it easy to navigate to children notes.</p>
<h2>Configuration</h2>
<p>Unlike most other view types, the grid view is not actually configurable.</p>

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -0,0 +1,20 @@
<figure class="image">
<img style="aspect-ratio:1387/758;" src="List View_image.png" width="1387"
height="758">
</figure>
<p>List view is similar to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_8QqnMzx393bx">Grid View</a>,
but in the list view mode, each note is displayed in a single row with
only the title and the icon of the note being visible by the default. By
pressing the expand button it's possible to view the content of the note,
as well as the children of the note (recursively).</p>
<p>In the example above, the "Node.js" note on the left panel contains several
child notes. The right panel displays the content of these child notes
as a single continuous document.</p>
<h2>Interaction</h2>
<ul>
<li>Each note can be expanded or collapsed by clicking on the arrow to the
left of the title.</li>
<li>In the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_BlN9DFI679QC">Ribbon</a>,
in the <em>Collection</em> tab there are options to expand and to collapse
all notes easily.</li>
</ul>

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

View File

@ -11,8 +11,8 @@
select <em>Insert child note</em> and look for the <em>Table item</em>.</p> select <em>Insert child note</em> and look for the <em>Table item</em>.</p>
<h3>Adding columns</h3> <h3>Adding columns</h3>
<p>Each column is a <a href="#root/_help_OFXdgB2nNk1F">promoted attribute</a> that <p>Each column is a <a href="#root/_help_OFXdgB2nNk1F">promoted attribute</a> that
is defined on the Book note. Ideally, the promoted attributes need to be is defined on the Collection note. Ideally, the promoted attributes need
inheritable in order to show up in the child notes.</p> to be inheritable in order to show up in the child notes.</p>
<p>To create a new column, simply press <em>Add new column</em> at the bottom <p>To create a new column, simply press <em>Add new column</em> at the bottom
of the table.</p> of the table.</p>
<p>There are also a few predefined columns:</p> <p>There are also a few predefined columns:</p>
@ -24,7 +24,7 @@
<li>The title of the note.</li> <li>The title of the note.</li>
</ul> </ul>
<h3>Adding new rows</h3> <h3>Adding new rows</h3>
<p>Each row is actually a note that is a child of the book note.</p> <p>Each row is actually a note that is a child of the Collection note.</p>
<p>To create a new note, press <em>Add new row</em> at the bottom of the table. <p>To create a new note, press <em>Add new row</em> at the bottom of the table.
By default it will try to edit the title of the newly created note.</p> By default it will try to edit the title of the newly created note.</p>
<p>Alternatively, the note can be created from the<a class="reference-link" <p>Alternatively, the note can be created from the<a class="reference-link"
@ -68,12 +68,12 @@
class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>. class="reference-link" href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>.
<ol> <ol>
<li>But only the promoted attributes that are defined at the level of the <li>But only the promoted attributes that are defined at the level of the
Book note are actually taken into consideration.</li> Collection note are actually taken into consideration.</li>
<li>There are plans to recursively look for columns across the sub-hierarchy.</li> <li>There are plans to recursively look for columns across the sub-hierarchy.</li>
</ol> </ol>
</li> </li>
<li>Hierarchy is not yet supported, so the table will only show the items <li>Hierarchy is not yet supported, so the table will only show the items
that are direct children of the <em>Book</em> note.</li> that are direct children of the <em>Collection</em> note.</li>
<li>Multiple labels and relations are not supported. If a&nbsp;<a class="reference-link" <li>Multiple labels and relations are not supported. If a&nbsp;<a class="reference-link"
href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;is defined href="#root/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;is defined
with a <em>Multi value</em> specificity, they will be ignored.</li> with a <em>Multi value</em> specificity, they will be ignored.</li>
@ -81,10 +81,9 @@
<h2>Use in search</h2> <h2>Use in search</h2>
<p>The table view can be used in a&nbsp;<a class="reference-link" href="#root/_help_m523cpzocqaD">Saved Search</a>&nbsp;by <p>The table view can be used in a&nbsp;<a class="reference-link" href="#root/_help_m523cpzocqaD">Saved Search</a>&nbsp;by
adding the <code>#viewType=table</code> attribute.</p> adding the <code>#viewType=table</code> attribute.</p>
<p>Unlike when used in a book, saved searches are not limited to the sub-hierarchy <p>Unlike when used in a Collection, saved searches are not limited to the
of a note and allows for advanced queries thanks to the power of the&nbsp; sub-hierarchy of a note and allows for advanced queries thanks to the power
<a of the&nbsp;<a class="reference-link" href="#root/_help_eIg8jdvaoNNd">Search</a>.</p>
class="reference-link" href="#root/_help_eIg8jdvaoNNd">Search</a>.</p>
<p>However, there are also some limitations:</p> <p>However, there are also some limitations:</p>
<ul> <ul>
<li>It's not possible to reorder notes.</li> <li>It's not possible to reorder notes.</li>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -1,20 +1,54 @@
<p>A <strong>Book Note</strong> in Trilium is a special type of <a href="#root/_help_BFs8mudNFgCS">note</a> designed <p>Collections are a unique type of notes that don't have a content, but
to display the contents of its child notes sequentially, creating a linear, instead display its child notes in various presentation methods.</p>
book-like reading experience. This format is particularly useful for viewing <p>Classic collections are read-only mode and compiles the contents of all
multiple smaller notes in a cohesive, continuous manner.</p> child notes into one continuous view. This makes it ideal for reading extensive
<p> information broken into smaller, manageable segments.</p>
<img src="Collections_image.png"> <ul>
</p> <li><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_8QqnMzx393bx">Grid View</a>&nbsp;which
<p>In the example above, the "node.js" note on the left panel contains several is the default presentation method for child notes (see&nbsp;<a class="reference-link"
child notes. The right panel displays the content of these child notes href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a>),
as a single continuous document.</p> where the notes are displayed as tiles with their title and content being
<h2>Features</h2> visible.&nbsp;</li>
<p>The Book Note format compiles the contents of all child notes into one <li><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_mULW0Q3VojwY">List View</a>&nbsp;is
continuous view. This makes it ideal for reading extensive information similar to&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_8QqnMzx393bx">Grid View</a>,
broken into smaller, manageable segments.</p> but it displays the notes one under the other with the content being expandable/collapsible,
<p>It uses the&nbsp;<a class="reference-link" href="#root/_help_0ESUbbAxVnoK">Note List</a>&nbsp;mechanism but also works recursively.</li>
to display the child notes, allowing the use of any of the view types (grid, </ul>
list, calendar).</p> <p>More specialized collections were introduced, such as the:</p>
<p>To adjust the view type, see the dedicated <em>Book</em> tab in the&nbsp; <ul>
<li><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_xWbu3jpNWapp">Calendar View</a>&nbsp;which
displays a week, month or year calendar with the notes being shown as events.
New events can be added easily by dragging across the calendar.&nbsp;</li>
<li><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_81SGnPGMk7Xc">Geo Map View</a>&nbsp;which
displays a geographical map in which the notes are represented as markers/pins
on the map. New events can be easily added by pointing on the map.</li>
<li><a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_2FvYrpmOXm29">Table View</a>&nbsp;displays
each note as a row in a table, with&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;being
shown as well. This makes it easy to visualize attributes of notes, as
well as making them easily editable.</li>
</ul>
<p>For a quick presentation of all the supported view types, see the child
notes of this help page, including screenshots.</p>
<h2>Configuration</h2>
<p>To adjust the view type, see the dedicated <em>Collections </em>tab in
the&nbsp;<a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>.</p>
<h2>Use in saved search</h2>
<p>Since collections are based on the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a>&nbsp;mechanism,
it's possible to apply the same configuration to&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_m523cpzocqaD">Saved Search</a>&nbsp;to
do advanced querying and presenting the result in an adequate matter such
as a calendar, a table or even a map.</p>
<h2>Under the hood</h2>
<p>Collections by themselves are simply notes with no content that rely on
the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a>&nbsp;mechanism
(the one that lists the children notes at the bottom of a note) to display
information.</p>
<p>By default, new collections use predefined&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_KC1HB96bqqHX">Templates</a>&nbsp;that
are stored safely in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_2mUhVmZK8RF3">Hidden Notes</a>&nbsp;to
define some basic configuration such as the type of view, but also some&nbsp;
<a <a
class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a>.</p> class="reference-link" href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">Promoted Attributes</a>&nbsp;to make editing easier.</p>
<p>Collections don't store their configuration (e.g. the position on the
map, the hidden columns in a table) in the content of the note itself,
but as attachments.</p>

View File

@ -0,0 +1 @@
<p>This is a clone of a note. Go to its <a href="../../Basic%20Concepts%20and%20Features/Notes/Note%20List/Calendar%20View.html">primary location</a>.</p>

View File

@ -0,0 +1 @@
<p>This is a clone of a note. Go to its <a href="../../Basic%20Concepts%20and%20Features/Notes/Note%20List/Geo%20Map%20View.html">primary location</a>.</p>

View File

@ -0,0 +1 @@
<p>This is a clone of a note. Go to its <a href="../../Basic%20Concepts%20and%20Features/Notes/Note%20List/Grid%20View.html">primary location</a>.</p>

View File

@ -0,0 +1 @@
<p>This is a clone of a note. Go to its <a href="../../Basic%20Concepts%20and%20Features/Notes/Note%20List/List%20View.html">primary location</a>.</p>

View File

@ -0,0 +1 @@
<p>This is a clone of a note. Go to its <a href="../../Basic%20Concepts%20and%20Features/Notes/Note%20List/Table%20View.html">primary location</a>.</p>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

View File

@ -3631,82 +3631,38 @@
"isInheritable": false, "isInheritable": false,
"position": 10 "position": 10
}, },
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-grid",
"isInheritable": false,
"position": 10
},
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "GTwFsgaA0lCt", "value": "GTwFsgaA0lCt",
"isInheritable": false, "isInheritable": false,
"position": 20 "position": 80
}, },
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
"value": "BlN9DFI679QC", "value": "BlN9DFI679QC",
"isInheritable": false, "isInheritable": false,
"position": 30 "position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 50
},
{
"type": "relation",
"name": "internalLink",
"value": "W8vYD3Q1zjCR",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "xWbu3jpNWapp",
"isInheritable": false,
"position": 70
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-grid",
"isInheritable": false,
"position": 10
} }
], ],
"format": "markdown", "format": "markdown",
"dataFileName": "Note List.md", "dataFileName": "Note List.md",
"attachments": [ "attachments": [
{ {
"attachmentId": "1SA0UPq471jp", "attachmentId": "9VbOf4HySQjH",
"title": "image.png", "title": "image.png",
"role": "image", "role": "image",
"mime": "image/png", "mime": "image/png",
"position": 10, "position": 10,
"dataFileName": "Note List_image.png" "dataFileName": "Note List_image.png"
},
{
"attachmentId": "2xoejxffj82c",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Note List_image.png"
},
{
"attachmentId": "mppVaDhlClF7",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Note List_image.png"
} }
], ],
"dirFileName": "Note List", "dirFileName": "Note List",
@ -3741,6 +3697,13 @@
"value": "ZjLYv08Rp3qC", "value": "ZjLYv08Rp3qC",
"isInheritable": false, "isInheritable": false,
"position": 20 "position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 30
} }
], ],
"format": "markdown", "format": "markdown",
@ -4162,6 +4125,124 @@
"dataFileName": "18_Geo Map View_image.png" "dataFileName": "18_Geo Map View_image.png"
} }
] ]
},
{
"isClone": false,
"noteId": "8QqnMzx393bx",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"BFs8mudNFgCS",
"0ESUbbAxVnoK",
"8QqnMzx393bx"
],
"title": "Grid View",
"notePosition": 50,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "0ESUbbAxVnoK",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-grid",
"isInheritable": false,
"position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "iPIMuisry3hd",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "6f9hih2hXXZk",
"isInheritable": false,
"position": 40
},
{
"type": "relation",
"name": "internalLink",
"value": "W8vYD3Q1zjCR",
"isInheritable": false,
"position": 50
}
],
"format": "markdown",
"dataFileName": "Grid View.md",
"attachments": [
{
"attachmentId": "al3KatZRq5TB",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Grid View_image.png"
}
]
},
{
"isClone": false,
"noteId": "mULW0Q3VojwY",
"notePath": [
"pOsGYCXsbNQG",
"gh7bpGYxajRS",
"BFs8mudNFgCS",
"0ESUbbAxVnoK",
"mULW0Q3VojwY"
],
"title": "List View",
"notePosition": 60,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-list-ul",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 30
},
{
"type": "relation",
"name": "internalLink",
"value": "8QqnMzx393bx",
"isInheritable": false,
"position": 40
}
],
"format": "markdown",
"dataFileName": "List View.md",
"attachments": [
{
"attachmentId": "igeOEpKp4ygW",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "List View_image.png"
}
]
} }
] ]
} }
@ -8408,13 +8489,6 @@
"type": "text", "type": "text",
"mime": "text/markdown", "mime": "text/markdown",
"attributes": [ "attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "BFs8mudNFgCS",
"isInheritable": false,
"position": 10
},
{ {
"type": "relation", "type": "relation",
"name": "internalLink", "name": "internalLink",
@ -8422,13 +8496,6 @@
"isInheritable": false, "isInheritable": false,
"position": 20 "position": 20
}, },
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 30
},
{ {
"type": "label", "type": "label",
"name": "shareAlias", "name": "shareAlias",
@ -8442,18 +8509,162 @@
"value": "bx bx-book", "value": "bx bx-book",
"isInheritable": false, "isInheritable": false,
"position": 20 "position": 20
},
{
"type": "relation",
"name": "internalLink",
"value": "OFXdgB2nNk1F",
"isInheritable": false,
"position": 60
},
{
"type": "relation",
"name": "internalLink",
"value": "BlN9DFI679QC",
"isInheritable": false,
"position": 70
},
{
"type": "relation",
"name": "internalLink",
"value": "8QqnMzx393bx",
"isInheritable": false,
"position": 80
},
{
"type": "relation",
"name": "internalLink",
"value": "mULW0Q3VojwY",
"isInheritable": false,
"position": 90
},
{
"type": "relation",
"name": "internalLink",
"value": "xWbu3jpNWapp",
"isInheritable": false,
"position": 100
},
{
"type": "relation",
"name": "internalLink",
"value": "81SGnPGMk7Xc",
"isInheritable": false,
"position": 110
},
{
"type": "relation",
"name": "internalLink",
"value": "2FvYrpmOXm29",
"isInheritable": false,
"position": 120
},
{
"type": "relation",
"name": "internalLink",
"value": "m523cpzocqaD",
"isInheritable": false,
"position": 130
},
{
"type": "relation",
"name": "internalLink",
"value": "KC1HB96bqqHX",
"isInheritable": false,
"position": 140
},
{
"type": "relation",
"name": "internalLink",
"value": "2mUhVmZK8RF3",
"isInheritable": false,
"position": 150
} }
], ],
"format": "markdown", "format": "markdown",
"dataFileName": "Collections.md", "dataFileName": "Collections.md",
"attachments": [ "attachments": [],
"dirFileName": "Collections",
"children": [
{ {
"attachmentId": "lpq3QC1C5LWg", "isClone": true,
"title": "image.png", "noteId": "8QqnMzx393bx",
"role": "image", "notePath": [
"mime": "image/jpg", "pOsGYCXsbNQG",
"position": 10, "KSZ04uQ2D1St",
"dataFileName": "Collections_image.png" "GTwFsgaA0lCt",
"8QqnMzx393bx"
],
"title": "Grid View",
"prefix": null,
"dataFileName": "Grid View.clone.md",
"type": "text",
"format": "markdown",
"isExpanded": false
},
{
"isClone": true,
"noteId": "mULW0Q3VojwY",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"GTwFsgaA0lCt",
"mULW0Q3VojwY"
],
"title": "List View",
"prefix": null,
"dataFileName": "List View.clone.md",
"type": "text",
"format": "markdown",
"isExpanded": false
},
{
"isClone": true,
"noteId": "xWbu3jpNWapp",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"GTwFsgaA0lCt",
"xWbu3jpNWapp"
],
"title": "Calendar View",
"prefix": null,
"dataFileName": "Calendar View.clone.md",
"type": "text",
"format": "markdown",
"isExpanded": false
},
{
"isClone": true,
"noteId": "2FvYrpmOXm29",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"GTwFsgaA0lCt",
"2FvYrpmOXm29"
],
"title": "Table View",
"prefix": null,
"dataFileName": "Table View.clone.md",
"type": "text",
"format": "markdown",
"isExpanded": false
},
{
"isClone": true,
"noteId": "81SGnPGMk7Xc",
"notePath": [
"pOsGYCXsbNQG",
"KSZ04uQ2D1St",
"GTwFsgaA0lCt",
"81SGnPGMk7Xc"
],
"title": "Geo Map View",
"prefix": null,
"dataFileName": "Geo Map View.clone.md",
"type": "text",
"format": "markdown",
"isExpanded": false
} }
] ]
}, },

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

View File

@ -1,4 +1,6 @@
# Note List # Note List
<figure class="image"><img style="aspect-ratio:990/590;" src="Note List_image.png" width="990" height="590"></figure>
When a note has one or more child notes, they will be listed at the end of the note for easy navigation. When a note has one or more child notes, they will be listed at the end of the note for easy navigation.
## Configuration ## Configuration
@ -8,32 +10,8 @@ When a note has one or more child notes, they will be listed at the end of the n
## View types ## View types
The view types dictate how the child notes are represented.
By default, the notes will be displayed in a grid, however there are also some other view types available. By default, the notes will be displayed in a grid, however there are also some other view types available.
> [!TIP] Generally the view type can only be changed in a <a class="reference-link" href="../../Note%20Types/Collections.md">Collections</a> note from the <a class="reference-link" href="../UI%20Elements/Ribbon.md">Ribbon</a>, but it can also be changed manually on any type of note using the `#viewType` attribute.
> Generally the view type can only be changed in a <a class="reference-link" href="../../Note%20Types/Collections.md">Book</a> note from the <a class="reference-link" href="../UI%20Elements/Ribbon.md">Ribbon</a>, but it can also be changed manually on any type of note using the `#viewType` attribute.
### Grid view
<figure class="image image-style-align-center"><img style="aspect-ratio:1025/655;" src="1_Note List_image.png" width="1025" height="655"></figure>
This view presents the child notes in a grid format, allowing for a more visual navigation experience.
* For <a class="reference-link" href="../../Note%20Types/Text.md">Text</a> notes, the text can be slighly scrollable via the mouse wheel to reveal more context.
* For <a class="reference-link" href="../../Note%20Types/Code.md">Code</a> notes, syntax highlighting is applied.
* For <a class="reference-link" href="../../Note%20Types/File.md">File</a> notes, a preview is made available for audio, video and PDF notes.
* If the note does not have a content, a list of its child notes will be displayed instead.
This is the default view type.
### List view
<figure class="image image-style-align-center"><img style="aspect-ratio:1013/526;" src="Note List_image.png" width="1013" height="526"></figure>
In the list view mode, each note is displayed in a single row with only the title and the icon of the note being visible by the default. By pressing the expand button it's possible to view the content of the note, as well as the children of the note (recursively).
### Calendar view
<figure class="image image-style-align-center"><img style="aspect-ratio:1090/598;" src="2_Note List_image.png" width="1090" height="598"></figure>
In the calendar view, child notes are represented as events, with a start date and optionally an end date. The view also has interaction support such as moving or creating new events. See <a class="reference-link" href="Note%20List/Calendar%20View.md">Calendar View</a> for more information.

View File

@ -1,7 +1,7 @@
# Calendar View # Calendar View
<figure class="image image-style-align-center"><img style="aspect-ratio:767/606;" src="4_Calendar View_image.png" width="767" height="606"></figure> <figure class="image image-style-align-center"><img style="aspect-ratio:767/606;" src="4_Calendar View_image.png" width="767" height="606"></figure>
The Calendar view of Book notes will display each child note in a calendar that has a start date and optionally an end date, as an event. The Calendar view will display each child note in a calendar that has a start date and optionally an end date, as an event.
The Calendar view has multiple display modes: The Calendar view has multiple display modes:
@ -10,11 +10,11 @@ The Calendar view has multiple display modes:
* Year view, which displays the entire year for quick reference. * Year view, which displays the entire year for quick reference.
* List view, which displays all the events of a given month in sequence. * List view, which displays all the events of a given month in sequence.
Unlike other Book view types, the Calendar view also allows some kind of interaction, such as moving events around as well as creating new ones. Unlike other Collection view types, the Calendar view also allows some kind of interaction, such as moving events around as well as creating new ones.
## Creating a calendar ## Creating a calendar
<figure class="table"><table><thead><tr><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><td>1</td><td><img src="2_Calendar View_image.png"></td><td>The Calendar View works only for Book note types. To create a new note, right click on the note tree on the left and select Insert note after, or Insert child note and then select <em>Book</em>.</td></tr><tr><td>2</td><td><img src="3_Calendar View_image.png"></td><td>Once created, the “View type” of the Book needs changed to “Calendar”, by selecting the “Book Properties” tab in the ribbon.</td></tr></tbody></table></figure> <figure class="table"><table><thead><tr><th>&nbsp;</th><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><td>1</td><td><img src="2_Calendar View_image.png"></td><td>The Calendar View works only for Collection note types. To create a new note, right click on the note tree on the left and select Insert note after, or Insert child note and then select <em>Collection</em>.</td></tr><tr><td>2</td><td><img src="3_Calendar View_image.png"></td><td>Once created, the “View type” of the Collection needs changed to “Calendar”, by selecting the “Collection Properties” tab in the ribbon.</td></tr></tbody></table></figure>
## Creating a new event/note ## Creating a new event/note
@ -22,7 +22,7 @@ Unlike other Book view types, the Calendar view also allows some kind of interac
* You will be asked for the name of the new note. If the popup is dismissed by pressing the close button or escape, then the note will not be created. * You will be asked for the name of the new note. If the popup is dismissed by pressing the close button or escape, then the note will not be created.
* It's possible to drag across multiple days to set both the start and end date of a particular note. * It's possible to drag across multiple days to set both the start and end date of a particular note.
![](Calendar%20View_image.png) ![](Calendar%20View_image.png)
* Creating new notes from the calendar will respect the `~child:template` relation if set on the book note. * Creating new notes from the calendar will respect the `~child:template` relation if set on the Collection note.
## Interacting with events ## Interacting with events
@ -34,15 +34,22 @@ Unlike other Book view types, the Calendar view also allows some kind of interac
* Drag and drop an event on the calendar to move it to another day. * Drag and drop an event on the calendar to move it to another day.
* The length of an event can be changed by placing the mouse to the right edge of the event and dragging the mouse around. * The length of an event can be changed by placing the mouse to the right edge of the event and dragging the mouse around.
## Configuring the calendar ## Configuring the calendar view
The following attributes can be added to the book type: In the _Collections_ tab in the <a class="reference-link" href="../../UI%20Elements/Ribbon.md">Ribbon</a>, it's possible to adjust the following:
* Hide weekends from the week view.
* Display week numbers on the calendar.
## Configuring the calendar using attributes
The following attributes can be added to the Collection type:
<figure class="table"><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>#calendar:hideWeekends</code></td><td>When present (regardless of value), it will hide Saturday and Sundays from the calendar.</td></tr><tr><td><code>#calendar:weekNumbers</code></td><td>When present (regardless of value), it will show the number of the week on the calendar.</td></tr><tr><td><code>#calendar:view</code></td><td><p>Which view to display in the calendar:</p><ul><li><code>timeGridWeek</code> for the <em>week</em> view;</li><li><code>dayGridMonth</code> for the <em>month</em> view;</li><li><code>multiMonthYear</code> for the <em>year</em> view;</li><li><code>listMonth</code> for the <em>list</em> view.</li></ul><p>Any other value will be dismissed and the default view (month) will be used instead.</p><p>The value of this label is automatically updated when changing the view using the UI buttons.</p></td></tr><tr><td><code>~child:template</code></td><td>Defines the template for newly created notes in the calendar (via dragging or clicking).</td></tr></tbody></table></figure> <figure class="table"><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td><code>#calendar:hideWeekends</code></td><td>When present (regardless of value), it will hide Saturday and Sundays from the calendar.</td></tr><tr><td><code>#calendar:weekNumbers</code></td><td>When present (regardless of value), it will show the number of the week on the calendar.</td></tr><tr><td><code>#calendar:view</code></td><td><p>Which view to display in the calendar:</p><ul><li><code>timeGridWeek</code> for the <em>week</em> view;</li><li><code>dayGridMonth</code> for the <em>month</em> view;</li><li><code>multiMonthYear</code> for the <em>year</em> view;</li><li><code>listMonth</code> for the <em>list</em> view.</li></ul><p>Any other value will be dismissed and the default view (month) will be used instead.</p><p>The value of this label is automatically updated when changing the view using the UI buttons.</p></td></tr><tr><td><code>~child:template</code></td><td>Defines the template for newly created notes in the calendar (via dragging or clicking).</td></tr></tbody></table></figure>
In addition, the first day of the week can be either Sunday or Monday and can be adjusted from the application settings. In addition, the first day of the week can be either Sunday or Monday and can be adjusted from the application settings.
## Configuring the calendar events ## Configuring the calendar events using attributes
For each note of the calendar, the following attributes can be used: For each note of the calendar, the following attributes can be used:
@ -52,9 +59,9 @@ For each note of the calendar, the following attributes can be used:
![](11_Calendar%20View_image.png) ![](11_Calendar%20View_image.png)
The calendar displays all the child notes of the book that have a `#startDate`. An `#endDate` can optionally be added. The calendar displays all the child notes of the Collection that have a `#startDate`. An `#endDate` can optionally be added.
If editing the start date and end date from the note itself is desirable, the following attributes can be added to the book note: If editing the start date and end date from the note itself is desirable, the following attributes can be added to the Collection note:
``` ```
#viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date" #viewType=calendar #label:startDate(inheritable)="promoted,alias=Start Date,single,date"
@ -72,7 +79,7 @@ When not used in a Journal, the calendar is recursive. That is, it will look for
### Using with the Journal / calendar ### Using with the Journal / calendar
It is possible to integrate the calendar view into the Journal with day notes. In order to do so change the note type of the Journal note (calendar root) to Book and then select the Calendar View. It is possible to integrate the calendar view into the Journal with day notes. In order to do so change the note type of the Journal note (calendar root) to Collection and then select the Calendar View.
Based on the `#calendarRoot` (or `#workspaceCalendarRoot`) attribute, the calendar will know that it's in a calendar and apply the following: Based on the `#calendarRoot` (or `#workspaceCalendarRoot`) attribute, the calendar will know that it's in a calendar and apply the following:
@ -87,7 +94,7 @@ Based on the `#calendarRoot` (or `#workspaceCalendarRoot`) attribute, the calend
By default, events are displayed on the calendar by their note title. However, it is possible to configure a different attribute to be displayed instead. By default, events are displayed on the calendar by their note title. However, it is possible to configure a different attribute to be displayed instead.
To do so, assign `#calendar:title` to the child note (not the calendar/book note), with the value being `name` where `name` can be any label (make not to add the `#` prefix). The attribute can also come through inheritance such as a template attribute. If the note does not have the requested label, the title of the note will be used instead. To do so, assign `#calendar:title` to the child note (not the calendar/Collection note), with the value being `name` where `name` can be any label (make not to add the `#` prefix). The attribute can also come through inheritance such as a template attribute. If the note does not have the requested label, the title of the note will be used instead.
<figure class="table" style="width:100%;"><table><thead><tr><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre></td><td><p>&nbsp;</p><figure class="image image-style-align-center"><img style="aspect-ratio:445/124;" src="5_Calendar View_image.png" width="445" height="124"></figure></td></tr></tbody></table></figure> <figure class="table" style="width:100%;"><table><thead><tr><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><td><pre><code class="language-text-x-trilium-auto">#startDate=2025-02-11 #endDate=2025-02-13 #name="My vacation" #calendar:title="name"</code></pre></td><td><p>&nbsp;</p><figure class="image image-style-align-center"><img style="aspect-ratio:445/124;" src="5_Calendar View_image.png" width="445" height="124"></figure></td></tr></tbody></table></figure>

View File

@ -0,0 +1,23 @@
# Grid View
<figure class="image"><img style="aspect-ratio:990/590;" src="Grid View_image.png" width="990" height="590"></figure>
This view presents the child notes in a grid format, allowing for a more visual navigation experience.
Each tile contains:
* The title of a note.
* A snippet of the content.
* For empty notes, the sub-children are also displayed, allowing for quick navigation.
Depending on the type of note:
* For <a class="reference-link" href="../../../Note%20Types/Text.md">Text</a> notes, the text can be slightly scrollable via the mouse wheel to reveal more context.
* For <a class="reference-link" href="../../../Note%20Types/Code.md">Code</a> notes, syntax highlighting is applied.
* For <a class="reference-link" href="../../../Note%20Types/File.md">File</a> notes, a preview is made available for audio, video and PDF notes.
* If the note does not have a content, a list of its child notes will be displayed instead.
The grid view is also used by default in the <a class="reference-link" href="../Note%20List.md">Note List</a> of every note, making it easy to navigate to children notes.
## Configuration
Unlike most other view types, the grid view is not actually configurable.

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -0,0 +1,11 @@
# List View
<figure class="image"><img style="aspect-ratio:1387/758;" src="List View_image.png" width="1387" height="758"></figure>
List view is similar to <a class="reference-link" href="Grid%20View.md">Grid View</a>, but in the list view mode, each note is displayed in a single row with only the title and the icon of the note being visible by the default. By pressing the expand button it's possible to view the content of the note, as well as the children of the note (recursively).
In the example above, the "Node.js" note on the left panel contains several child notes. The right panel displays the content of these child notes as a single continuous document.
## Interaction
* Each note can be expanded or collapsed by clicking on the arrow to the left of the title.
* In the <a class="reference-link" href="../../UI%20Elements/Ribbon.md">Ribbon</a>, in the _Collection_ tab there are options to expand and to collapse all notes easily.

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

View File

@ -11,7 +11,7 @@ Right click the <a class="reference-link" href="../../UI%20Elements/Note%20Tree
### Adding columns ### Adding columns
Each column is a [promoted attribute](../../../Advanced%20Usage/Attributes/Promoted%20Attributes.md) that is defined on the Book note. Ideally, the promoted attributes need to be inheritable in order to show up in the child notes. Each column is a [promoted attribute](../../../Advanced%20Usage/Attributes/Promoted%20Attributes.md) that is defined on the Collection note. Ideally, the promoted attributes need to be inheritable in order to show up in the child notes.
To create a new column, simply press _Add new column_ at the bottom of the table. To create a new column, simply press _Add new column_ at the bottom of the table.
@ -23,7 +23,7 @@ There are also a few predefined columns:
### Adding new rows ### Adding new rows
Each row is actually a note that is a child of the book note. Each row is actually a note that is a child of the Collection note.
To create a new note, press _Add new row_ at the bottom of the table. By default it will try to edit the title of the newly created note. To create a new note, press _Add new row_ at the bottom of the table. By default it will try to edit the title of the newly created note.
@ -62,16 +62,16 @@ Currently, it's possible to reorder notes even if sorting is used, but the resul
The table functionality is still in its early stages, as such it faces quite a few important limitations: The table functionality is still in its early stages, as such it faces quite a few important limitations:
1. As mentioned previously, the columns of the table are defined as <a class="reference-link" href="../../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a>. 1. As mentioned previously, the columns of the table are defined as <a class="reference-link" href="../../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a>.
1. But only the promoted attributes that are defined at the level of the Book note are actually taken into consideration. 1. But only the promoted attributes that are defined at the level of the Collection note are actually taken into consideration.
2. There are plans to recursively look for columns across the sub-hierarchy. 2. There are plans to recursively look for columns across the sub-hierarchy.
2. Hierarchy is not yet supported, so the table will only show the items that are direct children of the _Book_ note. 2. Hierarchy is not yet supported, so the table will only show the items that are direct children of the _Collection_ note.
3. Multiple labels and relations are not supported. If a <a class="reference-link" href="../../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a> is defined with a _Multi value_ specificity, they will be ignored. 3. Multiple labels and relations are not supported. If a <a class="reference-link" href="../../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a> is defined with a _Multi value_ specificity, they will be ignored.
## Use in search ## Use in search
The table view can be used in a <a class="reference-link" href="../../../Note%20Types/Saved%20Search.md">Saved Search</a> by adding the `#viewType=table` attribute. The table view can be used in a <a class="reference-link" href="../../../Note%20Types/Saved%20Search.md">Saved Search</a> by adding the `#viewType=table` attribute.
Unlike when used in a book, saved searches are not limited to the sub-hierarchy of a note and allows for advanced queries thanks to the power of the <a class="reference-link" href="../../Navigation/Search.md">Search</a>. Unlike when used in a Collection, saved searches are not limited to the sub-hierarchy of a note and allows for advanced queries thanks to the power of the <a class="reference-link" href="../../Navigation/Search.md">Search</a>.
However, there are also some limitations: However, there are also some limitations:

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -1,14 +1,31 @@
# Collections # Collections
A **Book Note** in Trilium is a special type of [note](../Basic%20Concepts%20and%20Features/Notes.md) designed to display the contents of its child notes sequentially, creating a linear, book-like reading experience. This format is particularly useful for viewing multiple smaller notes in a cohesive, continuous manner. Collections are a unique type of notes that don't have a content, but instead display its child notes in various presentation methods.
![](Collections_image.png) Classic collections are read-only mode and compiles the contents of all child notes into one continuous view. This makes it ideal for reading extensive information broken into smaller, manageable segments.
In the example above, the "node.js" note on the left panel contains several child notes. The right panel displays the content of these child notes as a single continuous document. * <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List/Grid%20View.md">Grid View</a> which is the default presentation method for child notes (see <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a>), where the notes are displayed as tiles with their title and content being visible.
* <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List/List%20View.md">List View</a> is similar to <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List/Grid%20View.md">Grid View</a>, but it displays the notes one under the other with the content being expandable/collapsible, but also works recursively.
## Features More specialized collections were introduced, such as the:
The Book Note format compiles the contents of all child notes into one continuous view. This makes it ideal for reading extensive information broken into smaller, manageable segments. * <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List/Calendar%20View.md">Calendar View</a> which displays a week, month or year calendar with the notes being shown as events. New events can be added easily by dragging across the calendar.
* <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List/Geo%20Map%20View.md">Geo Map View</a> which displays a geographical map in which the notes are represented as markers/pins on the map. New events can be easily added by pointing on the map.
* <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List/Table%20View.md">Table View</a> displays each note as a row in a table, with <a class="reference-link" href="../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a> being shown as well. This makes it easy to visualize attributes of notes, as well as making them easily editable.
It uses the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a> mechanism to display the child notes, allowing the use of any of the view types (grid, list, calendar). For a quick presentation of all the supported view types, see the child notes of this help page, including screenshots.
To adjust the view type, see the dedicated _Book_ tab in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.md">Ribbon</a>. ## Configuration
To adjust the view type, see the dedicated _Collections_ tab in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Ribbon.md">Ribbon</a>.
## Use in saved search
Since collections are based on the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a> mechanism, it's possible to apply the same configuration to <a class="reference-link" href="Saved%20Search.md">Saved Search</a> to do advanced querying and presenting the result in an adequate matter such as a calendar, a table or even a map.
## Under the hood
Collections by themselves are simply notes with no content that rely on the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Notes/Note%20List.md">Note List</a> mechanism (the one that lists the children notes at the bottom of a note) to display information.
By default, new collections use predefined <a class="reference-link" href="../Advanced%20Usage/Templates.md">Templates</a> that are stored safely in the <a class="reference-link" href="../Advanced%20Usage/Hidden%20Notes.md">Hidden Notes</a> to define some basic configuration such as the type of view, but also some <a class="reference-link" href="../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a> to make editing easier.
Collections don't store their configuration (e.g. the position on the map, the hidden columns in a table) in the content of the note itself, but as attachments.

View File

@ -0,0 +1,2 @@
# Calendar View
This is a clone of a note. Go to its [primary location](../../Basic%20Concepts%20and%20Features/Notes/Note%20List/Calendar%20View.md).

View File

@ -0,0 +1,2 @@
# Geo Map View
This is a clone of a note. Go to its [primary location](../../Basic%20Concepts%20and%20Features/Notes/Note%20List/Geo%20Map%20View.md).

View File

@ -0,0 +1,2 @@
# Grid View
This is a clone of a note. Go to its [primary location](../../Basic%20Concepts%20and%20Features/Notes/Note%20List/Grid%20View.md).

View File

@ -0,0 +1,2 @@
# List View
This is a clone of a note. Go to its [primary location](../../Basic%20Concepts%20and%20Features/Notes/Note%20List/List%20View.md).

View File

@ -0,0 +1,2 @@
# Table View
This is a clone of a note. Go to its [primary location](../../Basic%20Concepts%20and%20Features/Notes/Note%20List/Table%20View.md).

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB