inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-04-28 11:36:44 +00:00
Code

Added docs on the panel plugin example (#5402)

Browse Source 
* added docu and image for panel plugin example

* format
This commit is contained in:
Michael 2023-08-06 13:49:29 +02:00 committed by GitHub
parent b6cb20ccfa
commit e1abe5be40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/docs/assets/images/plugin/plugin_dataflow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

28
docs/docs/extend/plugins/panel.md
View File

@ -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. 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. 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 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 %} {% 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. First we need to write the plugin code, similar as in the example above.
```python ```python
@ -99,32 +100,31 @@ class MouserCartPanel(PanelMixin, SettingsMixin, InvenTreePlugin, UrlsMixin):
def setup_urls(self): def setup_urls(self):
return [ return [
url(r'mouser/getcart', self.GetCart, name='get-cart'), url(r'transfercart/(?P<pk>\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 self.value=self.value+1
return HttpResponse(f'OK') 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. 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 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. 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. 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 {% with id="plugin_dataflow", url="plugin/plugin_dataflow.png", description="Dataflow between Javescript and Python" %} {% include "img.html" %} {% endwith %}
* 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. Finally we define the function. This is a simple increment of a class value.
Now lets have a look at the template file mouser.html
New lets have a look at the template file mouser.html
```html ```html
{% raw %} {% raw %}
@ -132,7 +132,7 @@ New lets have a look at the template file mouser.html
<script> <script>
async function JGetCart(){ async function JGetCart(){
response = await fetch( '{% url "plugin:mousercart:get-cart" %}'); response = await fetch( '{% url "plugin:mousercart:get-cart" order.pk %}');
location.reload(); location.reload();
} }
</script> </script>
@ -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. 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. 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. 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: Here are some examples of available colors: