SmartIT Customization

Modules

• gtw
• parent acitivities
• Admin Designer

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());