More buttons on Toolbar

[twicemice]

Hi
Is there a way to add more buttons on the toolbar? I have found a limit of 9, and i need more.
or a way to create a button with multiple options, like the "main menu button".

Thank you for your attention.

[zadam]

Hi,

there are bookmarks which put shortcuts on the toolbar/panel.

There's also an option to make a custom button using scripts - there's an example on the wiki.

Finally, I have a work-in-progress making the left sidebar much more configurable, but it will take some time to release that.

[twicemice]

Thank you, very useful feature but i need that the button has some funcionality, like create new note.

[fooyoo]

center-pane can also be utilized(another option). here is an example for your reference, you can ignore the implementation of button function:
``
const TPL = `

`;

class TGLButtonsWidget extends api.NoteContextAwareWidget {
get position() { return 1; }
get parentWidget() { return 'center-pane'; }

isEnabled() {
    return super.isEnabled() && this.note.type === 'text';
}

doRender() {
    super.doRender();
    this.$widget = $(TPL);
    this.$toc = this.$widget.find(".toc-toggle");
    this.$pad = this.$widget.find(".pad-toggle");
    this.$tbh = this.$widget.find(".tbh-toggle");
    this.$color = this.$widget.find(".color-toggle");
    this.$newline = this.$widget.find(".newline");

    this.$toc.on('click', () =>{
            api.runOnBackend(async (noteId) => {
                    const curNote = api.getNote(noteId);
                    if (!curNote.getLabelValue("toc")) {
                    curNote.addLabel("toc", "show");
                    } else if (curNote.getLabelValue("toc") == "show") {
                    curNote.removeLabel("toc");
                    curNote.addLabel("toc", "hide");
                    } else if (curNote.getLabelValue("toc") == "hide") {
                    curNote.removeLabel("toc");
                    }
                    }, [this.note.noteId]);
            });       

    this.$pad.on('click', () =>{
            api.runOnBackend(async (noteId) => {
                    const curNote = api.getNote(noteId);
                    if (!curNote.hasLabel("scratchpadWidgetEnabled")) {
                    curNote.addLabel("scratchpadWidgetEnabled");
                    } else  {
                    curNote.removeLabel("scratchpadWidgetEnabled");
                    }
                    }, [this.note.noteId]);
            });       

    this.$tbh.on('click', () =>{
            api.runOnBackend(async (noteId) => {
                    const note = api.getNote(noteId);
                    const content=note.getContent();
                    const border="border:2px solid var(--main-background-color)";
                    const newcontent=content.replace(/border:2px solid #BADBAD/gm,border);
                    note.removeLabel("TBH");
                    note.setContent(newcontent);
                    note.save();
                    }, [ this.note.noteId]);
            api.waitUntilSynced();
            api.triggerEvent('noteTypeMimeChanged', {noteId: this.note.noteId});             
            }); 

    this.$color.on('click', () =>{
            api.runOnBackend(async (noteId) => {
                    const curNote = api.getNote(noteId);
                    if (!curNote.hasLabel("color")) {
                    curNote.addLabel("color", "orange");
                    } else  {
                    curNote.removeLabel("color");
                    }
                    }, [ this.note.noteId]);
            });       

    this.$newline.on('click', () =>{
            api.runOnBackend(async (noteId) => {
                    const note = api.getNote(noteId);
                    const content=note.getContent();
                    const newcontent=content + "\n<p>&nbsp;</p>\n"
                    note.setContent(newcontent);
                    note.save();
                    }, [ this.note.noteId]);
            api.waitUntilSynced();
            api.triggerEvent('noteTypeMimeChanged', {noteId: this.note.noteId});  
            }); 


    this.contentSized();
    return this.$widget;
}

}

module.exports = new TGLButtonsWidget();
``
result:

[fooyoo]

seems some code is uable to display. paste picture here:

[twicemice]

Thank you very much, i´m going to try to adapt this code, i´m a newbie with javascript.

[twicemice]

Thank you @fooyoo for your code and tips.
This is the code I have adapted. It renders a new button and if you click on that, it generates a new child note:

const TPL = `
<div>
         
    <button type="button"
        class="search1-toggle floating-button btn bx bx-file-find no-print"
        title="search1"></button>     
        
  
</div>`;

class TGLButtonsWidget extends api.NoteContextAwareWidget {
    get position() { return 1; }
    get parentWidget() { return 'center-pane'; }
    isEnabled(){
        return super.isEnabled() && this.note.type === 'text'&& this.note.hasLabel('buttons2');
    }

