Creating Reusable Client-Side Code With Modules in Creatio (formerly bpm’online)

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.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!

You have Successfully Subscribed!