Creating Custom Requests and Calling as Functions on a Creatio Freedom UI Page

The anatomy of the code that makes up a Creatio Freedom UI page is quite different than the code for classic pages. However, it is still possible to create custom requests that can be used as functions to make the page code more organized and reusable. This article will show how to create custom requests and call them like functions on a Freedom UI page.

Note, another option is to use modules or classes for better code organization

For example, if you have some code that might need to run on a page’s model init and also on a change event, you could create this code as a custom request on the page, as follows:

// handle the request called cfx.doSomething
{
    request: "cfx.doSomething",
    handler: async (request, next) => {
        // do something here
        return next?.handle(request);
    }
}

You can think of the request handler above as a function that we’ll call when needed. To execute the request (and essentially call that function) we would use the following, for example from the init or changes requests:

// execute the request called cfx.doSomething
request.$context.executeRequest({
    type: "cfx.doSomething",
    $context: request.$context
});

We can also pass parameters in the request as well, using the following syntax to just include them in the request:

// execute the request and pass parameters
request.$context.executeRequest({
    type: "cfx.doSomething",
    $context: request.$context,
    someParameter: "Some value here",
    anotherParam: 10
});

Then, to retrieve the parameters, they will be properties of the request that is provided to our custom request handler:

// handle the request and retrieve the parameters
{
    request: "cfx.doSomething",
    handler: async (request, next) => {
        const someParam = request.someParameter;
        const another = request.anotherParam;

        // do something here

        return next?.handle(request);
    }
}

Lastly, you can also return values from the custom request handler as well. For example, let’s say you want a reusable request to retrieve some data from elsewhere. You could define that request and return some value as follows:

// handle the request and return a result
{
    request: "cfx.getSomeValue",
    handler: async (request, next) => {
        // do something to get the value here

        // now return the result
        return "Some return value";
    }
}

Then to execute that request and get the value returned, you’d simply need to capture and await the result of the request:

// execute the request and await the returned result
const result = await request.$context.executeRequest({
    type: "cfx.doSomething",
    $context: request.$context
});

// do something with the returned value
console.log(result);

For more complex page code, a module or class is always a better route, but for simple page code organization, using requests as functions is a great way to keep the page code clean.