    doRender() {
        super.doRender();
        this.$widget = $(TPL);
        this.$search1 = this.$widget.find(".search1-toggle");
       
        
        this.$search1.on('click', () =>{
            api.runOnBackend(async (noteId) => {
                    const curNote = api.getNote(noteId);
                                        
                    const response = api.createNewNote({
                            parentNoteId: noteId,
                            title:"search result",
                            content: "",
                            type:"text",
                            isProtected: false
                    });
                    const templateNote=api.getNotesWithLabel('P_search1')[0];      
                    response.note.setRelation('template', templateNote.noteId);            
                    return response.note;     
                          
                          
                    }, [this.note.noteId]);
            api.waitUntilSynced();
            api.activateNewNote(response);
                                
            });       
                    
        this.contentSized();
        return this.$widget;
    }
}   
module.exports = new TGLButtonsWidget(); 

Last questions (i hope ; ) )

I've been trying with the "note-detail-pane" option, but it hasn't worked. What am I doing wrong?
On the other hand, how could I add simple javascript code for execution in a backend script.

const Search01 =curNote.getLabelValue("Search");
window.open('https://www.amazon.com/s?k=' + Search01, 'Search01window');

Thank you very much for your help. I´m learning a lot.

[fooyoo]

I am new to JS/frontend also, let's learn from each other.
I tried to change “center-pane' to "note-detail-pane", it can display as before.
and I tried add your js code snippet to open window, it can be opened, not sure if it your expected result. just paste here for your reference.

const TPL = `
<div>
         
    <button type="button"
        class="search1-toggle floating-button btn bx bx-file-find no-print"
        title="search1"></button>     
        
  
</div>`;

class TGLButtonsWidget extends api.NoteContextAwareWidget {
    get position() { return 1; }
    get parentWidget() { return 'note-detail-pane'; }
    isEnabled(){
        return super.isEnabled() && this.note.type === 'text'&& this.note.hasLabel('buttons2');
    }

    doRender() {
        super.doRender();
        this.$widget = $(TPL);
        this.$search1 = this.$widget.find(".search1-toggle");
       
        
        this.$search1.on('click', async () =>{
            const response = await api.runOnBackend(async (noteId) => {
                    const curNote = api.getNote(noteId);
                                        
                    const response = api.createNewNote({
                            parentNoteId: noteId,
                            title:"search result",
                            content: "",
                            type:"text",
                            isProtected: false
                    });
                    const templateNote=api.getNotesWithLabel('P_search1')[0];      
                    response.note.setRelation('template', templateNote.noteId);            
                    return response.note.noteId;     
                          
                          
                    }, [this.note.noteId]);
            api.waitUntilSynced();
            api.activateNewNote(response);
            const Search01 =this.note.getLabelValue("Search");
            window.open('https://www.amazon.com/s?k=' + Search01, 'Search01window');                               
            });       
                    
        this.contentSized();
        return this.$widget;
    }
}   
module.exports = new TGLButtonsWidget(); 

result:

[twicemice]

Hi @fooyoo
That is exactly the result I was looking for, but unfortunately, the browser window does not open on my system. I copied your code, tried other possibilities but it doesn't work. I will try to see how is the debugging with console to see if it throws some error that will allow me to correct it.
Thank you very very very much for your help.

[fooyoo]

I tried again(copy/paste from last posted), still work. note that script need "JS fronted" note type and label #widget.
search note need label "#buttons2 #Search=abc", and a template note with label "#P_search1“.
Maybe something is blocked/failed before windows open. You could try debug tools of Trilium, Control+Shift+I to open the dev tool to check warning/error. adding some "print" in code(console.log in frontend and api.log in backend) also helps sometimes(need Control-R to reload frontend to make it effective). check output of console.log in dev tools' console, and check output of api.log in "menu/show backend log".

[twicemice]

I copied the code again and inspected the console, It was talking about an error with a "NoteId". Everythig was fine until the new note creation, it never applied the template to this new note. I corrected tags and names from my templates and It worked. Now it applies template and opens web browser.
This will enhance my workflow a lot.
Thank you very very very much!