Add a button to a note?

[XaverStiensmeier]

Is it somehow possible to add some kind of button to a note? Basically a thingy when pressed executes an arbitrary function - doesn't have to be a real button.

In my concrete use case, multiple buttons are needed, but are not relevant enough to stay in the toolbar the whole time. They are only needed when certain notes are navigated. I feel like addButtonToToolbar(opts) doesn't allow for that functionality and am missing another way to implement my use case.

Thanks in advance!

[zadam]

Sorry for late reply, but I would implement this as a custom widget: https://github.com/zadam/trilium/wiki/Custom-widget which would display a button.

You can see it has this method:

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

It's only enabled (displayed) if a current note has a specific label. This is a common pattern, but you can use any condition, e.g. based on note's type.

[XaverStiensmeier]

Thank you for your suggestion. I have now tried to implement this as a button, but I am unable to call functions defined in the #widget note from the html. I tried using the button's onclick. Is that not possible? If so, I guess I can only execute JavaScript which I also put into the doRender, right? In that case I am unable to access api.showPromptDialog which is necessary.

[zerebos]

Can you explain a bit more about what you're trying to accomplish? Maybe I can give an example.

[XaverStiensmeier]

from a general developer standpoint

I would like to be able to access the api from that button because it might be helpful to understand this for future implementations

from the "what I want to accomplish right now" standpoint

I want to display a button on certain pages and when it is clicked a pop up opens that displays a random dice roll. That dice roll can differ depending on what note is used.
This could be achieved by using widgets, a note label containing the exact roll, a rendered html button and an onclick method that calls the api show prompt dialog method.

[zadam]

Sorry for late reply. It is possible to bind a function to e.g. a button, but you can't use e.g. "onclick".

See https://github.com/zadam/trilium/blob/master/src/public/app/widgets/buttons/global_menu.js#L269:

       this.$widget.find(".zoom-buttons").on("click", () => {
            // do what you want here
       });

This binding usually happens in doRender() method.