242 lines
6.8 KiB
Markdown
242 lines
6.8 KiB
Markdown
# SmartIT Customization
|
|
|
|
## Modules
|
|
|
|
- [gtw](./src/modules/gtw)
|
|
- [parent acitivities](./src/modules/parentActivities)
|
|
- [Admin Designer](./src/modules/adminDesigner)
|
|
|
|
## How to write a custom module
|
|
|
|
**1 Create file**
|
|
Create a ``.js`` class and extend ``ntt.smartit.api.ICustomModule``.
|
|
|
|
export class gtwModul extends ntt.smartit.api.ICustomModule { ... }
|
|
|
|
**2 Needed functions**
|
|
|
|
**`name()`**
|
|
|
|
The return value needs to be the name of the module.
|
|
|
|
**`injectTemplates()`**
|
|
|
|
The function `injectTemplates()` in specifies the attributes/options for the template injection in a JSON-like format and returns them.
|
|
|
|
At first, the url of the template you want to modify needs to be set. After that, a set aof attributes of that template can and shall be passed.
|
|
|
|
injectTemplates() {
|
|
return {
|
|
"views/ticket/task-details-v2.html": [{
|
|
<attributes>
|
|
}]
|
|
}
|
|
}
|
|
|
|
|
|
|
|
Following Attributes can be used:
|
|
* ``method``
|
|
* ``mode``
|
|
* ``type``
|
|
* ``attributes``
|
|
* ``selector``
|
|
* ``snippet``
|
|
* ``template``
|
|
|
|
|
|
``method``
|
|
|
|
The method specifies the method the template is modified. Currently supported methods are:
|
|
* ``add`` - _adding non-existing components to the template_
|
|
* ``replace`` - _replacing already existing components in the template_
|
|
|
|
|
|
``mode``
|
|
|
|
The mode lets you chose which parts of the template you want to modify. Currently supported modes are:
|
|
* ``full`` (automatically triggers ``replace``) - _this allows you to replace the whole template_
|
|
* ``partial`` - _allows you to manipulate just a part of the template_
|
|
* ``attribute`` - _allows you to manipulate just the attributes of the HTML element_
|
|
|
|
|
|
``selector``
|
|
|
|
In the selector you specify which element should be manipulated.
|
|
|
|
**No selector needed when:** ``replace full``
|
|
|
|
The selector can be a keyword such as the id/name of the HTML element.
|
|
|
|
The selector can also be a function. The language of the function then needs to specified in the ``type`` attribute.
|
|
|
|
Example **JQuery function selector**:
|
|
|
|
selector: function($jqueryTemplate) {
|
|
return $jqueryTemplate.find('element-name/id');
|
|
},
|
|
|
|
|
|
``type``
|
|
|
|
As stated above, if the selector is a function, the corresponding language needs to be specified.
|
|
|
|
type: "jquery",
|
|
|
|
|
|
``snippet``
|
|
|
|
If the ``mode`` is set to ``partial`` you have to provide the code, which will be inserted.
|
|
|
|
snippet: '<a item-id="ticket"></a>',
|
|
|
|
|
|
``attributes``
|
|
|
|
This lets you manipulate the attributes of the HTML element. This only works if the ``method`` is set to ``attribute``.
|
|
This attribute lets you replace and add at the same time. Following format is needed to ensure that no errors occur (multiple attributes are supported):
|
|
|
|
attributes: {
|
|
"replace": {
|
|
"<attrribute-name>": "<attribute-value>"
|
|
},
|
|
"add": {
|
|
"<attrribute-name>": "<attribute-value>"
|
|
}
|
|
},
|
|
|
|
|
|
``template``
|
|
|
|
If ``mode`` is ``full`` a template needs to be provided which will then replace the whole template. The template is a path to a HTML file.
|
|
|
|
**`templates()`**
|
|
|
|
todo
|
|
|
|
**`i18nLocales()`**
|
|
|
|
todo
|
|
|
|
**3 Pushing Module into Module List**
|
|
|
|
In order for the Module to be implemented it needs to be pushed intop the Module List.
|
|
|
|
ntt.smartit.api.nttSmartitModules.push(new <Module>());
|
|
|
|
**4. Create a controller _(optional)_**
|
|
|
|
If extra functionality is needed, create a ``controller.js`` and ``require`` the controller in the ``module.js``. (Don't forget to add the controller to the wanted HTML element in order for the controller to work).
|
|
|
|
**5. Insert into index.html**
|
|
|
|
The created module has to be added to the SmartIT ``index.html``. connect to Server and add your Module in form of ``<script..``>. Prerequisite is, that ``NTTDATA/modules/`` exists on the server (the built script(s)).
|
|
|
|
<script src="NTTDATA/modules/customModule/ntt.smartit.customModule.js"></script>
|
|
|
|
## Examples
|
|
**1. full replace**
|
|
|
|
require('./controllers/fullReplaceController');
|
|
|
|
export class fullReplaceModule extends ntt.smartit.api.ICustomModule {
|
|
|
|
name() {
|
|
return "fullReplace";
|
|
}
|
|
|
|
injectTemplates() {
|
|
return {
|
|
"views/replaceable.html":
|
|
[{
|
|
method: "replace",
|
|
mode: "full",
|
|
template: this.getModulePath()+"replaceViews/customTemplate.html"
|
|
}]}
|
|
}
|
|
templates() { return [] } //This function can be empty for the initial stage
|
|
i18nLocales() { return [] } //This function can be empty for the initial stage
|
|
}
|
|
|
|
ntt.smartit.api.nttSmartitModules.push(new fullReplaceModule());
|
|
|
|
**2. partial replace**
|
|
|
|
export class partialReplaceModule extends ntt.smartit.api.ICustomModule {
|
|
|
|
name() {
|
|
return "partialReplace";
|
|
}
|
|
|
|
injectTemplates() {
|
|
return {
|
|
"views/replaceable.html":
|
|
[{
|
|
mode: "partial",
|
|
method: "replace",
|
|
type: "jquery",
|
|
snippet: '<a item-id="ticket"></a>',
|
|
selector: function($jqueryTemplate) { return $jqueryTemplate.find('element-name'); }
|
|
}]
|
|
}
|
|
}
|
|
templates() { return [] } //This function can be empty for the initial stage
|
|
i18nLocales() { return [] } //This function can be empty for the initial stage
|
|
}
|
|
|
|
ntt.smartit.api.nttSmartitModules.push(new attributeModule());
|
|
|
|
**3. partial add**
|
|
|
|
Adding a tab to a tabset
|
|
|
|
export class partialAddModule extends ntt.smartit.api.ICustomModule {
|
|
|
|
name() {
|
|
return "partialAdd";
|
|
}
|
|
|
|
|
|
injectTemplates() {
|
|
return {
|
|
"views/partialAdd.html":
|
|
[{
|
|
method: "add",
|
|
mode: "partial",
|
|
type: "jquery",
|
|
selector: function($jqueryTemplate) { return $jqueryTemplate.find('tabset'); },
|
|
snippet: '<tab id="tab3"></tab>',
|
|
}]
|
|
}
|
|
}
|
|
templates() { return [] } //This function can be empty for the initial stage
|
|
i18nLocales() { return [] } //This function can be empty for the initial stage
|
|
}
|
|
|
|
ntt.smartit.api.nttSmartitModules.push(new partialAddModule());
|
|
|
|
**4. attribute add&repalce (JQuery Selector)**
|
|
|
|
export class attributeModule extends ntt.smartit.api.ICustomModule {
|
|
|
|
name() { return "AttributeModule"; }
|
|
|
|
injectTemplates() {
|
|
return {
|
|
"views/replaceable.html":
|
|
[{
|
|
mode: "attribute",
|
|
attributes: {
|
|
"replace": { "name": "value" },
|
|
"add": { "name": "value" }
|
|
},
|
|
type: "jquery",
|
|
selector: function($jqueryTemplate) { return $jqueryTemplate.find('activity-feed'); },
|
|
}]
|
|
}
|
|
}
|
|
templates() { return [] } //This function can be empty for the initial stage
|
|
i18nLocales() { return [] } //This function can be empty for the initial stage
|
|
}
|
|
|
|
ntt.smartit.api.nttSmartitModules.push(new attributeModule()); |