mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-27 18:12:29 +08:00
feat(docs): reorganize script notes & document render note
This commit is contained in:
Elian Doran
parent
b593559915
commit
6a94889646
File diff suppressed because it is too large
Load Diff
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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`.
|
||||
@ -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 <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 <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>
|
||||
@ -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).
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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> () 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 () => {
|
||||
// [...]
|
||||
}
|
||||
});</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 <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(() => {
|
||||
// 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 <a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a> 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. </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,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
Normal file
BIN
docs/User Guide/User Guide/Note Types/Render Note_image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@ -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,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> () 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 () => {
|
||||
// [...]
|
||||
}
|
||||
});</code></pre></td><td><p>This uses the <a href="../Frontend%20Basics.md">Front-end API</a> to create a icon in the <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(() => {
|
||||
// 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 <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.md">Task Manager</a> 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. </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>
|
||||
|
Before Width: | Height: | Size: 491 B After Width: | Height: | Size: 491 B |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
1102
src/public/app/doc_notes/en/User Guide/!!!meta.json
generated
1102
src/public/app/doc_notes/en/User Guide/!!!meta.json
generated
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -18,36 +18,9 @@
|
||||
The database file is named <code>document.db</code> and is stored in the
|
||||
application's default <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 <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
Normal file
50
src/public/app/doc_notes/en/User Guide/User Guide/Advanced Usage/Database/Demo Notes.html
generated
Normal 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>
|
||||
@ -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 <a href="Manually%20altering%20the%20database/SQL%20Console.html">SQL Console</a>.</p>
|
||||
<p>See <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>
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
<p>There are also more complex note types such as <a class="reference-link"
|
||||
href="../Note%20Types/Saved%20Search.html">Saved Search</a>, <a class="reference-link"
|
||||
href="../Note%20Types/Render%20Note.html">Render Note</a> that usually
|
||||
go hand-in-hand with <a class="reference-link" href="../Note%20Types/Code/Scripting.html">Scripting</a>.</p>
|
||||
go hand-in-hand with <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>
|
||||
|
||||
@ -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 <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Weight%20Tracker.html">Weight Tracker</a> shows
|
||||
how to use <a href="https://chartjs.org/">chartjs</a> which is attached to
|
||||
the script note.</p>
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
<p><strong>Script Launcher</strong>
|
||||
<br>An advanced launcher which will run a script upon pressing. See
|
||||
<a
|
||||
href="../../Note%20Types/Code/Scripting.html">Scripts</a> for more information.</p>
|
||||
href="../../Scripting.html">Scripts</a> 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
|
||||
<a
|
||||
href="../../Developer%20Guides/Widget%20Basics.html">Widget Basics</a> for more information.</p>
|
||||
href="../../Scripting/Widget%20Basics.html">Widget Basics</a> for more information.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><strong>Spacers</strong>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
<tr>
|
||||
<td><a class="reference-link" href="Note%20Types/Render%20Note.html">Render Note</a>
|
||||
</td>
|
||||
<td>Used in <a class="reference-link" href="Note%20Types/Code/Scripting.html">Scripting</a>,
|
||||
<td>Used in <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>
|
||||
|
||||
@ -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 <a class="reference-link"
|
||||
href="../Scripting.html">Scripting</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 <a class="reference-link" href="../Scripting.html">Scripting</a>.
|
||||
It works by displaying the HTML of a <a class="reference-link" href="Code.html">Code</a> note,
|
||||
via an attribute.</p>
|
||||
<h2>Creating a render note</h2>
|
||||
<ol>
|
||||
<li>Create a <a class="reference-link" href="Code.html">Code</a> note
|
||||
with the HTML language, with what needs to be displayed (for example <code><p>Hello world.</p></code>).</li>
|
||||
<li>Create a <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 <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"><h1>Current date & time</h1>
|
||||
The current date & time is <span class="date"></span></code></pre>
|
||||
<p>Now we need to add the script. Create another <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 & time</strong>
|
||||
<br>The current date & 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> which
|
||||
is present in the <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
Normal file
BIN
src/public/app/doc_notes/en/User Guide/User Guide/Note Types/Render Note_image.png
generated
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@ -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 <a class="reference-link" href="../Code.html">Code</a> notes,
|
||||
<p>Trilium supports creating <a class="reference-link" href="Note%20Types/Code.html">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.html">Script API</a> provide
|
||||
Trilium which can in conjunction with <a class="reference-link" href="Note%20Types/Code/Script%20API.html">Script API</a> 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 <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 <a class="reference-link" href="Events.html">Events</a>.</p>
|
||||
<p>See <a class="reference-link" href="Note%20Types/Code/Events.html">Events</a>.</p>
|
||||
<h2>Script API</h2>
|
||||
<p>See <a class="reference-link" href="Script%20API.html">Script API</a>.</p>
|
||||
<p>See <a class="reference-link" href="Note%20Types/Code/Script%20API.html">Script API</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -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>"New Task" launcher button</title>
|
||||
</head>
|
||||
@ -14,17 +14,17 @@
|
||||
|
||||
<div class="ck-content">
|
||||
<p>In this example we are going to extend the functionality of <a class="reference-link"
|
||||
href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a> showcase
|
||||
href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">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.html">Launch Bar</a> (
|
||||
class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.html">Launch Bar</a> (
|
||||
<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 <a class="reference-link" href="../../Code.html">Code</a> note
|
||||
<li>First, create a new <a class="reference-link" href="../../Note%20Types/Code.html">Code</a> note
|
||||
type with the <em>JS frontend</em> language.</li>
|
||||
<li>Define the <code>#run=frontendStartup</code> label in <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 <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 <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 <a class="reference-link" href="../../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a> showcase
|
||||
<li>Here we identify a note with the <a href="../../Advanced%20Usage/Attributes.html">label</a> <code>#taskTodoRoot</code>.
|
||||
This is how the <a class="reference-link" href="../../Advanced%20Usage/Advanced%20Showcases/Task%20Manager.html">Task Manager</a> 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. </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>
|
||||
|
Before Width: | Height: | Size: 491 B After Width: | Height: | Size: 491 B |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
@ -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">"New Task" 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">"New Task" 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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user