Organizing Code for Creatio Freedom UI Pages with Modules

On Freedom UI pages all page code is added as request handlers. This new way that code is added to Freedom UI pages has some benefits, however, it does tend to make the code for the page unorganized, difficult to read, and not reusable. Rather than adding all logic to request handlers on a Freedom UI page, it’s a better approach to use modules to organize the code better.

For example, if I needed to add several request handlers to the Cases form page, rather than add all of the logic to the page handlers, I will create a module that contains all logic, such as the following:

// jshint esversion: 11
define("UsrCasesFormPageFunctions", ["@creatio-devkit/common"], function (sdk) {
	return {
		someFunction: async function($context) {
			//
		}

	};
});

Then, add the module to the page:

define("Cases_FormPage", /**SCHEMA_DEPS*/["UsrCasesFormPageFunctions"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(page)/**SCHEMA_ARGS*/ {

With this, now my requests on the page will just call functions inside my module, making things easier to read and allowing me to reuse common logic as separate functions inside the module. For example, a change event for the Account field would look like this (using the module that would contain the actual implementation of what needs to happen for this change event)

{
    request: "crt.HandleViewModelAttributeChangeRequest",
    handler: async (request, next) => {
        if (request.attributeName === "Account" && !request.silent) {
            await page.onAccountChange(request); // <-- calling function in module
        }
        return next?.handle(request);
    }
}

Or when the page data is initialized:

{
    request: "crt.HandleViewModelInitRequest",
    handler: async (request, next) => {
        await next?.handle(request);
        await page.onInitialized(request.$context); // <-- calling function in module
    }
}

Or to filter the contact lookup on the page:

{
    request: "crt.LoadDataRequest",
    handler: async (request, next) => {
        if (request.dataSourceName == "Contact_List_DS") {
            await page.filterContactLookup(request.$context); // <-- calling function in module
        }
        return await next?.handle(request);
    }
}

I’ve found that organizing my code like this makes this far easier to work with, plus doesn’t make a mess of the page.