mirror of
https://github.com/zadam/trilium.git
synced 2025-11-07 05:46:10 +01:00
Merge branch 'main' into copilot/improve-user-documentation
This commit is contained in:
798
docs/User Guide/!!!meta.json
vendored
798
docs/User Guide/!!!meta.json
vendored
File diff suppressed because it is too large
Load Diff
@@ -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](../../Scripting/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.
|
||||
Task template defines several [promoted attributes](../Attributes/Promoted%20Attributes.md) - todoDate, doneDate, tags, location. Importantly it also defines `~runOnAttributeChange` relation - [event](../../Scripting/Backend%20scripts/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
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -43,7 +43,7 @@ These relations are supported and used internally by Trilium.
|
||||
|
||||
| Label | Description |
|
||||
| --- | --- |
|
||||
| `runOn*` | See <a class="reference-link" href="../../Scripting/Events.md">Events</a> |
|
||||
| `runOn*` | See <a class="reference-link" href="../../Scripting/Backend%20scripts/Events.md">Events</a> |
|
||||
| `template` | note's attributes will be inherited even without a parent-child relationship, note's content and subtree will be added to instance notes if empty. See documentation for details. |
|
||||
| `inherit` | note's attributes will be inherited even without a parent-child relationship. See <a class="reference-link" href="../Templates.md">Templates</a> for a similar concept. See <a class="reference-link" href="Attribute%20Inheritance.md">Attribute Inheritance</a> in the documentation. |
|
||||
| `renderNote` | notes of type <a class="reference-link" href="../../Note%20Types/Render%20Note.md">Render Note</a> will be rendered using a code note (HTML or script) and it is necessary to point using this relation to which note should be rendered |
|
||||
|
||||
34
docs/User Guide/User Guide/Advanced Usage/Nightly release.md
vendored
Normal file
34
docs/User Guide/User Guide/Advanced Usage/Nightly release.md
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
# Nightly release
|
||||
Nightly releases are versions built every day, containing the latest improvements and bugfixes, directly from the main development branch. These versions are generally useful in preparation for a release, to ensure that there are no significant bugs that need to be addressed first, or they can be used to confirm whether a particular bug is fixed or feature is well implemented.
|
||||
|
||||
## Regarding the stability
|
||||
|
||||
Despite being on a development branch, generally the main branch is pretty stable since PRs are tested before they are merged. If you notice any issues, feel free to report them either via a ticket or via the Matrix.
|
||||
|
||||
## Downloading the nightly release manually
|
||||
|
||||
Go to [github.com/TriliumNext/Trilium/releases/tag/nightly](https://github.com/TriliumNext/Trilium/releases/tag/nightly) and look for the artifacts starting with `TriliumNotes-main`. Choose the appropriate one for your platform (e.g. `windows-x64.zip`).
|
||||
|
||||
Depending on your use case, you can either test the portable version or even use the installer.
|
||||
|
||||
> [!NOTE]
|
||||
> If you choose the installable version (e.g. the .exe on Windows), it will replace your stable installation.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> By default, the nightly uses the same database as the production version. Generally you could easily downgrade if needed. However, if there are changes to the database or sync version, it will not be possible to downgrade without having to restore from a backup.
|
||||
|
||||
## Automatically download and install the latest nightly
|
||||
|
||||
This is pretty useful if you are a beta tester that wants to periodically update their version:
|
||||
|
||||
On Ubuntu:
|
||||
|
||||
```
|
||||
#!/usr/bin/env bash
|
||||
|
||||
name=TriliumNotes-linux-x64-nightly.deb
|
||||
rm -f $name*
|
||||
wget https://github.com/TriliumNext/Trilium/releases/download/nightly/$name
|
||||
sudo apt-get install ./$name
|
||||
rm $name
|
||||
```
|
||||
11
docs/User Guide/User Guide/Advanced Usage/Safe mode.md
vendored
Normal file
11
docs/User Guide/User Guide/Advanced Usage/Safe mode.md
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
# Safe mode
|
||||
Safe mode is triggered by setting the `TRILIUM_SAFE_MODE` environment variable to a truthy value, usually `1`.
|
||||
|
||||
In each artifact there is a `trilium-safe-mode.sh` (or `.bat`) script to enable it.
|
||||
|
||||
What it does:
|
||||
|
||||
* Disables `customWidget` launcher types in `app/widgets/containers/launcher.js`.
|
||||
* Disables the running of `mobileStartup` or `frontendStartup` scripts.
|
||||
* Displays the root note instead of the previously saved session.
|
||||
* Disables the running of `backendStartup`, `hourly`, `daily` scripts and checks for the hidden subtree.
|
||||
@@ -56,7 +56,7 @@ Right click either the _Available launchers_ or _Visible launchers_ sections and
|
||||
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](../../Scripting/Custom%20Widgets/Widget%20Basics.md) for more information.
|
||||
Allows defining a custom widget to be rendered inside the launcher. See [Widget Basics](../../Scripting/Frontend%20Basics/Custom%20Widgets/Widget%20Basics.md) for more information.
|
||||
4. **Spacers**
|
||||
Launchers that create some distance between other launchers for better visual distinction.
|
||||
|
||||
|
||||
76
docs/User Guide/User Guide/Installation & Setup/Desktop Installation/Nix flake.md
vendored
Normal file
76
docs/User Guide/User Guide/Installation & Setup/Desktop Installation/Nix flake.md
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
# Nix flake
|
||||
Since TriliumNext 0.94.1, the desktop and server applications can be built using [Nix](https://nixos.org/).
|
||||
|
||||
## System requirements
|
||||
|
||||
Installation of Nix on Mac or Linux ([download page](https://nixos.org/download/)). About 3-4 gigabytes of additional storage space, for build artifacts.
|
||||
|
||||
## Run directly
|
||||
|
||||
Using [nix run](https://nix.dev/manual/nix/stable/command-ref/new-cli/nix3-run.html), the desktop app can be started as: `nix run github:TriliumNext/Trilium/v0.95.0`
|
||||
|
||||
Running the server requires explicitly specifying the desired package: `nix run github:TriliumNext/Trilium/v0.95.0#server`
|
||||
|
||||
Instead of a version (`v0.95.0` above), you can also specify a commit hash (or a branch name). This makes it easy to test development builds.
|
||||
|
||||
## Install on NixOS
|
||||
|
||||
Add to your `flake.nix`:
|
||||
|
||||
```
|
||||
{
|
||||
inputs = {
|
||||
nixpkgs.url = # ...;
|
||||
trilium-notes = {
|
||||
url = "github:TriliumNext/Trilium/v0.95.0";
|
||||
inputs.nixpkgs.follows = "nixpkgs";
|
||||
};
|
||||
};
|
||||
|
||||
outputs =
|
||||
{
|
||||
self,
|
||||
# ...
|
||||
trilium-notes,
|
||||
...
|
||||
}:
|
||||
{
|
||||
nixosConfigurations = {
|
||||
"nixos" = nixpkgs.lib.nixosSystem {
|
||||
system = "x86_64-linux";
|
||||
modules = [
|
||||
./configuration.nix
|
||||
];
|
||||
specialArgs = {
|
||||
inherit
|
||||
trilium-notes
|
||||
;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Add to your `configuration.nix`:
|
||||
|
||||
```
|
||||
{
|
||||
# ...
|
||||
trilium-notes,
|
||||
...
|
||||
}:
|
||||
|
||||
{
|
||||
# ...
|
||||
|
||||
services.trilium-server.package = trilium-notes.packages.x86_64-linux.server;
|
||||
|
||||
environment.systemPackages = [
|
||||
trilium-notes.packages.x86_64-linux.desktop
|
||||
];
|
||||
}
|
||||
```
|
||||
|
||||
The flake aims to be compatible with the latest NixOS stable and unstable.
|
||||
2
docs/User Guide/User Guide/Installation & Setup/Server Installation/Nix flake.clone.md
vendored
Normal file
2
docs/User Guide/User Guide/Installation & Setup/Server Installation/Nix flake.clone.md
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
# Nix flake
|
||||
This is a clone of a note. Go to its [primary location](../Desktop%20Installation/Nix%20flake.md).
|
||||
4
docs/User Guide/User Guide/Scripting.md
vendored
4
docs/User Guide/User Guide/Scripting.md
vendored
@@ -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/Examples/New%20Task%20launcher%20button.md">"New Task" launcher button</a>
|
||||
* <a class="reference-link" href="Scripting/Frontend%20Basics/Examples/New%20Task%20launcher%20button.md">"New Task" launcher button</a>
|
||||
|
||||
## Action handler
|
||||
|
||||
@@ -34,7 +34,7 @@ You can see more scripting with explanation in <a class="reference-link" href="
|
||||
|
||||
## Events
|
||||
|
||||
See <a class="reference-link" href="Scripting/Events.md">Events</a>.
|
||||
See <a class="reference-link" href="Scripting/Backend%20scripts/Events.md">Events</a>.
|
||||
|
||||
## Script API
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
# 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
|
||||
|
||||
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 once the event occurs.
|
||||
|
||||
<table><thead><tr><th>Label</th><th>Description</th></tr></thead><tbody><tr><td><code>run</code></td><td><p>Defines on which events script should run. Possible values are:</p><ul><li><code>frontendStartup</code> - when Trilium frontend starts up (or is refreshed), but not on mobile.</li><li><code>mobileStartup</code> - when Trilium frontend starts up (or is refreshed), on mobile.</li><li><code>backendStartup</code> - when Trilium backend starts up</li><li><code>hourly</code> - run once an hour. You can use additional label <code>runAtHour</code> to specify at which hour, on the back-end.</li><li><code>daily</code> - run once a day, on the back-end</li></ul></td></tr><tr><td><code>runOnInstance</code></td><td>Specifies that the script should only run on a particular <a class="reference-link" href="../Advanced%20Usage/Configuration%20(config.ini%20or%20environment%20variables)/Trilium%20instance.md">Trilium instance</a>.</td></tr><tr><td><code>runAtHour</code></td><td>On which hour should this run. Should be used together with <code>#run=hourly</code>. Can be defined multiple times for more runs during the day.</td></tr></tbody></table>
|
||||
<table><thead><tr><th>Label</th><th>Description</th></tr></thead><tbody><tr><td><code>run</code></td><td><p>Defines on which events script should run. Possible values are:</p><ul><li><code>frontendStartup</code> - when Trilium frontend starts up (or is refreshed), but not on mobile.</li><li><code>mobileStartup</code> - when Trilium frontend starts up (or is refreshed), on mobile.</li><li><code>backendStartup</code> - when Trilium backend starts up</li><li><code>hourly</code> - run once an hour. You can use additional label <code>runAtHour</code> to specify at which hour, on the back-end.</li><li><code>daily</code> - run once a day, on the back-end</li></ul></td></tr><tr><td><code>runOnInstance</code></td><td>Specifies that the script should only run on a particular <a class="reference-link" href="../../Advanced%20Usage/Configuration%20(config.ini%20or%20environment%20variables)/Trilium%20instance.md">Trilium instance</a>.</td></tr><tr><td><code>runAtHour</code></td><td>On which hour should this run. Should be used together with <code>#run=hourly</code>. Can be defined multiple times for more runs during the day.</td></tr></tbody></table>
|
||||
|
||||
## Entity events
|
||||
|
||||
Other events are bound to some entity, these are defined as [relations](../Advanced%20Usage/Attributes.md) - meaning that script is triggered only if note has this script attached to it through relations (or it can inherit it).
|
||||
Other events are bound to some entity, these are defined as [relations](../../Advanced%20Usage/Attributes.md) - meaning that script is triggered only if note has this script attached to it through relations (or it can inherit it).
|
||||
|
||||
| Relation | Description |
|
||||
| --- | --- |
|
||||
11
docs/User Guide/User Guide/Scripting/Backend scripts/Server-side imports.md
vendored
Normal file
11
docs/User Guide/User Guide/Scripting/Backend scripts/Server-side imports.md
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
# Server-side imports
|
||||
Older versions of Trilium Notes allowed the use of Common.js module imports inside backend scripts, such as:
|
||||
|
||||
```
|
||||
const isBetween = require('dayjs/plugin/isBetween')
|
||||
api.dayjs.extend(isBetween)
|
||||
```
|
||||
|
||||
For newer versions, Node.js imports are **not officially supported anymore**, since we've added a bundler which makes it more difficult to reuse dependencies.
|
||||
|
||||
Theoretically it's still possible to use imports by manually setting up a `node_modules` in the server directory via `npm` or `pnpm`.
|
||||
@@ -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="../../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>
|
||||
@@ -54,4 +54,4 @@ Conversely to scripts, widgets do have some specific requirements in order to wo
|
||||
|
||||
### Tutorial
|
||||
|
||||
For more information on building widgets, take a look at [Widget Basics](Custom%20Widgets/Widget%20Basics.md).
|
||||
For more information on building widgets, take a look at [Widget Basics](Frontend%20Basics/Custom%20Widgets/Widget%20Basics.md).
|
||||
15
docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/CSS.md
vendored
Normal file
15
docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/CSS.md
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
# CSS
|
||||
In `doRender()`:
|
||||
|
||||
```
|
||||
this.cssBlock(`#my-widget {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 60px;
|
||||
z-index: 1;
|
||||
}`)
|
||||
```
|
||||
|
||||
* * *
|
||||
|
||||
Reference: [https://trilium.rocks/X7pxYpiu0lgU](https://trilium.rocks/X7pxYpiu0lgU)
|
||||
32
docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.md
vendored
Normal file
32
docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.md
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
# Right pane widget
|
||||
* `doRender` must not be overridden, instead `doRenderBody()` has to be overridden.
|
||||
* `parentWidget()` must be set to `“rightPane”`.
|
||||
* `widgetTitle()` getter can optionally be overriden, otherwise the widget will be displayed as “Untitled widget”.
|
||||
|
||||
```
|
||||
const template = `<div>Hi</div>`;
|
||||
|
||||
class ToDoListWidget extends api.RightPanelWidget {
|
||||
|
||||
get widgetTitle() {
|
||||
return "Title goes here";
|
||||
}
|
||||
|
||||
get parentWidget() { return "right-pane" }
|
||||
|
||||
doRenderBody() {
|
||||
this.$body.empty().append($(template));
|
||||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
this.toggleInt(false);
|
||||
this.triggerCommand("reEvaluateRightPaneVisibility");
|
||||
this.toggleInt(true);
|
||||
this.triggerCommand("reEvaluateRightPaneVisibility");
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = new ToDoListWidget();
|
||||
```
|
||||
|
||||
The implementation is in `src/public/app/widgets/right_panel_widget.js`.
|
||||
@@ -22,10 +22,10 @@ module.exports = new MyWidget();
|
||||
To implement this widget:
|
||||
|
||||
1. Create a new `JS Frontend` note in Trilium and paste in the code above.
|
||||
2. Assign the `#widget` [attribute](../../Advanced%20Usage/Attributes.md) to the [note](../../Basic%20Concepts%20and%20Features/Notes.md).
|
||||
2. Assign the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md) to the [note](../../../Basic%20Concepts%20and%20Features/Notes.md).
|
||||
3. Restart Trilium or reload the window.
|
||||
|
||||
To verify that the widget is working, open the developer tools (`Cmd` + `Shift` + `I`) and run `document.querySelector("#my-widget")`. If the element is found, the widget is functioning correctly. If `undefined` is returned, double-check that the [note](../../Basic%20Concepts%20and%20Features/Notes.md) has the `#widget` [attribute](../../Advanced%20Usage/Attributes.md).
|
||||
To verify that the widget is working, open the developer tools (`Cmd` + `Shift` + `I`) and run `document.querySelector("#my-widget")`. If the element is found, the widget is functioning correctly. If `undefined` is returned, double-check that the [note](../../../Basic%20Concepts%20and%20Features/Notes.md) has the `#widget` [attribute](../../../Advanced%20Usage/Attributes.md).
|
||||
|
||||
### Step 2: Adding an UI Element
|
||||
|
||||
@@ -85,7 +85,7 @@ After reloading Trilium, the button should now appear at the bottom left of the
|
||||
|
||||
### Step 4: Adding User Interaction
|
||||
|
||||
Let’s make the button interactive by showing a message when it’s clicked. We'll use the `api.showMessage` method from the [Script API](../Script%20API.md).
|
||||
Let’s make the button interactive by showing a message when it’s clicked. We'll use the `api.showMessage` method from the [Script API](../../Script%20API.md).
|
||||
|
||||
```
|
||||
class MyWidget extends api.BasicWidget {
|
||||
@@ -108,4 +108,11 @@ class MyWidget extends api.BasicWidget {
|
||||
module.exports = new MyWidget();
|
||||
```
|
||||
|
||||
Reload the application one last time. When you click the button, a "Hello World!" message should appear, confirming that your widget is fully functional.
|
||||
`parentWidget()` can be given the following values:
|
||||
|
||||
* `left-pane` - This renders the widget on the left side of the screen where the note tree lives.
|
||||
* `center-pane` - This renders the widget in the center of the layout in the same location that notes and splits appear.
|
||||
* `note-detail-pane` - This renders the widget _with_ the note in the center pane. This means it can appear multiple times with splits.
|
||||
* `right-pane` - This renders the widget to the right of any opened notes.
|
||||
|
||||
[Reload](../../../Troubleshooting/Refreshing%20the%20application.md) the application one last time. When you click the button, a "Hello World!" message should appear, confirming that your widget is fully functional.
|
||||
@@ -1,8 +1,8 @@
|
||||
# Word count widget
|
||||
> [!TIP]
|
||||
> This widget is also present in new installations in the <a class="reference-link" href="../../Advanced%20Usage/Database/Demo%20Notes.md">Demo Notes</a>.
|
||||
> This widget is also present in new installations in the <a class="reference-link" href="../../../Advanced%20Usage/Database/Demo%20Notes.md">Demo Notes</a>.
|
||||
|
||||
Create a <a class="reference-link" href="../../Note%20Types/Code.md">Code</a> note of type JS frontend and **give it a** `#widget` **label**.
|
||||
Create a <a class="reference-link" href="../../../Note%20Types/Code.md">Code</a> note of type JS frontend and **give it a** `#widget` **label**.
|
||||
|
||||
```
|
||||
/*
|
||||
@@ -82,7 +82,7 @@ class WordCountWidget extends api.NoteContextAwareWidget {
|
||||
module.exports = new WordCountWidget();
|
||||
```
|
||||
|
||||
After you make changes it is necessary to [restart Trilium](../../Troubleshooting/Refreshing%20the%20application.md) so that the layout can be rebuilt.
|
||||
After you make changes it is necessary to [restart Trilium](../../../Troubleshooting/Refreshing%20the%20application.md) so that the layout can be rebuilt.
|
||||
|
||||
At the bottom of the note you can see the resulting widget:
|
||||
|
||||
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
47
docs/User Guide/User Guide/Scripting/Frontend Basics/Examples/New Task launcher button.md
vendored
Normal file
47
docs/User Guide/User Guide/Scripting/Frontend Basics/Examples/New Task launcher button.md
vendored
Normal 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> () 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: 222 B After Width: | Height: | Size: 222 B |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -21,7 +21,7 @@ TRILIUM_START_NOTE_ID=root ./trilium
|
||||
|
||||
## Broken Script Prevents Application Startup
|
||||
|
||||
If a custom script causes Trilium to crash, and it is set as a startup script or in an active [custom widget](Scripting/Custom%20Widgets.md), start Trilium in "safe mode" to prevent any custom scripts from executing:
|
||||
If a custom script causes Trilium to crash, and it is set as a startup script or in an active [custom widget](Scripting/Frontend%20Basics/Custom%20Widgets.md), start Triliumin "safe mode" to prevent any custom scripts from executing:
|
||||
|
||||
```
|
||||
TRILIUM_SAFE_MODE=true ./trilium
|
||||
|
||||
Reference in New Issue
Block a user