With any development, even when customizing Creatio, good code organization is crucial to get the job done right. Good code organization will make your customizations more easily maintainable, easier to read, and easier to create in the first place. One of the ways you can organize your code is using modules. One of the biggest benefits of using modules is the ability to reuse your code. A Javascript module is similar to a class – you define it with a specific purpose, encapsulating the functionality needed for that purpose. Then, you can use that module wherever you need that functionality.
Let’s take a look at the basic structure of a module. First, to create the module, you’ll create a module client schema in your package:
Now, you’ll add your code. Here’s a simple, sample module:
define("UsrMyModule", [], function() {
Ext.define("Terrasoft.configuration.UsrMyModule", {
extend: "Terrasoft.BaseObject",
alternateClassName: "Terrasoft.UsrMyModule",
doSomething: function() {
console.log("something");
}
});
return Ext.create("Terrasoft.UsrMyModule");
});
In the module above, our module name is UsrMyModule. It contains a single function called doSomething. You can add whatever functionality needed to this module. Make note that the module actually creates an instance of itself and returns it (the last line of code), more on this later. Now, when you want to use this module, you can easily add it and invoke it’s functions.
For example, if you want to use this module on an edit page, such as the Contact edit page, you’ll open the edit page and add it as follows – in the example below we’ll use our module in the onEntityInitialized.
define("ContactPageV2", ["UsrMyModule"], function(UsrMyModule) {
return {
entitySchemaName: "Contact",
methods: {
onEntityInitialized: function() {
this.callParent(arguments);
// call function from module
UsrMyModule.doSomething();
}
},
diff: /**SCHEMA_DIFF*/[
//...etc
]/**SCHEMA_DIFF*/
};
});
Notice in the code above, we’ve added our module to the AMD modules list at the top of the code:
define("ContactPageV2", ["UsrMyModule"], function(UsrMyModule) {
This loads our module for the page as an object named UsrMyModule. The first part, in quotes, basically says “load this thing”, the second part, not in quotes, gives you the “thing” in a parameter. Previously, when we looked at the code for the module, it created an instance of itself and returned it. This second part is where we get that created instance. Now we can use this object to invoke the methods in it:
UsrMyModule.doSomething();
That is it. You can now wrap up any code you need in the module and reuse it where necessary. In my next article, I will cover another way to reuse code using mixins.
