diff --git a/docs/assets/images/plugin/buttons.png b/docs/assets/images/plugin/buttons.png
new file mode 100644
index 0000000..72774ab
Binary files /dev/null and b/docs/assets/images/plugin/buttons.png differ
diff --git a/docs/assets/images/plugin/mouser.png b/docs/assets/images/plugin/mouser.png
new file mode 100644
index 0000000..f4100f5
Binary files /dev/null and b/docs/assets/images/plugin/mouser.png differ
diff --git a/docs/extend/plugins/panel.md b/docs/extend/plugins/panel.md
index 529018c..7e63640 100644
--- a/docs/extend/plugins/panel.md
+++ b/docs/extend/plugins/panel.md
@@ -42,7 +42,7 @@ To add some javascript code, you can add a reference to a function that will be
}
```
-Or to add a template file that will be renderered as javascript code, from the plugin template folder, whith the 'javascript_template' key in the panel description :
+Or to add a template file that will be rendered as javascript code, from the plugin template folder, with the 'javascript_template' key in the panel description :
```
{
'title': "Updates",
@@ -55,3 +55,108 @@ note : see convention for template directory above.
## Example Implementation
Refer to the `CustomPanelSample` example class in the `./plugin/samples/integration/` directory, for a fully worked example of how custom UI panels can be implemented.
+
+### An example with button
+
+Let's have a look at another example. We like to have a new panel that contains a button.
+Each time the button is clicked, a python function in our plugin shall be executed and
+do something useful. The result will look like that:
+
+{% with id="panels", url="plugin/mouser.png", description="Panel example with button" %} {% include "img.html" %} {% endwith %}
+
+First we need to write the plugin code, similar as in the example above.
+
+```python
+from django.conf.urls import url
+from django.http import HttpResponse
+
+from order.views import PurchaseOrderDetail
+from plugin import InvenTreePlugin
+from plugin.mixins import PanelMixin, SettingsMixin, UrlsMixin
+
+class MouserCartPanel(PanelMixin, SettingsMixin, InvenTreePlugin, UrlsMixin):
+
+ value=1
+
+ NAME = "MouserCart"
+ SLUG = "mousercart"
+ TITLE = "Create Mouser Cart"
+ DESCRIPTION = "An example plugin demonstrating a button calling a python function."
+ VERSION = "0.1"
+
+ def get_custom_panels(self, view, request):
+ panels = []
+
+ # This panel will *only* display on the PurchaseOrder view,
+ if isinstance(view, PurchaseOrderDetail):
+ panels.append({
+ 'title': 'Mouser Actions',
+ 'icon': 'fa-user',
+ 'content_template': 'mouser/mouser.html',
+ })
+ return panels
+
+ def setup_urls(self):
+ return [
+ url(r'mouser/getcart', self.GetCart, name='get-cart'),
+ ]
+
+#----------------------------------------------------------------------------
+ def GetCart(self,request):
+
+ print('User:',request.user)
+ self.value=self.value+1
+ return HttpResponse(f'OK')
+
+
+```
+
+The code is simple and really stripped down to the minimum. In the plugin class we first define the plugin metadata.
+Afterwards we define the custom panel. Here we use a html template to describe the content of the panel. We need to
+add the path here because the template resides in the subdirectory templates/mouser.
+Then we setup the url. This is important. The url connects the http request with the function to be executed.
+
+ * mouser/getcart: Path of the url together with SLUG
+ * self.GetCart: This is the function to be called. It is defined further down
+ * get-cart: This is the name of the url that needs to be referenced in the html template. We see that later.
+
+Finally we define the function. This is a simple increment of a class value.
+
+
+New lets have a look at the template file mouser.html
+
+```html
+{% raw %}
+{% load i18n %}
+
+
+
+
+
+
+{{ order.description }}
+{{ plugin.value }}
+{% endraw %}
+```
+
+We start with a bit of javascript. The function JGetCart just calls the url that has been defined in the python code above.
+The url consists of a full path `plugin:plugin-name:url-name`. The plugin-name is the SLUG that was defined in the plugin code.
+Then just a reload.
+
+The button is defined with `class="btn btn-info` This is an InvenTree predefined button. There a are lots of others available.
+Here are some examples of available colors:
+
+{% with id="panels", url="plugin/buttons.png", description="Button examples" %} {% include "img.html" %} {% endwith %}
+
+Please have a look at the css files for more options. The last line renders the value that was defined in the plugin.
+
+Just give it a try: Each time you press the button, the value will be increased.
+
+Have fun