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.