right-pane widget to display a note?

[bert010]

today I tried for first time to make a widget, obviously without succes because my knowledge of trilium api (and in general) is close to zero.

I want to display a note tagged with #sticky in the right pane as a widget

after having looked at some other scripts I took some wild guesses but obviously completly wrong because it blanks my trilium window :-)

any hints are much appreciated!

let TPL = `
<style>
.stickyNote {
    border: 1px solid var(--main-border-color);
    min-height:6em;
    resize: vertical;
    width: 100%;padding:10px;
    font-family:var(--font-code); 
}
</style>
`

class stickyWidget extends api.CollapsibleWidget {

    get widgetTitle() {
        return "sticky"
    }

    get parentWidget() {
        return "right-pane"
    }

async doRenderBody() {

  const stickyNotes = await api.searchForNotes('#sticky');   

      let i = 0;
      for (; i < stickyNotes.length && i < 3; i++) {
            const note = stickyNotes[i];
            const $item = append(await api.getNote(note));
            $content.append($item);
       }
            this.$body.html(TPL).append($content);
                        }    
}

module.exports = new stickyWidget()

[zadam]

Hi, something like this should work:

let TPL = `
<div>
    <style>
    .stickyNote {
        border: 1px solid var(--main-border-color);
        min-height:6em;
        resize: vertical;
        width: 100%;padding:10px;
        font-family:var(--font-code); 
    }
    </style>
</div>
`

class stickyWidget extends api.CollapsibleWidget {

    get widgetTitle() {
        return "sticky"
    }

    get parentWidget() {
        return "right-pane"
    }

    async doRenderBody() {
      const stickyNotes = await api.searchForNotes('#sticky');   

      const $content = $("<div>"); 

      for (let i = 0; i < stickyNotes.length && i < 3; i++) {
          const note = stickyNotes[i];

          $content.append(await note.getContent());
       }

       this.$body.html(TPL).append($content);
    }    
}

module.exports = new stickyWidget()

In case buggy widget crashes the Trilium, use this command to start in "safe mode" (for linux):

TRILIUM_SAFE_MODE=1 trilium

But I will check to see if it's possible to make the code more robust so it doesn't crash when one widget crashes ...

Also note that there is currently big UI redesign going on and one thing which is changing is that the right pane is not going to be there by default. It might appear just for custom widgets but the details are still a bit unclear.

[bert010]

thanks very much! works great, I now no longer can ignore my todo list!