Logo User Guide

"New Task" launcher button

In this example we are going to extend the functionality of Task Manager showcase (which comes by default with Trilium) by adding a button in the Launch Bar  (Article Image) to create a new task automatically and open it.

Creating the note#

  1. First, create a new Code note type with the JS frontend language.
  2. Define the #run=frontendStartup label in Attributes.

Content of the script#

Copy-paste the following script:

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.

Understanding how the script works#

api.addButtonToToolbar({
	title: "New task",
    icon: "task",
    shortcut: "alt+n",
    action: async () => {
    	// [...]
    }
});

This uses the Front-end API to create a icon in the Launch Bar, by specifying:

  • A title
  • A corresponding boxicons icon (without the bx- prefix).
  • Optionally, a keyboard shortcut to assign to it.
  • The action, which will be executed when the button is pressed.
const taskNoteId = await api.runOnBackend(() => {
    // Shown below.           
    return resp.note.noteId;
});
  • This portion of code is actually executed on the server (backend) and not on the client (i.e. browser).
    • The reason is that the creating notes is the responsibility of the server.
  • Here we can also see that it is possible to return results from the server execution and read them in the client (taskNoteId).
const todoRootNote = api.getNoteWithLabel("taskTodoRoot");
  • Here we identify a note with the label #taskTodoRoot. This is how the Task Manager showcase knows where to place all the different tasks.
  • Normally this might return a null value if no such note could be identified, but error handling is outside the scope of this example. 
const resp = api.createTextNote(todoRootNote.noteId, "New task", "")
  • 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).
await api.waitUntilSynced();
  • 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.
await api.activateNewNote(taskNoteId);
  • Since we know the ID of the newly created note, all we have to do now is to show this note to the user.