sascha
/
Notes
mirror of https://github.com/TriliumNext/Notes
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(docs): reorganize script notes & document render note

pull/1644/head
Elian Doran 2025-04-06 15:30:54 +07:00
parent 161f6172e7
commit fb6e6241d9
No known key found for this signature in database
58 changed files with 1462 additions and 1310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2244
docs/User Guide/!!!meta.json
View File

File diff suppressed because it is too large Load Diff

2
docs/User Guide/User Guide/Advanced Usage/Advanced Showcases.md
Unescape Escape View File

@ -1,5 +1,5 @@
# Advanced Showcases
Trilium offers advanced functionality through [Scripts](../Note%20Types/Code/Scripting.md) and [Promoted Attributes](Attributes/Promoted%20Attributes.md). To illustrate these features, we've prepared several showcases available in the [demo notes](Database.md):
Trilium offers advanced functionality through [Scripts](../Scripting.md) and [Promoted Attributes](Attributes/Promoted%20Attributes.md). To illustrate these features, we've prepared several showcases available in the [demo notes](Database.md):
* [Relation Map](../Note%20Types/Relation%20Map.md)
* [Day Notes](Advanced%20Showcases/Day%20Notes.md)

4
docs/User Guide/User Guide/Advanced Usage/Advanced Showcases/Task Manager.md
Unescape Escape View File

