Notes/docs/User Guide/User Guide/Scripting/Examples/New Task launcher button.md

4.4 KiB

"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  () 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.