diff --git a/docs/docs/assets/images/plugin/plugin_dataflow.png b/docs/docs/assets/images/plugin/plugin_dataflow.png new file mode 100644 index 0000000000..7b14aedba3 Binary files /dev/null and b/docs/docs/assets/images/plugin/plugin_dataflow.png differ diff --git a/docs/docs/extend/plugins/panel.md b/docs/docs/extend/plugins/panel.md index 68d9f4b7b8..09f951421b 100644 --- a/docs/docs/extend/plugins/panel.md +++ b/docs/docs/extend/plugins/panel.md @@ -57,14 +57,15 @@ Note : see convention for template directory above. 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 +### An example with button and parameter 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: +a parameter shall be transferred . The result will look like that: {% with id="mouser", 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 @@ -99,32 +100,31 @@ class MouserCartPanel(PanelMixin, SettingsMixin, InvenTreePlugin, UrlsMixin): def setup_urls(self): return [ - url(r'mouser/getcart', self.GetCart, name='get-cart'), + url(r'transfercart/(?P\d+)/', self.TransferCart, name='get-cart') ] #---------------------------------------------------------------------------- - def GetCart(self,request): + def TransferCart(self,request,pk): - print('User:',request.user) + print('User,pk:',request.user,pk) 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. +May be it is worth to leave a few more words on this because the string looks a bit like white noise. +*transfercart* is the url which can be chosen freely. The ? is well known for parameters. In this case we +get just one parameter, the orders primary key.* \d+* is a regular expression that limits the parameters +to a digital number with n digits. Let's have a look on the names and how they belong together: - * 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. +{% with id="plugin_dataflow", url="plugin/plugin_dataflow.png", description="Dataflow between Javescript and Python" %} {% include "img.html" %} {% endwith %} 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 +Now lets have a look at the template file mouser.html ```html {% raw %} @@ -132,7 +132,7 @@ New lets have a look at the template file mouser.html @@ -149,7 +149,7 @@ async function JGetCart(){ 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. +order.pk is the parameter that is passed to python. 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: