# "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  (![](New%20Task%20launcher%20button_i.png)) 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: ```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 
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.