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