mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-13 18:21:34 +01:00
40 lines
1.1 KiB
Markdown
40 lines
1.1 KiB
Markdown
|
## Creating a component
|
||
|
|
|
||
|
|
ETemplate components are [LitElements](https://lit.dev/docs/) that are wrapped with
|
||
|
|
our [Et2Widget](https://github.com/EGroupware/egroupware/blob/master/api/js/etemplate/Et2Widget/Et2Widget.ts) mixin,
|
||
|
|
which adds properties and methods to support loading from our template files and returning values to the server. They
|
||
|
|
should (relatively) stand-alone.
|
||
|
|
|
||
|
|
Common components are in `api/js/etemplate/`. You can add application specific components in `<appname>/js/`.
|
||
|
|
|
||
|
|
### Create the files
|
||
|
|
|
||
|
|
```
|
||
|
|
myapp/
|
||
|
|
js/
|
||
|
|
MyWidget/
|
||
|
|
test/
|
||
|
|
MyWidget.ts
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
You should have [automatic tests](/tutorials/automatic-testing) to verify your component and avoid regressions
|
||
|
|
in `test/`.
|
||
|
|
|
||
|
|
### Get it loaded
|
||
|
|
|
||
|
|
To have EGroupware load your component, it must be included somewhere.
|
||
|
|
Add your component to the `include` block at the top of `/api/js/etemplate/etemplate2.js`. If you have an application
|
||
|
|
specific component, include at the top of your `app.js`.
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
...
|
||
|
|
import './MyWidget/MyWidget.ts';
|
||
|
|
|
||
|
|
...
|
||
|
|
```
|
||
|
|
|
||
|
|
### Load and return
|
||
|
|
|
||
|
|
### AJAX data
|