[IMP] tutorials: add example code for LazyComponent
js framework/Build a Dashboard/part 8 (LazyComponent) There is no explicit instructions on how to use `LazyComponent`. - add an example code snippet for minimal use of `LazyComponent` - add the `.js` extension to the file you're supposed to create to make it a bit more intuitive - fix `actions` registry name (missing an s) - reword instructions in a more straightforward way closes odoo/documentation#9521 Signed-off-by: Florent Dardenne (dafl) <dafl@odoo.com>
This commit is contained in:
parent
9a0e87e861
commit
15c6bb8b0e
@ -322,17 +322,31 @@ of our users. In that case, it could make sense to lazy load our dashboard, and
|
|||||||
related assets, so we only pay the cost of loading the code when we actually want to
|
related assets, so we only pay the cost of loading the code when we actually want to
|
||||||
look at it.
|
look at it.
|
||||||
|
|
||||||
To do that, we will need to create a new bundle containing all our dashboard assets,
|
One way to do this is to use `LazyComponent` (from `@web/core/assets`) as an intermediate
|
||||||
then use the `LazyComponent` (located in `@web/core/assets`).
|
that will load an asset bundle before displaying our component.
|
||||||
|
|
||||||
|
.. example::
|
||||||
|
|
||||||
|
:file:`example_action.js`:
|
||||||
|
|
||||||
|
.. code-block:: javascript
|
||||||
|
|
||||||
|
export class ExampleComponentLoader extends Component {
|
||||||
|
static components = { LazyComponent };
|
||||||
|
static template = xml`
|
||||||
|
<LazyComponent bundle="'example_module.example_assets'" Component="'ExampleComponent'" />
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
registry.category("actions").add("example_module.example_action", ExampleComponentLoader);
|
||||||
|
|
||||||
#. Move all dashboard assets into a sub folder :file:`/dashboard` to make it easier to
|
#. Move all dashboard assets into a sub folder :file:`/dashboard` to make it easier to
|
||||||
add to a bundle.
|
add to a bundle.
|
||||||
#. Create a `awesome_dashboard.dashboard` assets bundle containing all content of
|
#. Create a `awesome_dashboard.dashboard` assets bundle containing all content of
|
||||||
the `/dashboard` folder.
|
the :file:`/dashboard` folder.
|
||||||
#. Modify :file:`dashboard.js` to register itself in the `lazy_components` registry, and not
|
#. Modify :file:`dashboard.js` to register itself to the `lazy_components` registry instead of `actions`.
|
||||||
in the `action` registry.
|
#. In :file:`src/dashboard_action.js`, create an intermediate component that uses `LazyComponent` and
|
||||||
#. Add in :file:`src/` a file :file:`dashboard_action` that imports `LazyComponent` and registers
|
register it to the `actions` registry.
|
||||||
it to the `action` registry
|
|
||||||
|
|
||||||
9. Making our dashboard generic
|
9. Making our dashboard generic
|
||||||
===============================
|
===============================
|
||||||
|
Loading…
Reference in New Issue
Block a user