@ -1,5 +1,5 @@
# Task Manager
Task Manager is a [promoted attributes](../Attributes/Promoted%20Attributes.md) and [scripts](../../Note%20Types/Code/Scripting.md)showcase present in the [demo notes](../Database.md).
Task Manager is a [promoted attributes](../Attributes/Promoted%20Attributes.md) and [scripts](../../Scripting.md)showcase present in the [demo notes](../Database.md).
## Demo
@ -15,7 +15,7 @@ New tasks are created in the TODO note which has `~child:template` [relation](..
### Attributes
Task template defines several [promoted attributes](../Attributes/Promoted%20Attributes.md) - todoDate, doneDate, tags, location. Importantly it also defines `~runOnAttributeChange` relation - [event](../../Note%20Types/Code/Events.md) handler which is run on attribute change. This [script](../../Note%20Types/Code/Scripting.md) handles when e.g. we fill out the doneDate attribute - meaning the task is done and should be moved to "Done" note and removed from TODO, locations and tags.
Task template defines several [promoted attributes](../Attributes/Promoted%20Attributes.md) - todoDate, doneDate, tags, location. Importantly it also defines `~runOnAttributeChange` relation - [event](../../Note%20Types/Code/Events.md) handler which is run on attribute change. This [script](../../Scripting.md) handles when e.g. we fill out the doneDate attribute - meaning the task is done and should be moved to "Done" note and removed from TODO, locations and tags.
### New task button

2
docs/User Guide/User Guide/Advanced Usage/Advanced Showcases/Weight Tracker.md
Unescape Escape View File

@ -7,7 +7,7 @@ By adding `weight` as a [promoted attribute](../Attributes/Promoted%20Attributes
## Implementation
The `Weight Tracker` note in the screenshot above is of the type `Render Note`. That type of note doesn't have any useful content itself. Instead it is a placeholder where a [script](../../Note%20Types/Code/Scripting.md) can render its output.
The `Weight Tracker` note in the screenshot above is of the type `Render Note`. That type of note doesn't have any useful content itself. Instead it is a placeholder where a [script](../../Scripting.md) can render its output.
Scripts for `Render Notes` are defined in a [relation](../Attributes.md) called `~renderNote`. In this example, it's the `Weight Tracker`'s child `Implementation`. The Implementation consists of two [code notes](../../Note%20Types/Code.md) that contain some HTML and JavaScript respectively, which load all the notes with a `weight` attribute and display their values in a chart.

2
docs/User Guide/User Guide/Advanced Usage/Custom Request Handler.md
Unescape Escape View File

@ -1,5 +1,5 @@
# Custom Request Handler
Trilium provides a mechanism for [scripts](../Note%20Types/Code/Scripting.md) to open a public REST endpoint. This opens a way for various integrations with other services - a simple example would be creating new note from Slack by issuing a slash command (e.g. `/trilium buy milk`).
Trilium provides a mechanism for [scripts](../Scripting.md) to open a public REST endpoint. This opens a way for various integrations with other services - a simple example would be creating new note from Slack by issuing a slash command (e.g. `/trilium buy milk`).
## Create note from outside Trilium

19
docs/User Guide/User Guide/Advanced Usage/Database.md
Unescape Escape View File

@ -3,24 +3,9 @@ Your Trilium data is stored in a [SQLite](https://www.sqlite.org) database which
## Demo Notes
When you run Trilium for the first time, it will generate a new database containing demo notes. These notes showcase its many features, such as:
When first starting Trilium, it will provide a set of notes to showcase various features of the application.
* [Relation Map](../Note%20Types/Relation%20Map.md)
* [Day Notes](Advanced%20Showcases/Day%20Notes.md)
* [Weight Tracker](Advanced%20Showcases/Weight%20Tracker.md)
* [Task Manager](Advanced%20Showcases/Task%20Manager.md)
* [Custom CSS Themes](../Basic%20Concepts%20and%20Features/Themes.md)
### Restoring Demo Notes
There are some cases in which you may want to restore the original demo notes. For example, if you experimented with some of the more advanced features and want to see the original reference, or if you simply want to explore the latest version of the demo notes, which might showcase new features.
You can easily restore the demo notes by using Trilium's built-in import feature by importing them:
* Download [this .zip archive](https://github.com/TriliumNext/Notes/raw/develop/db/demo.zip) with the latest version of the demo notes
* Right click on any note in your tree under which you would like the demo notes to be imported
* Click "Import into note"
* Select the .zip archive to import it
For more information see <a class="reference-link" href="Database/Demo%20Notes.md">Demo Notes</a>.
## Manually Modifying the Database

19
docs/User Guide/User Guide/Advanced Usage/Database/Demo Notes.md
Unescape Escape View File

@ -0,0 +1,19 @@
# Demo Notes
When you run Trilium for the first time, it will generate a new database containing demo notes. These notes showcase its many features, such as:
* <a class="reference-link" href="../../Note%20Types/Relation%20Map.md">Relation Map</a>
* <a class="reference-link" href="../Advanced%20Showcases/Day%20Notes.md">Day Notes</a>
* <a class="reference-link" href="../Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a>
* <a class="reference-link" href="../Advanced%20Showcases/Task%20Manager.md">Task Manager</a>
* <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Themes.md">Themes</a>
### Restoring Demo Notes
There are some cases in which you may want to restore the original demo notes. For example, if you experimented with some of the more advanced features and want to see the original reference, or if you simply want to explore the latest version of the demo notes, which might showcase new features.
You can easily restore the demo notes by using Trilium's built-in import feature by importing them:
* Download [this .zip archive](https://github.com/TriliumNext/Notes/raw/develop/db/demo.zip) with the latest version of the demo notes
* Right click on any note in your tree under which you would like the demo notes to be imported
* Click "Import into note"
* Select the .zip archive to import it

2
docs/User Guide/User Guide/Advanced Usage/Database/Manually altering the database.md
Unescape Escape View File

@ -7,7 +7,7 @@ If you are doing any advanced development or troubleshooting where you manually
The SQL Console is Trilium's built-in database editor.
See [SQL Console](Manually%20altering%20the%20database/SQL%20Console.md).
See <a class="reference-link" href="Manually%20altering%20the%20database/SQL%20Console.md">SQL Console</a>.
## Externally modifying the database

0
docs/User Guide/User Guide/Developer Guides/REST API/ETAPI/API Reference.dat → docs/User Guide/User Guide/Advanced Usage/ETAPI (REST API)/API Reference.dat
Unescape Escape View File

0
docs/User Guide/User Guide/Developer Guides/REST API/Internal API/API Reference.dat → docs/User Guide/User Guide/Advanced Usage/Internal API/API Reference.dat
Unescape Escape View File

2
docs/User Guide/User Guide/Basic Concepts and Features/Notes.md
Unescape Escape View File

@ -5,7 +5,7 @@ Note is a central entity in Trilium. Main attributes of note are title and conte
The main note type is a rich-text note type called <a class="reference-link" href="../Note%20Types/Text.md">Text</a>. For diagrams and drawing there is <a class="reference-link" href="../Note%20Types/Canvas.md">Canvas</a> and <a class="reference-link" href="../Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a>.
There are also more complex note types such as <a class="reference-link" href="../Note%20Types/Saved%20Search.md">Saved Search</a>, <a class="reference-link" href="../Note%20Types/Render%20Note.md">Render Note</a> that usually go hand-in-hand with <a class="reference-link" href="../Note%20Types/Code/Scripting.md">Scripting</a>.
There are also more complex note types such as <a class="reference-link" href="../Note%20Types/Saved%20Search.md">Saved Search</a>, <a class="reference-link" href="../Note%20Types/Render%20Note.md">Render Note</a> that usually go hand-in-hand with <a class="reference-link" href="../Scripting.md">Scripting</a>.
In Trilium there's no specific "folder" note type. Any note can have children and thus be a folder.

2
docs/User Guide/User Guide/Basic Concepts and Features/Notes/Attachments.md
Unescape Escape View File

@ -1,7 +1,7 @@
# Attachments
A [note](../Notes.md) in Trilium can _own_ one or more attachments, which can be either images or files. These attachments can be displayed or linked within the note that owns them.
This can be especially useful to include dependencies for your [scripts](../../Note%20Types/Code/Scripting.md). The <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a> shows how to use [chartjs](https://chartjs.org/) which is attached to the script note.
This can be especially useful to include dependencies for your [scripts](../../Scripting.md). The <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a> shows how to use [chartjs](https://chartjs.org/) which is attached to the script note.
Each note exclusively owns its attachments, meaning attachments cannot be shared or linked from one note to another. If an attachment link is copied to a different note, the attachment itself is duplicated, and the copies are managed independently thereafter.

4
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.md
Unescape Escape View File

@ -50,13 +50,13 @@ Right click either the _Available launchers_ or _Visible launchers_ sections and
2. Optionally, set `hoistedNote` to hoist a particular note. See [Note Hoisting](../Navigation/Note%20Hoisting.md) for more information.
3. Optionally, set a `keyboardShortcut` to trigger the launcher.
2. **Script Launcher**
An advanced launcher which will run a script upon pressing. See [Scripts](../../Note%20Types/Code/Scripting.md) for more information.
An advanced launcher which will run a script upon pressing. See [Scripts](../../Scripting.md) for more information.
1. Set `script` to point to the desired script to run.
2. Optionally, set a `keyboardShortcut` to trigger the launcher.
3. **Custom Widget**
Allows defining a custom widget to be rendered inside the launcher. See [Widget Basics](../../Developer%20Guides/Widget%20Basics.md) for more information.
Allows defining a custom widget to be rendered inside the launcher. See [Widget Basics](../../Scripting/Widget%20Basics.md) for more information.
4. **Spacers**
Launchers that create some distance between other launchers for better visual distinction.

2
docs/User Guide/User Guide/FAQ.md
Unescape Escape View File

@ -17,7 +17,7 @@ Common request is to allow multiple users collaborate, share notes etc. So far I
* it's a huge feature, or rather a Pandora's box of collaboration features like user management, permissions, conflict resolution, real-time editing of a note by multiple people etc. This would be a huge amount of work. Trilium Notes is project made mostly by one person in free time and that's unlikely to change in the future.
* given its size it would probably pivot the attention away from my main focus which is a personal note-taking
* the assumption that only single person has access to the app simplifies many things, or just outright makes them possible. In multi-user app, our [scripting](Note%20Types/Code/Scripting.md)support would be a XSS security hole, while with the single user assumption it's an endless customizable tool.
* the assumption that only single person has access to the app simplifies many things, or just outright makes them possible. In multi-user app, our [scripting](Scripting.md)support would be a XSS security hole, while with the single user assumption it's an endless customizable tool.
## How to open multiple documents in one Trilium instance

2
docs/User Guide/User Guide/Installation & Setup/Mobile Frontend.md
Unescape Escape View File

@ -31,4 +31,4 @@ Trilium decides automatically whether to use mobile or desktop frontend. If this
## Scripting
You can alter the behavior with [scripts](../Note%20Types/Code/Scripting.md) just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.
You can alter the behavior with [scripts](../Scripting.md) just like for normal frontend. For script notes to be executed, they need to have labeled `#run=mobileStartup`.

2
docs/User Guide/User Guide/Note Types.md
Unescape Escape View File

@ -25,4 +25,4 @@ It is possible to change the type of a note after it has been created via the _B
The following note types are supported by Trilium:
<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:29.42%;"><col style="width:70.58%;"></colgroup><thead><tr><th>Note Type</th><th>Description</th></tr></thead><tbody><tr><td><a class="reference-link" href="Note%20Types/Text.md">Text</a></td><td>The default note type, which allows for rich text formatting, images, admonitions and right-to-left support.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Code.md">Code</a></td><td>Uses a mono-space font and can be used to store larger chunks of code or plain text than a text note, and has better syntax highlighting.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Saved%20Search.md">Saved Search</a></td><td>Stores the information about a search (the search text, criteria, etc.) for later use. Can be used for quick filtering of a large amount of notes, for example. The search can easily be triggered.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Relation%20Map.md">Relation Map</a></td><td>Allows easy creation of notes and relations between them. Can be used for mainly relational data such as a family tree.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Note%20Map.md">Note Map</a></td><td>Displays the relationships between the notes, whether via relations or their hierarchical structure.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Render%20Note.md">Render Note</a></td><td>Used in&nbsp;<a class="reference-link" href="Note%20Types/Code/Scripting.md">Scripting</a>, it displays the HTML content of another note. This allows displaying any kind of content, provided there is a script behind it to generate it.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Book.md">Book</a></td><td><p>Displays the children of the note either as a grid, a list, or for a more specialized case: a calendar.</p><p>Generally useful for easy reading of short notes.</p></td></tr><tr><td><a class="reference-link" href="Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a></td><td>Displays diagrams such as bar charts, flow charts, state diagrams, etc. Requires a bit of technical knowledge since the diagrams are written in a specialized format.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Canvas.md">Canvas</a></td><td>Allows easy drawing of sketches, diagrams, handwritten content. Uses the same technology behind <a href="https://excalidraw.com">excalidraw.com</a>.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Web%20View.md">Web View</a></td><td>Displays the content of an external web page, similar to a browser.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Mind%20Map.md">Mind Map</a></td><td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Geo%20Map.md">Geo Map</a></td><td>Displays the children of the note as a geographical map, one use-case would be to plan vacations. It even has basic support for tracks. Notes can also be created from it.</td></tr><tr><td><a class="reference-link" href="Note%20Types/File.md">File</a></td><td>Represents an uploaded file such as PDFs, images, video or audio files.</td></tr></tbody></table></figure>
<figure class="table" style="width:100%;"><table class="ck-table-resized"><colgroup><col style="width:29.42%;"><col style="width:70.58%;"></colgroup><thead><tr><th>Note Type</th><th>Description</th></tr></thead><tbody><tr><td><a class="reference-link" href="Note%20Types/Text.md">Text</a></td><td>The default note type, which allows for rich text formatting, images, admonitions and right-to-left support.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Code.md">Code</a></td><td>Uses a mono-space font and can be used to store larger chunks of code or plain text than a text note, and has better syntax highlighting.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Saved%20Search.md">Saved Search</a></td><td>Stores the information about a search (the search text, criteria, etc.) for later use. Can be used for quick filtering of a large amount of notes, for example. The search can easily be triggered.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Relation%20Map.md">Relation Map</a></td><td>Allows easy creation of notes and relations between them. Can be used for mainly relational data such as a family tree.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Note%20Map.md">Note Map</a></td><td>Displays the relationships between the notes, whether via relations or their hierarchical structure.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Render%20Note.md">Render Note</a></td><td>Used in&nbsp;<a class="reference-link" href="Scripting.md">Scripting</a>, it displays the HTML content of another note. This allows displaying any kind of content, provided there is a script behind it to generate it.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Book.md">Book</a></td><td><p>Displays the children of the note either as a grid, a list, or for a more specialized case: a calendar.</p><p>Generally useful for easy reading of short notes.</p></td></tr><tr><td><a class="reference-link" href="Note%20Types/Mermaid%20Diagrams.md">Mermaid Diagrams</a></td><td>Displays diagrams such as bar charts, flow charts, state diagrams, etc. Requires a bit of technical knowledge since the diagrams are written in a specialized format.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Canvas.md">Canvas</a></td><td>Allows easy drawing of sketches, diagrams, handwritten content. Uses the same technology behind <a href="https://excalidraw.com">excalidraw.com</a>.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Web%20View.md">Web View</a></td><td>Displays the content of an external web page, similar to a browser.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Mind%20Map.md">Mind Map</a></td><td>Easy for brainstorming ideas, by placing them in a hierarchical layout.</td></tr><tr><td><a class="reference-link" href="Note%20Types/Geo%20Map.md">Geo Map</a></td><td>Displays the children of the note as a geographical map, one use-case would be to plan vacations. It even has basic support for tracks. Notes can also be created from it.</td></tr><tr><td><a class="reference-link" href="Note%20Types/File.md">File</a></td><td>Represents an uploaded file such as PDFs, images, video or audio files.</td></tr></tbody></table></figure>

2
docs/User Guide/User Guide/Note Types/Code.md
Unescape Escape View File

@ -5,7 +5,7 @@ This can be useful for a few things:
* computer programmers can store code snippets as notes with syntax highlighting
* JavaScript code notes can be executed inside Trilium for some extra functionality
* we call such JavaScript code notes "scripts" - see [Scripts](Code/Scripting.md)
* we call such JavaScript code notes "scripts" - see <a class="reference-link" href="../Scripting.md">Scripting</a>
* JSON, XML etc. can be used as storage for structured data (typically used in conjunction with scripting)
For shorter snippets of code that can be embedded in [Text](Text.md) notes, see [Code blocks](Text/Developer-specific%20formatting/Code%20blocks.md).

2
docs/User Guide/User Guide/Note Types/Code/Events.md
Unescape Escape View File

@ -1,5 +1,5 @@
# Events
[Script](Scripting.md) notes can be triggered by events. Note that these are backend events and thus relation need to point to the "JS backend" code note.
[Script](../../Scripting.md) notes can be triggered by events. Note that these are backend events and thus relation need to point to the "JS backend" code note.
## Global events

47
docs/User Guide/User Guide/Note Types/Code/Scripting/New Task launcher button.md
Unescape Escape View File

@ -1,47 +0,0 @@
# "New Task" launcher button
In this example we are going to extend the functionality of <a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a> showcase (which comes by default with Trilium) by adding a button in the <a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>  (![](New%20Task%20launcher%20button_i.png)) to create a new task automatically and open it.
## Creating the note
1. First, create a new <a class="reference-link" href="../../Code.md">Code</a> note type with the _JS frontend_ language.
2. Define the `#run=frontendStartup` label in <a class="reference-link" href="../../../Advanced%20Usage/Attributes.md">Attributes</a>.
## Content of the script
Copy-paste the following script:
```javascript
api.addButtonToToolbar({
title: "New task",
icon: "task",
shortcut: "alt+n",
action: async () => {
const taskNoteId = await api.runOnBackend(() => {
const todoRootNote = api.getNoteWithLabel("taskTodoRoot");
const resp = api.createTextNote(todoRootNote.noteId, "New task", "")
return resp.note.noteId;
});
await api.waitUntilSynced();
await api.activateNewNote(taskNoteId);
}
});
```
## Testing the functionality
Since we set the script to be run on start-up, all we need to do is to [refresh the application](../../../Troubleshooting/Refreshing%20the%20application.md).
## Understanding how the script works
<table class="ck-table-resized"><colgroup><col><col></colgroup><tbody><tr><td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
title: "New task",
icon: "task",
shortcut: "alt+n",
action: async () =&gt; {
// [...]
}
});</code></pre></td><td><p>This uses the <a href="../../../Developer%20Guides/Frontend%20Basics.md">Front-end API</a> to create a icon in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, by specifying:</p><ul><li>A title</li><li>A corresponding boxicons icon (without the <code>bx-</code> prefix).</li><li>Optionally, a keyboard shortcut to assign to it.</li><li>The action, which will be executed when the button is pressed.</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const taskNoteId = await api.runOnBackend(() =&gt; {
// Shown below.
return resp.note.noteId;
});</code></pre></td><td><ul><li>This portion of code is actually executed on the server (backend) and not on the client (i.e. browser).<ul><li>The reason is that the creating notes is the responsibility of the server.</li></ul></li><li>Here we can also see that it is possible to return results from the server execution and read them in the client (<code>taskNoteId</code>).</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const todoRootNote = api.getNoteWithLabel("taskTodoRoot");</code></pre></td><td><ul><li>Here we identify a note with the <a href="../../../Advanced%20Usage/Attributes.md">label</a> <code>#taskTodoRoot</code>. This is how the&nbsp;<a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a>&nbsp;showcase knows where to place all the different tasks.</li><li>Normally this might return a <code>null</code> value if no such note could be identified, but error handling is outside the scope of this example.&nbsp;</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const resp = api.createTextNote(todoRootNote.noteId, "New task", "")</code></pre></td><td><ul><li>We create a new child note within the to-do root note (first argument) with the title “New task" (second argument) and no content by default (third argument).</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">await api.waitUntilSynced();</code></pre></td><td><ul><li>Back on the client, since we created a new note on the server, we now need to wait for the change to be reflected in the client.</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">await api.activateNewNote(taskNoteId);</code></pre></td><td><ul><li>Since we know the <a href="../../../Advanced%20Usage/Note%20ID.md">ID</a> of the newly created note, all we have to do now is to show this note to the user.</li></ul></td></tr></tbody></table>

39
docs/User Guide/User Guide/Note Types/Render Note.md
Unescape Escape View File

@ -0,0 +1,39 @@
# Render Note
<figure class="image"><img style="aspect-ratio:601/216;" src="Render Note_image.png" width="601" height="216"></figure>
Render Note is used in <a class="reference-link" href="../Scripting.md">Scripting</a>. It works by displaying the HTML of a <a class="reference-link" href="Code.md">Code</a> note, via an attribute.
## Creating a render note
1. Create a <a class="reference-link" href="Code.md">Code</a> note with the HTML language, with what needs to be displayed (for example `<p>Hello world.</p>`).
2. Create a <a class="reference-link" href="Render%20Note.md">Render Note</a>.
3. Assign the `renderNote` [relation](../Advanced%20Usage/Attributes.md) to point at the previously created code note.
## Dynamic content
A static HTML is generally not enough for <a class="reference-link" href="../Scripting.md">Scripting</a>. The next step is to automatically change parts of the note using JavaScript.
For a simple example, we are going to create a render note that displays the current date in a field.
To do so, first create an HTML code note with the following content:
```
<h1>Current date & time</h1>
The current date & time is <span class="date"></span>
```
Now we need to add the script. Create another <a class="reference-link" href="Code.md">Code</a>, but this time of JavaScript (frontend) language. Make sure the newly created note is a direct child of the HTML note created previously; with the following content:
```
const $dateEl = api.$container.find(".date");
$dateEl.text(new Date());
```
Now create a render note at any place and set its `~renderNote` relation to point to the HTML note. When the render note is accessed it will display:
> **Current date & time**
> The current date & time is Sun Apr 06 2025 15:26:29 GMT+0300 (Eastern European Summer Time)
## Examples
* <a class="reference-link" href="../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.md">Weight Tracker</a> which is present in the <a class="reference-link" href="../Advanced%20Usage/Database/Demo%20Notes.md">Demo Notes</a>.

BIN
docs/User Guide/User Guide/Note Types/Render Note_image.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

14
docs/User Guide/User Guide/Note Types/Code/Scripting.md → docs/User Guide/User Guide/Scripting.md
Unescape Escape View File

@ -1,5 +1,5 @@
# Scripting
Trilium supports creating <a class="reference-link" href="../Code.md">Code</a> notes, i.e. notes which allow you to store some programming code and highlight it. Special case is JavaScript code notes which can also be executed inside Trilium which can in conjunction with <a class="reference-link" href="Script%20API.md">Script API</a> provide extra functionality.
Trilium supports creating <a class="reference-link" href="Note%20Types/Code.md">Code</a> notes, i.e. notes which allow you to store some programming code and highlight it. Special case is JavaScript code notes which can also be executed inside Trilium which can in conjunction with <a class="reference-link" href="Note%20Types/Code/Script%20API.md">Script API</a> provide extra functionality.
## Scripting
@ -12,7 +12,7 @@ So we have frontend and backend, each with their own set of responsibilities, bu
## Use cases
* <a class="reference-link" href="Scripting/New%20Task%20launcher%20button.md">"New Task" launcher button</a>
* <a class="reference-link" href="Scripting/Examples/New%20Task%20launcher%20button.md">"New Task" launcher button</a>
## Action handler
@ -24,18 +24,18 @@ So we have a script which will add the button to the toolbar. But how can we exe
We need to execute it every time Trilium starts up, but we probably don't want to have to manually click on play button on every start up.
The solution is marked by red circle at the bottom - this note has [label](../../Advanced%20Usage/Attributes.md) `#run=frontendStartup` - this is one of the "system" labels which Trilium understands. As you might guess, this will cause all such labeled script notes to be executed once Trilium frontend starts up.
The solution is marked by red circle at the bottom - this note has [label](Advanced%20Usage/Attributes.md) `#run=frontendStartup` - this is one of the "system" labels which Trilium understands. As you might guess, this will cause all such labeled script notes to be executed once Trilium frontend starts up.
(`#run=frontendStartup` does not work for [Mobile frontend](../../Installation%20%26%20Setup/Mobile%20Frontend.md) - if you want to have scripts running there, give the script `#run=mobileStartup` label)
(`#run=frontendStartup` does not work for [Mobile frontend](Installation%20%26%20Setup/Mobile%20Frontend.md) - if you want to have scripts running there, give the script `#run=mobileStartup` label)
## More showcases
You can see more scripting with explanation in <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases.md">Advanced Showcases</a>.
You can see more scripting with explanation in <a class="reference-link" href="Advanced%20Usage/Advanced%20Showcases.md">Advanced Showcases</a>.
## Events
See <a class="reference-link" href="Events.md">Events</a>.
See <a class="reference-link" href="Note%20Types/Code/Events.md">Events</a>.
## Script API
See <a class="reference-link" href="Script%20API.md">Script API</a>.
See <a class="reference-link" href="Note%20Types/Code/Script%20API.md">Script API</a>.

0
docs/User Guide/User Guide/Developer Guides/Examples/Downloading responses from Goo.md → docs/User Guide/User Guide/Scripting/Examples/Downloading responses from Goo.md
Unescape Escape View File

47
docs/User Guide/User Guide/Scripting/Examples/New Task launcher button.md
Unescape Escape View File

@ -0,0 +1,47 @@
# "New Task" launcher button
In this example we are going to extend the functionality of <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a> showcase (which comes by default with Trilium) by adding a button in the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>  (![](New%20Task%20launcher%20button_i.png)) to create a new task automatically and open it.
## Creating the note
1. First, create a new <a class="reference-link" href="../../Note%20Types/Code.md">Code</a> note type with the _JS frontend_ language.
2. Define the `#run=frontendStartup` label in <a class="reference-link" href="../../Advanced%20Usage/Attributes.md">Attributes</a>.
## Content of the script
Copy-paste the following script:
```javascript
api.addButtonToToolbar({
title: "New task",
icon: "task",
shortcut: "alt+n",
action: async () => {
const taskNoteId = await api.runOnBackend(() => {
const todoRootNote = api.getNoteWithLabel("taskTodoRoot");
const resp = api.createTextNote(todoRootNote.noteId, "New task", "")
return resp.note.noteId;
});
await api.waitUntilSynced();
await api.activateNewNote(taskNoteId);
}
});
```
## Testing the functionality
Since we set the script to be run on start-up, all we need to do is to [refresh the application](../../Troubleshooting/Refreshing%20the%20application.md).
## Understanding how the script works
<table class="ck-table-resized"><colgroup><col><col></colgroup><tbody><tr><td><pre><code class="language-application-javascript-env-frontend">api.addButtonToToolbar({
title: "New task",
icon: "task",
shortcut: "alt+n",
action: async () =&gt; {
// [...]
}
});</code></pre></td><td><p>This uses the <a href="../Frontend%20Basics.md">Front-end API</a> to create a icon in the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>, by specifying:</p><ul><li>A title</li><li>A corresponding boxicons icon (without the <code>bx-</code> prefix).</li><li>Optionally, a keyboard shortcut to assign to it.</li><li>The action, which will be executed when the button is pressed.</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const taskNoteId = await api.runOnBackend(() =&gt; {
// Shown below.
return resp.note.noteId;
});</code></pre></td><td><ul><li>This portion of code is actually executed on the server (backend) and not on the client (i.e. browser).<ul><li>The reason is that the creating notes is the responsibility of the server.</li></ul></li><li>Here we can also see that it is possible to return results from the server execution and read them in the client (<code>taskNoteId</code>).</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const todoRootNote = api.getNoteWithLabel("taskTodoRoot");</code></pre></td><td><ul><li>Here we identify a note with the <a href="../../Advanced%20Usage/Attributes.md">label</a> <code>#taskTodoRoot</code>. This is how the&nbsp;<a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a>&nbsp;showcase knows where to place all the different tasks.</li><li>Normally this might return a <code>null</code> value if no such note could be identified, but error handling is outside the scope of this example.&nbsp;</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">const resp = api.createTextNote(todoRootNote.noteId, "New task", "")</code></pre></td><td><ul><li>We create a new child note within the to-do root note (first argument) with the title “New task" (second argument) and no content by default (third argument).</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">await api.waitUntilSynced();</code></pre></td><td><ul><li>Back on the client, since we created a new note on the server, we now need to wait for the change to be reflected in the client.</li></ul></td></tr><tr><td><pre><code class="language-application-javascript-env-frontend">await api.activateNewNote(taskNoteId);</code></pre></td><td><ul><li>Since we know the <a href="../../Advanced%20Usage/Note%20ID.md">ID</a> of the newly created note, all we have to do now is to show this note to the user.</li></ul></td></tr></tbody></table>

0
docs/User Guide/User Guide/Note Types/Code/Scripting/New Task launcher button_i.png → docs/User Guide/User Guide/Scripting/Examples/New Task launcher button_i.png
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 491 B

After

Width:  |  Height:  |  Size: 491 B

0
docs/User Guide/User Guide/Developer Guides/Examples/Using promoted attributes .png → docs/User Guide/User Guide/Scripting/Examples/Using promoted attributes .png
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
docs/User Guide/User Guide/Developer Guides/Examples/Using promoted attributes to c.md → docs/User Guide/User Guide/Scripting/Examples/Using promoted attributes to c.md
Unescape Escape View File

0
docs/User Guide/User Guide/Developer Guides/Frontend Basics.md → docs/User Guide/User Guide/Scripting/Frontend Basics.md
Unescape Escape View File

0
docs/User Guide/User Guide/Developer Guides/Widget Basics.md → docs/User Guide/User Guide/Scripting/Widget Basics.md
Unescape Escape View File

2244
src/public/app/doc_notes/en/User Guide/!!!meta.json generated
View File

File diff suppressed because it is too large Load Diff

2
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases.html generated
Unescape Escape View File

@ -13,7 +13,7 @@
<h1 data-trilium-h1>Advanced Showcases</h1>
<div class="ck-content">
<p>Trilium offers advanced functionality through <a href="../Note%20Types/Code/Scripting.html">Scripts</a> and
<p>Trilium offers advanced functionality through <a href="../Scripting.html">Scripts</a> and
<a
href="Attributes/Promoted%20Attributes.html">Promoted Attributes</a>. To illustrate these features, we've prepared
several showcases available in the <a href="Database.html">demo notes</a>:</p>

4
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases/Task Manager.html generated
Unescape Escape View File

@ -15,7 +15,7 @@
<div class="ck-content">
<p>Task Manager is a <a href="../Attributes/Promoted%20Attributes.html">promoted attributes</a> and
<a
href="../../Note%20Types/Code/Scripting.html">scripts</a>showcase present in the <a href="../Database.html">demo notes</a>.</p>
href="../../Scripting.html">scripts</a>showcase present in the <a href="../Database.html">demo notes</a>.</p>
<h2>Demo</h2>
<p>
<img src="../../Attachments/task-manager.png">
@ -37,7 +37,7 @@
<p>Task template defines several <a href="../Attributes/Promoted%20Attributes.html">promoted attributes</a> -
todoDate, doneDate, tags, location. Importantly it also defines <code>~runOnAttributeChange</code> relation
- <a href="../../Note%20Types/Code/Events.html">event</a> handler which is
run on attribute change. This <a href="../../Note%20Types/Code/Scripting.html">script</a> handles
run on attribute change. This <a href="../../Scripting.html">script</a> handles
when e.g. we fill out the doneDate attribute - meaning the task is done
and should be moved to "Done" note and removed from TODO, locations and
tags.</p>

4
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Advanced Showcases/Weight Tracker.html generated
Unescape Escape View File

@ -24,8 +24,8 @@
<h2>Implementation</h2>
<p>The <code>Weight Tracker</code> note in the screenshot above is of the type <code>Render Note</code>.
That type of note doesn't have any useful content itself. Instead it is
a placeholder where a <a href="../../Note%20Types/Code/Scripting.html">script</a> can
render its output.</p>
a placeholder where a <a href="../../Scripting.html">script</a> can render
its output.</p>
<p>Scripts for <code>Render Notes</code> are defined in a <a href="../Attributes.html">relation</a> called <code>~renderNote</code>.
In this example, it's the <code>Weight Tracker</code>'s child <code>Implementation</code>.
The Implementation consists of two <a href="../../Note%20Types/Code.html">code notes</a> that

2
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Custom Request Handler.html generated
Unescape Escape View File

@ -13,7 +13,7 @@
<h1 data-trilium-h1>Custom Request Handler</h1>
<div class="ck-content">
<p>Trilium provides a mechanism for <a href="../Note%20Types/Code/Scripting.html">scripts</a> to
<p>Trilium provides a mechanism for <a href="../Scripting.html">scripts</a> to
open a public REST endpoint. This opens a way for various integrations
with other services - a simple example would be creating new note from
Slack by issuing a slash command (e.g. <code>/trilium buy milk</code>).</p>

33
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database.html generated
Unescape Escape View File

@ -18,36 +18,9 @@
The database file is named <code>document.db</code> and is stored in the
application's default&nbsp;<a href="../Installation%20%26%20Setup/Data%20directory.html">Data directory</a>.</p>
<h2>Demo Notes</h2>
<p>When you run Trilium for the first time, it will generate a new database
containing demo notes. These notes showcase its many features, such as:</p>
<ul>
<li><a href="../Note%20Types/Relation%20Map.html">Relation Map</a>
</li>
<li><a href="Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
</li>
<li><a href="Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>
</li>
<li><a href="Advanced%20Showcases/Task%20Manager.html">Task Manager</a>
</li>
<li><a href="../Basic%20Concepts%20and%20Features/Themes.html">Custom CSS Themes</a>
</li>
</ul>
<h3>Restoring Demo Notes</h3>
<p>There are some cases in which you may want to restore the original demo
notes. For example, if you experimented with some of the more advanced
features and want to see the original reference, or if you simply want
to explore the latest version of the demo notes, which might showcase new
features.</p>
<p>You can easily restore the demo notes by using Trilium's built-in import
feature by importing them:</p>
<ul>
<li>Download <a href="https://github.com/TriliumNext/Notes/raw/develop/db/demo.zip">this .zip archive</a> with
the latest version of the demo notes</li>
<li>Right click on any note in your tree under which you would like the demo
notes to be imported</li>
<li>Click "Import into note"</li>
<li>Select the .zip archive to import it</li>
</ul>
<p>When first starting Trilium, it will provide a set of notes to showcase
various features of the application.</p>
<p>For more information see&nbsp;<a class="reference-link" href="Database/Demo%20Notes.html">Demo Notes</a>.</p>
<h2>Manually Modifying the Database</h2>
<p>Trilium provides a lot of flexibility, and with it, opportunities for
advanced users to tweak it. If you need to explore or modify the database

50
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Demo Notes.html generated
Unescape Escape View File

@ -0,0 +1,50 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Demo Notes</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Demo Notes</h1>
<div class="ck-content">
<p>When you run Trilium for the first time, it will generate a new database
containing demo notes. These notes showcase its many features, such as:</p>
<ul>
<li><a class="reference-link" href="../../Note%20Types/Relation%20Map.html">Relation Map</a>
</li>
<li><a class="reference-link" href="../Advanced%20Showcases/Day%20Notes.html">Day Notes</a>
</li>
<li><a class="reference-link" href="../Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>
</li>
<li><a class="reference-link" href="../Advanced%20Showcases/Task%20Manager.html">Task Manager</a>
</li>
<li><a class="reference-link" href="../../Basic%20Concepts%20and%20Features/Themes.html">Themes</a>
</li>
</ul>
<h3>Restoring Demo Notes</h3>
<p>There are some cases in which you may want to restore the original demo
notes. For example, if you experimented with some of the more advanced
features and want to see the original reference, or if you simply want
to explore the latest version of the demo notes, which might showcase new
features.</p>
<p>You can easily restore the demo notes by using Trilium's built-in import
feature by importing them:</p>
<ul>
<li>Download <a href="https://github.com/TriliumNext/Notes/raw/develop/db/demo.zip">this .zip archive</a> with
the latest version of the demo notes</li>
<li>Right click on any note in your tree under which you would like the demo
notes to be imported</li>
<li>Click "Import into note"</li>
<li>Select the .zip archive to import it</li>
</ul>
</div>
</div>
</body>
</html>

2
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Manually altering the database.html generated
Unescape Escape View File

@ -20,7 +20,7 @@
of your <code>document.db</code> file.</p>
<h2>Modifying it internally using the SQL Console</h2>
<p>The SQL Console is Trilium's built-in database editor.</p>
<p>See&nbsp;<a href="Manually%20altering%20the%20database/SQL%20Console.html">SQL Console</a>.</p>
<p>See&nbsp;<a class="reference-link" href="Manually%20altering%20the%20database/SQL%20Console.html">SQL Console</a>.</p>
<h2>Externally modifying the database</h2>
<p>Sometimes the SQL Console cannot be used (for example if the application
cannot start).</p>

0
src/public/app/doc_notes/en/User Guide/User Guide/Developer Guides/REST API/ETAPI/API Reference.dat → src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/ETAPI (REST API)/API Reference.dat generated
Unescape Escape View File

0
src/public/app/doc_notes/en/User Guide/User Guide/Developer Guides/REST API/Internal API/API Reference.dat → src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Internal API/API Reference.dat generated
Unescape Escape View File

2
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes.html generated
Unescape Escape View File

@ -24,7 +24,7 @@
<p>There are also more complex note types such as&nbsp;<a class="reference-link"
href="../Note%20Types/Saved%20Search.html">Saved Search</a>,&nbsp;<a class="reference-link"
href="../Note%20Types/Render%20Note.html">Render Note</a>&nbsp;that usually
go hand-in-hand with&nbsp;<a class="reference-link" href="../Note%20Types/Code/Scripting.html">Scripting</a>.</p>
go hand-in-hand with&nbsp;<a class="reference-link" href="../Scripting.html">Scripting</a>.</p>
<p>In Trilium there's no specific "folder" note type. Any note can have children
and thus be a folder.</p>
<h3>Root note</h3>

2
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Attachments.html generated
Unescape Escape View File

@ -16,7 +16,7 @@
<p>A <a href="../Notes.html">note</a> in Trilium can <em>own</em> one or more
attachments, which can be either images or files. These attachments can
be displayed or linked within the note that owns them.</p>
<p>This can be especially useful to include dependencies for your <a href="../../Note%20Types/Code/Scripting.html">scripts</a>.
<p>This can be especially useful to include dependencies for your <a href="../../Scripting.html">scripts</a>.
The&nbsp;<a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>&nbsp;shows
how to use <a href="https://chartjs.org/">chartjs</a> which is attached to
the script note.</p>

4
src/public/app/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Launch Bar.html generated
Unescape Escape View File

@ -84,7 +84,7 @@
<p><strong>Script Launcher</strong>
<br>An advanced launcher which will run a script upon pressing. See&nbsp;
<a
href="../../Note%20Types/Code/Scripting.html">Scripts</a>&nbsp;for more information.</p>
href="../../Scripting.html">Scripts</a>&nbsp;for more information.</p>
<ol>
<li>Set <code>script</code> to point to the desired script to run.</li>
<li>Optionally, set a <code>keyboardShortcut</code> to trigger the launcher.</li>
@ -95,7 +95,7 @@
</p>
<p>Allows defining a custom widget to be rendered inside the launcher. See&nbsp;
<a
href="../../Developer%20Guides/Widget%20Basics.html">Widget Basics</a>&nbsp;for more information.</p>
href="../../Scripting/Widget%20Basics.html">Widget Basics</a>&nbsp;for more information.</p>
</li>
<li>
<p><strong>Spacers</strong>

2
src/public/app/doc_notes/en/User Guide/User Guide/FAQ.html generated
Unescape Escape View File

@ -36,7 +36,7 @@
<li>the assumption that only single person has access to the app simplifies
many things, or just outright makes them possible. In multi-user app, our
<a
href="Note%20Types/Code/Scripting.html">scripting</a>support would be a XSS security hole, while with the single
href="Scripting.html">scripting</a>support would be a XSS security hole, while with the single
user assumption it's an endless customizable tool.</li>
</ul>
<h2>How to open multiple documents in one Trilium instance</h2>

2
src/public/app/doc_notes/en/User Guide/User Guide/Installation & Setup/Mobile Frontend.html generated
Unescape Escape View File

@ -47,7 +47,7 @@
If this is not appropriate, you can use <code>?mobile</code> or <code>?desktop</code> query
param on <strong>login</strong> page (Note: you might need to log out).</p>
<h2>Scripting</h2>
<p>You can alter the behavior with <a href="../Note%20Types/Code/Scripting.html">scripts</a> just
<p>You can alter the behavior with <a href="../Scripting.html">scripts</a> just
like for normal frontend. For script notes to be executed, they need to
have labeled <code>#run=mobileStartup</code>.</p>
</div>

2
src/public/app/doc_notes/en/User Guide/User Guide/Note Types.html generated
Unescape Escape View File

@ -94,7 +94,7 @@
<tr>
<td><a class="reference-link" href="Note%20Types/Render%20Note.html">Render Note</a>
</td>
<td>Used in&nbsp;<a class="reference-link" href="Note%20Types/Code/Scripting.html">Scripting</a>,
<td>Used in&nbsp;<a class="reference-link" href="Scripting.html">Scripting</a>,
it displays the HTML content of another note. This allows displaying any
kind of content, provided there is a script behind it to generate it.</td>
</tr>

3
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code.html generated
Unescape Escape View File

@ -21,7 +21,8 @@
<li>computer programmers can store code snippets as notes with syntax highlighting</li>
<li>JavaScript code notes can be executed inside Trilium for some extra functionality
<ul>
<li>we call such JavaScript code notes "scripts" - see <a href="Code/Scripting.html">Scripts</a>
<li>we call such JavaScript code notes "scripts" - see&nbsp;<a class="reference-link"
href="../Scripting.html">Scripting</a>
</li>
</ul>
</li>

6
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code/Events.html generated
Unescape Escape View File

@ -13,9 +13,9 @@
<h1 data-trilium-h1>Events</h1>
<div class="ck-content">
<p><a href="Scripting.html">Script</a> notes can be triggered by events. Note
that these are backend events and thus relation need to point to the "JS
backend" code note.</p>
<p><a href="../../Scripting.html">Script</a> notes can be triggered by events.
Note that these are backend events and thus relation need to point to the
"JS backend" code note.</p>
<h2>Global events</h2>
<p>Global events are attached to the script note via label. Simply create
e.g. "run" label with some of these values and script note will be executed

43
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Render Note.html generated
Unescape Escape View File

@ -12,7 +12,48 @@
<div class="content">
<h1 data-trilium-h1>Render Note</h1>
<div class="ck-content"></div>
<div class="ck-content">
<figure class="image">
<img style="aspect-ratio:601/216;" src="Render Note_image.png" width="601"
height="216">
</figure>
<p>Render Note is used in&nbsp;<a class="reference-link" href="../Scripting.html">Scripting</a>.
It works by displaying the HTML of a&nbsp;<a class="reference-link" href="Code.html">Code</a>&nbsp;note,
via an attribute.</p>
<h2>Creating a render note</h2>
<ol>
<li>Create a&nbsp;<a class="reference-link" href="Code.html">Code</a>&nbsp;note
with the HTML language, with what needs to be displayed (for example <code>&lt;p&gt;Hello world.&lt;/p&gt;</code>).</li>
<li>Create a&nbsp;<a class="reference-link" href="Render%20Note.html">Render Note</a>.</li>
<li>Assign the <code>renderNote</code> <a href="../Advanced%20Usage/Attributes.html">relation</a> to
point at the previously created code note.</li>
</ol>
<h2>Dynamic content</h2>
<p>A static HTML is generally not enough for&nbsp;<a class="reference-link"
href="../Scripting.html">Scripting</a>. The next step is to automatically
change parts of the note using JavaScript.</p>
<p>For a simple example, we are going to create a render note that displays
the current date in a field.</p>
<p>To do so, first create an HTML code note with the following content:</p><pre><code class="language-text-x-trilium-auto">&lt;h1&gt;Current date &amp; time&lt;/h1&gt;
The current date &amp; time is &lt;span class="date"&gt;&lt;/span&gt;</code></pre>
<p>Now we need to add the script. Create another&nbsp;<a class="reference-link"
href="Code.html">Code</a>, but this time of JavaScript (frontend) language.
Make sure the newly created note is a direct child of the HTML note created
previously; with the following content:</p><pre><code class="language-text-x-trilium-auto">const $dateEl = api.$container.find(".date");
$dateEl.text(new Date());</code></pre>
<p>Now create a render note at any place and set its <code>~renderNote</code> relation
to point to the HTML note. When the render note is accessed it will display:</p>
<blockquote>
<p><strong>Current date &amp; time</strong>
<br>The current date &amp; time is Sun Apr 06 2025 15:26:29 GMT+0300 (Eastern
European Summer Time)</p>
</blockquote>
<h2>Examples</h2>
<ul>
<li><a class="reference-link" href="../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a>&nbsp;which
is present in the&nbsp;<a class="reference-link" href="../Advanced%20Usage/Database/Demo%20Notes.html">Demo Notes</a>.</li>
</ul>
</div>
</div>
</body>

BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Render Note_image.png generated
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

18
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code/Scripting.html → src/public/app/doc_notes/en/User Guide/User Guide/Scripting.html generated
Unescape Escape View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<link rel="stylesheet" href="../style.css">
<base target="_parent">
<title data-trilium-title>Scripting</title>
</head>
@ -13,10 +13,10 @@
<h1 data-trilium-h1>Scripting</h1>
<div class="ck-content">
<p>Trilium supports creating&nbsp;<a class="reference-link" href="../Code.html">Code</a>&nbsp;notes,
<p>Trilium supports creating&nbsp;<a class="reference-link" href="Note%20Types/Code.html">Code</a>&nbsp;notes,
i.e. notes which allow you to store some programming code and highlight
it. Special case is JavaScript code notes which can also be executed inside
Trilium which can in conjunction with&nbsp;<a class="reference-link" href="Script%20API.html">Script API</a>&nbsp;provide
Trilium which can in conjunction with&nbsp;<a class="reference-link" href="Note%20Types/Code/Script%20API.html">Script API</a>&nbsp;provide
extra functionality.</p>
<h2>Scripting</h2>
<p>To go further I must explain basic architecture of Trilium - in its essence
@ -33,7 +33,7 @@
we're onto something.</p>
<h2>Use cases</h2>
<ul>
<li><a class="reference-link" href="Scripting/New%20Task%20launcher%20button.html">"New Task" launcher button</a>
<li><a class="reference-link" href="Scripting/Examples/New%20Task%20launcher%20button.html">"New Task" launcher button</a>
</li>
</ul>
<h2>Action handler</h2>
@ -48,19 +48,19 @@
by Trilium runtime so when we restart Trilium, button won't be there.</p>
<p>We need to execute it every time Trilium starts up, but we probably don't
want to have to manually click on play button on every start up.</p>
<p>The solution is marked by red circle at the bottom - this note has <a href="../../Advanced%20Usage/Attributes.html">label</a> <code>#run=frontendStartup</code> -
<p>The solution is marked by red circle at the bottom - this note has <a href="Advanced%20Usage/Attributes.html">label</a> <code>#run=frontendStartup</code> -
this is one of the "system" labels which Trilium understands. As you might
guess, this will cause all such labeled script notes to be executed once
Trilium frontend starts up.</p>
<p>(<code>#run=frontendStartup</code> does not work for <a href="../../Installation%20%26%20Setup/Mobile%20Frontend.html">Mobile frontend</a> -
<p>(<code>#run=frontendStartup</code> does not work for <a href="Installation%20%26%20Setup/Mobile%20Frontend.html">Mobile frontend</a> -
if you want to have scripts running there, give the script <code>#run=mobileStartup</code> label)</p>
<h2>More showcases</h2>
<p>You can see more scripting with explanation in&nbsp;<a class="reference-link"
href="../../Advanced%20Usage/Advanced%20Showcases.html">Advanced Showcases</a>.</p>
href="Advanced%20Usage/Advanced%20Showcases.html">Advanced Showcases</a>.</p>
<h2>Events</h2>
<p>See&nbsp;<a class="reference-link" href="Events.html">Events</a>.</p>
<p>See&nbsp;<a class="reference-link" href="Note%20Types/Code/Events.html">Events</a>.</p>
<h2>Script API</h2>
<p>See&nbsp;<a class="reference-link" href="Script%20API.html">Script API</a>.</p>
<p>See&nbsp;<a class="reference-link" href="Note%20Types/Code/Script%20API.html">Script API</a>.</p>
</div>
</div>
</body>

0
src/public/app/doc_notes/en/User Guide/User Guide/Developer Guides/Examples/Downloading responses from Goo.html → src/public/app/doc_notes/en/User Guide/User Guide/Scripting/Examples/Downloading responses from Goo.html generated
Unescape Escape View File

22
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code/Scripting/New Task launcher button.html → src/public/app/doc_notes/en/User Guide/User Guide/Scripting/Examples/New Task launcher button.html generated
Unescape Escape View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../../style.css">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>&quot;New Task&quot; launcher button</title>
</head>
@ -14,17 +14,17 @@
<div class="ck-content">
<p>In this example we are going to extend the functionality of&nbsp;<a class="reference-link"
href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
(which comes by default with Trilium) by adding a button in the&nbsp;
<a
class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>&nbsp; (
class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>&nbsp; (
<img src="New Task launcher button_i.png">) to create a new task automatically and open it.</p>
<h2>Creating the note</h2>
<ol>
<li>First, create a new&nbsp;<a class="reference-link" href="../../Code.html">Code</a>&nbsp;note
<li>First, create a new&nbsp;<a class="reference-link" href="../../Note%20Types/Code.html">Code</a>&nbsp;note
type with the <em>JS frontend</em> language.</li>
<li>Define the <code>#run=frontendStartup</code> label in&nbsp;<a class="reference-link"
href="../../../Advanced%20Usage/Attributes.html">Attributes</a>.</li>
href="../../Advanced%20Usage/Attributes.html">Attributes</a>.</li>
</ol>
<h2>Content of the script</h2>
<p>Copy-paste the following script:</p><pre><code class="language-application-javascript-env-backend">api.addButtonToToolbar({
@ -45,7 +45,7 @@
<h2>Testing the functionality</h2>
<p>Since we set the script to be run on start-up, all we need to do is to
<a
href="../../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
href="../../Troubleshooting/Refreshing%20the%20application.html">refresh the application</a>.</p>
<h2>Understanding how the script works</h2>
<table class="ck-table-resized">
<colgroup>
@ -64,8 +64,8 @@
});</code></pre>
</td>
<td>
<p>This uses the <a href="../../../Developer%20Guides/Frontend%20Basics.html">Front-end API</a> to
create a icon in the&nbsp;<a class="reference-link" href="../../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
<p>This uses the <a href="../Frontend%20Basics.html">Front-end API</a> to create
a icon in the&nbsp;<a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a>,
by specifying:</p>
<ul>
<li>A title</li>
@ -99,8 +99,8 @@
</td>
<td>
<ul>
<li>Here we identify a note with the <a href="../../../Advanced%20Usage/Attributes.html">label</a> <code>#taskTodoRoot</code>.
This is how the&nbsp;<a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
<li>Here we identify a note with the <a href="../../Advanced%20Usage/Attributes.html">label</a> <code>#taskTodoRoot</code>.
This is how the&nbsp;<a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a>&nbsp;showcase
knows where to place all the different tasks.</li>
<li>Normally this might return a <code>null</code> value if no such note could
be identified, but error handling is outside the scope of this example.&nbsp;</li>
@ -133,7 +133,7 @@
</td>
<td>
<ul>
<li>Since we know the <a href="../../../Advanced%20Usage/Note%20ID.html">ID</a> of
<li>Since we know the <a href="../../Advanced%20Usage/Note%20ID.html">ID</a> of
the newly created note, all we have to do now is to show this note to the
user.</li>
</ul>

0
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Code/Scripting/New Task launcher button_i.png → src/public/app/doc_notes/en/User Guide/User Guide/Scripting/Examples/New Task launcher button_i.png generated
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 491 B

After

Width:  |  Height:  |  Size: 491 B

0
src/public/app/doc_notes/en/User Guide/User Guide/Developer Guides/Examples/Using promoted attributes .png → src/public/app/doc_notes/en/User Guide/User Guide/Scripting/Examples/Using promoted attributes .png generated
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
src/public/app/doc_notes/en/User Guide/User Guide/Developer Guides/Examples/Using promoted attributes to c.html → src/public/app/doc_notes/en/User Guide/User Guide/Scripting/Examples/Using promoted attributes to c.html generated
Unescape Escape View File

0
src/public/app/doc_notes/en/User Guide/User Guide/Developer Guides/Frontend Basics.html → src/public/app/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics.html generated
Unescape Escape View File

0
src/public/app/doc_notes/en/User Guide/User Guide/Developer Guides/Widget Basics.html → src/public/app/doc_notes/en/User Guide/User Guide/Scripting/Widget Basics.html generated
Unescape Escape View File

78
src/public/app/doc_notes/en/User Guide/navigation.html generated
Unescape Escape View File

@ -246,13 +246,6 @@
</li>
<li><a href="User%20Guide/Note%20Types/Code.html" target="detail">Code</a>
<ul>
<li><a href="User%20Guide/Note%20Types/Code/Scripting.html" target="detail">Scripting</a>
<ul>
<li><a href="User%20Guide/Note%20Types/Code/Scripting/New%20Task%20launcher%20button.html"
target="detail">&quot;New Task&quot; launcher button</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Note%20Types/Code/Script%20API.html" target="detail">Script API</a>
</li>
<li><a href="User%20Guide/Note%20Types/Code/Events.html" target="detail">Events</a>
@ -321,42 +314,6 @@
</li>
</ul>
</li>
<li>Developer Guides
<ul>
<li><a href="User%20Guide/Developer%20Guides/Frontend%20Basics.html" target="detail">Frontend Basics</a>
</li>
<li><a href="User%20Guide/Developer%20Guides/Widget%20Basics.html" target="detail">Widget Basics</a>
</li>
<li>Examples
<ul>
<li><a href="User%20Guide/Developer%20Guides/Examples/Downloading%20responses%20from%20Goo.html"
target="detail">Downloading responses from Google Forms</a>
</li>
<li><a href="User%20Guide/Developer%20Guides/Examples/Using%20promoted%20attributes%20to%20c.html"
target="detail">Using promoted attributes to configure scripts</a>
</li>
</ul>
</li>
<li>REST API
<ul>
<li>ETAPI
<ul>
<li><a href="User%20Guide/Developer%20Guides/REST%20API/ETAPI/API%20Reference.dat"
target="detail">API Reference</a>
</li>
</ul>
</li>
<li>Internal API
<ul>
<li><a href="User%20Guide/Developer%20Guides/REST%20API/Internal%20API/API%20Reference.dat"
target="detail">API Reference</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Advanced Usage
<ul>
<li><a href="User%20Guide/Advanced%20Usage/Attributes.html" target="detail">Attributes</a>
@ -401,6 +358,11 @@
target="detail">Custom Resource Providers</a>
</li>
<li><a href="User%20Guide/Advanced%20Usage/ETAPI%20(REST%20API).html" target="detail">ETAPI (REST API)</a>
<ul>
<li><a href="User%20Guide/Advanced%20Usage/ETAPI%20(REST%20API)/API%20Reference.dat"
target="detail">API Reference</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Advanced%20Usage/Default%20Note%20Title.html" target="detail">Default Note Title</a>
</li>
@ -414,6 +376,8 @@
</li>
</ul>
</li>
<li><a href="User%20Guide/Advanced%20Usage/Database/Demo%20Notes.html" target="detail">Demo Notes</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Advanced%20Usage/Configuration%20(config.ini%20or%20e.html"
@ -441,6 +405,34 @@
</li>
<li><a href="User%20Guide/Advanced%20Usage/Note%20ID.html" target="detail">Note ID</a>
</li>
<li>Internal API
<ul>
<li><a href="User%20Guide/Advanced%20Usage/Internal%20API/API%20Reference.dat"
target="detail">API Reference</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="User%20Guide/Scripting.html" target="detail">Scripting</a>
<ul>
<li><a href="User%20Guide/Scripting/Frontend%20Basics.html" target="detail">Frontend Basics</a>
</li>
<li><a href="User%20Guide/Scripting/Widget%20Basics.html" target="detail">Widget Basics</a>
</li>
<li>Examples
<ul>
<li><a href="User%20Guide/Scripting/Examples/New%20Task%20launcher%20button.html"
target="detail">&quot;New Task&quot; launcher button</a>
</li>
<li><a href="User%20Guide/Scripting/Examples/Downloading%20responses%20from%20Goo.html"
target="detail">Downloading responses from Google Forms</a>
</li>
<li><a href="User%20Guide/Scripting/Examples/Using%20promoted%20attributes%20to%20c.html"
target="detail">Using promoted attributes to configure scripts</a>
</li>
</ul>
</li>
</ul>
</li>
<li>Attachments