From d0858f8e208db6a610008e439d241095415104f8 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 14 Jun 2020 13:30:05 +0200
Subject: [PATCH] Created Custom Widget (markdown)

---
 Custom-Widget.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 Custom-Widget.md

diff --git a/Custom-Widget.md b/Custom-Widget.md
new file mode 100644
index 0000000..a7b1b93
--- /dev/null
+++ b/Custom-Widget.md
@@ -0,0 +1,42 @@
+It's possible to create custom widget in three possible locations where you can display your custom content.
+
+Positions are:
+
+* left-pane
+* center-pane
+* right-pane
+
+## Example
+
+Create a code note of type JS frontend and give it `widget` label.
+
+```javascript
+const TPL = `<div></div`;
+
+class TestWidget extends api.TabAwareWidget {
+    get position() { return 15; }
+    
+    get parentWidget() { return 'center-pane'; }
+    
+    doRender() {
+        this.$widget = $(TPL);
+        return this.$widget;
+    }
+    
+    async refreshWithNote(note) {
+        if (!note.hasOwnedLabel('showTestWidget')) { // show widget only on notes with this label
+            this.toggleInt(false); // hide
+            
+            return;
+        }
+        
+        this.toggleInt(true); // display
+
+        this.$widget.empty().append($("Hello world!"));
+    }
+}
+
+module.exports = new TestWidget();
+```
+
+After you make changes it is necessary to restart Trilium so that the layout can be rebuilt.
\ No newline at end of file