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

In my last article I covered how to create reusable code in Creatio using modules. In this article I will cover a similar concept of creating reusable code using mixins. A mixin is a way to create reusable code where the code in the mixin becomes a part of the code you’re adding it to. You’re not inheriting this code, instead, the functions in the code get “mixed into” the code you’re adding it to. Meaning, if you add a mixin to a page, the functions in the mixin become a part of that page as if they are a part of the page. If you have some functionality that you need to use on several pages, you can create this functionality as a mixin and then add it to the pages you need it on and it’s as if you created the functionality directly on that page – but without duplicating the code everywhere.

Let’s take a look at how to create a mixin. A mixin is created as a module schema, just like a module (discussed in my previous article)

Now, you’ll add code like the following:

define("UsrMyMixin", [], function() {
	Ext.define("Terrasoft.configuration.mixins.UsrMyMixin", {
		alternateClassName: "Terrasoft.UsrMyMixin",
		
		doSomething: function() {
			console.log("Something");
		}
	});
});

In the code above, we’ve created a mixin named UsrMyMixin and it contains a single function named doSomething. To use this mixin on a page, for example the Contact edit page, you’d add it as follows. In the example below we’re calling the doSomething function that gets mixed into the Contact page from our mixin in the onEntityInitialized.

define("ContactPageV2", ["UsrMyMixin"], function() {
	return {
		entitySchemaName: "Contact",
		mixins: {
			UsrMyMixin: "Terrasoft.UsrMyMixin"
		},
		methods: {
			onEntityInitialized: function() {
				this.callParent(arguments);
				
				// call function from mixin
				this.doSomething();
			}
		},
		diff: /**SCHEMA_DIFF*/[
			//...etc
		]/**SCHEMA_DIFF*/
	};
});

In the code above, notice we’ve added the mixin to the top of the page:

define("ContactPageV2", ["UsrMyMixin"], function() {

Note, we only need the first part, in the square brackets and in quotes. This just says to “load this thing”. We don’t need the second part, in the parenthesis and not in quotes, because we don’t want the object. Instead, we’ll add it to a mixins block on our page. This tells the application to mix that “things” functions into the page. Note, by default, when you create a customized page using the wizards in Creatio, it doesn’t have a mixins block. However, you can just add it alongside attributes, methods, diff, etc.

mixins: {
	UsrMyMixin: "Terrasoft.UsrMyMixin"
},

Now, we can call functions from the mixins, just as if they are a part of the page – note, we’re calling it as a method of this, as in the current page.

this.doSomething();

That’s it. Note, the mixin’s functions become a part of the page/section/whatever you’ve mixed it into and you *can* override them if needed, however, to do so it is slightly different. Typically, when you override a parent page function, you do so like this:

// overriding a parent page function
parentFunction: function() {
	// invoke base parent function
	this.callParent(arguments);
}

Note the this.callParent(arguments) part. This is what invokes the parent page function before we add on our code. To override a function in a mixin, that part is different. It looks more like this (in this sample we’re overriding the doSomething function in the mixin created above):

// overriding a mixin function
doSomething: function() {
	// invoke base mixin function
	this.mixins.UsrMyMixin.doSomething.apply(this, arguments);
}

The this.mixins.UsrMyMixin part needs to correspond to the name, or label, you gave the mixin in the mixins section. Of course, you could omit that part if you simply want to override the mixin function without invoking it.

Why would you want to use a mixin vs a module? Well, I suppose it just depends on how you’re going to be using it. One nice thing about a mixin is if you’ve already implemented code in functions on a page, and then need to use that code elsewhere, you can simply remove the functions to a mixin without the need to change the code that calls those functions, since once the mixin is added to the page, it’s as if those functions are still a part of it. A module is a bit more encapsulated, a self contained object. They’re both great ways to create reusable code.