Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated URL documentation with more information about panels (#5896)

Browse Source 
* Fixed error "Line 39 in Markdown file: Encountered unknown tag 'load'."

I did not include the statements {% raw %} and {% endraw %} to escape the code. I have been able to set up a dev server and can confirm this new md file works. My apologies!

* Added more documentation about Panels, and their role in `page_base.html`

* Added more sidebar documentation, and documentation about panels

* Fixed `Line 73 in Markdown file: Encountered unknown tag 'trans'.` error.

Also, made minor clarity improvements

* Reworded some sentences for clarity improvements.

Additionally, added more information about `onPanelLoad`

* Minor syntax updates
This commit is contained in:
Joshua Miller 2023-11-09 21:55:10 -05:00 committed by GitHub
parent 8caa4b427a
commit 9e2da947a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
docs/docs/extend/plugins/urls.md
View File

@ -25,20 +25,33 @@ The URLs get exposed under `/plugin/{plugin.slug}/*` and get exposed to the temp
### Views
If your plugin will implement and host another webpage, familiarize yourself with Django views. Implementation is exactly the same.
A good place to start is the [django documentation](https://docs.djangoproject.com/en/4.2/topics/http/views/).
A good place to start is the [django documentation](https://docs.djangoproject.com/en/4.2/topics/http/views/). Additional InvenTree-specific information is below.
### Rendering Views
Rendering templated views is also supported. Templated HTML files should be placed inside a 'templates' subfolder in your plugin folder.
Placed here, the template can be called using the file name (ex: `render(request, 'test.html', context)`)
Rendering templated views is also supported. Templated HTML files should be placed inside your plugin folder in a sub folder called `templates`.
Placed here, the template can be called using the file name and the render command.
### Implementing a Page Base
Some plugins require a page with a navbar, sidebar, and content.
This can be done within a templated HTML file. Extend the file "page_base.html". This can be done by placing the following line at the top of the file.
``` HTML
{% raw %}{% extends "page_base.html" %}{% endraw %}
Example in context (inside the main plugin python file):
``` py
def view_test(self, request):
return render(request, 'test.html', context)
def setup_urls(self):
return [
re_path(r'^test/', self.view_test, name='test')
]
```
Additionally, you should add the following imports after the extended line.
### Implementing the Page Base
Some plugins require a page with a navbar, sidebar, and content similar to other InvenTree pages.
This can be done within a templated HTML file by extending the file "page_base.html". To do this, place the following line at the top of your template file.
``` HTML
{% raw %}
{% extends "page_base.html" %}
{% endraw %}
```
Additionally, add the following imports after the extended line.
``` HTML
{% raw %}
{% load static %}
@ -51,17 +64,57 @@ Additionally, you should add the following imports after the extended line.
#### Blocks
The page_base file is split into multiple sections called blocks. This allows you to implement sections of the webpage while getting many items like navbars, sidebars, and general layout provided for you.
The current page base can be found [here](https://github.com/inventree/InvenTree/blob/master/InvenTree/templates/page_base.html). This will provide you with what blocks you can override. The [stock app](https://github.com/inventree/InvenTree/tree/master/InvenTree/stock) offers a great example of implementing these blocks.
The current default page base can be found [here](https://github.com/inventree/InvenTree/blob/master/InvenTree/templates/page_base.html). Look through this file to determine overridable blocks. The [stock app](https://github.com/inventree/InvenTree/tree/master/InvenTree/stock) offers a great example of implementing these blocks.
!!! warning "Sidebar Block"
You may notice that implementing the `sidebar` block does not work. The most likely issue is that you are not enabling the sidebar using JavaScript. To fix this, append the following code to the end of your template file.
You may notice that implementing the `sidebar` block doesn't initially work. Be sure to enable the sidebar using JavaScript. This can be achieved by appending the following code, replacing `label` with a label of your choosing, to the end of your template file.
``` HTML
{% raw %}
{% block js_ready %}
{{ block.super }}
enableSidebar('stocklocation');
enableSidebar('label');
{% endblock js_ready %}
{% endraw %}
```
#### Panels
InvenTree uses bootstrap panels to display the page's content. These panels are locate inside the block `page_content`.
Example:
```html
{% raw %}
<div class='panel panel-hidden' id='panel-loans'>
<div class='panel-heading'>
<div class='d-flex flex-wrap'>
<h4>{% trans "Loaning Information" %}</h4>
</div>
</div>
<div class='panel-content'>
...
</div>
</div>
{% endraw %}
```
Notice that this example has the panel initially hidden.
This is where the `enableSidebar('...');'` function comes back into play. Panels are enabled according to the labels of items in the sidebar. Each sidebar item must declare a label corresponding to a panel. An example of a sidebar item within with the label `sublocations` is below.
```html
{% raw %}
{% trans "Loaning" as text %}
{% include "sidebar_item.html" with label='loans' text=text icon="fa-sitemap" %}
{% endraw %}
```
Note: This code is assumed to be placed within the `sidebar` block.
The `enableSidebar('...');'` function will un-hide the panel with the label `panel-...` (for this example, `panel-loans`) and hide all other panels. This allows you to have multiple panels on a page, but only show the panel corresponding to the current selected sidebar item.
Whenever you click a sidebar item, it will automatically enable the panel with the corresponding label and hide all other panels.
Additionally, when a panel is loaded, the function `onPanelLoad(...)` will be called for the associated panel.
If you would like to add javascript functionality to a panel, add the function within the `{% raw %}{% block js_ready %}{% endraw %}` block of your template file.
Example:
```js
onPanelLoad('loans', function() {
...
});;
```