mirror of
https://github.com/inventree/InvenTree.git
synced 2026-11-15 21:05:33 +00:00
[UI] Launch forms directly from plugin (#13174)
* [UI] Launch forms directly from plugin Provide ability for plugins to dynamically launch modal forms, without specifying the underlying react components. This allows (for example) a primary action on a detail page to launch a new native API form * Add CHANGELOG entry
This commit is contained in:
1 parent
ad723c15e4
commit
461186bee9
9 files changed
+231
-1
No files matched your search
@@ -106,6 +106,30 @@ This set of components is passed through at render time to the plugin function,
|
||||
|
||||
For example, the plugin can make use of the authenticated api instance, to make calls to the InvenTree API, or use the `navigate` function to redirect the user to a different page.
|
||||
|
||||
### Launching Forms
|
||||
|
||||
The `forms` object provides two ways for a plugin to display an API-driven form in a modal dialog.
|
||||
|
||||
The `create`, `edit` and `delete` functions are React hooks, which must be called from within a React component. The returned `modal` element must be rendered by the plugin component, and the form is displayed by calling the returned `open` function.
|
||||
|
||||
Alternatively, the `openCreate`, `openEdit` and `openDelete` functions can be called from anywhere - including from outside of a React component, such as a primary action callback. The form modal is rendered by the InvenTree user interface, and the plugin does not need to render anything itself. These functions accept the same form properties as the hook functions, and return an identifier which can be passed to `forms.close` to close the form programmatically.
|
||||
|
||||
```javascript
|
||||
const formId = context.forms.openCreate({
|
||||
url: '/plugin/my-plugin/items/',
|
||||
title: 'Create Item',
|
||||
fields: {
|
||||
name: {},
|
||||
description: {},
|
||||
},
|
||||
onFormSuccess: (data) => {
|
||||
console.log('Item created:', data);
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Note that the form properties are captured when the form is opened, and are not updated afterwards.
|
||||
|
||||
## Externalized Libraries
|
||||
|
||||
To create a plugin which integrates natively into the InvenTree UI, it is important that the plugin is compiled in a way that allows it to run within the same React context as the InvenTree frontend code.
|
||||
|
||||
Reference in new issue
Block a user