Skip to main content
Version: 8.1

Freedom UI page customization basics

Level: beginner

Configure the business logic of Freedom UI pages in the validators, converters, and handlers sections of the client schemas. We recommend using no-code tools to set up business logic. Learn more in the user documentation: Freedom UI Designer. If no-code tools are not sufficient to implement your customization, we recommend setting up business logic in the source code of the Freedom UI page schema. Learn more about creating a Freedom UI page in a separate article: Client module.

For example, you can use a Freedom UI page to implement the following business logic:

  • element visibility
  • element locking
  • element requirement
  • element filtering
  • field population
  • Creatio data querying
  • HTTP request sending
  • page navigation

Learn more about pages in a separate article: Freedom UI page.

Page customization procedure

  1. Set up an app page.

    1. Create a custom app. To do this, follow the procedure in the user documentation: Create a custom app.
    2. Add one or more elements whose business logic to set up. To do this, follow the procedure in the user documentation: Set up the app UI.
  2. Set up the business logic of a page item.

    Configure the business logic in the client schema of the Freedom UI page. To open the client module schema, click the button on the action panel of the Freedom UI Designer on the corresponding page. The source code of the Freedom UI page opens after you save the page settings. Perform the setup in the corresponding client schema sections of the Freedom UI page Learn more in a separate article: Client schema.

Query handlers are the preferred way to customize the page. Query handlers are items of the HandlerChain mechanism that lets you describe business logic as an action request and chain of handlers. You can manage data sources using the handlers schema section. Query examples: page readiness, data load and save, business process launch.

Creatio 8 Atlas lets you organize query handlers in event chains. For example, trigger the base Creatio save handler first and execute the custom page logic later upon the page saver query.

To limit the scope of a query handler, fill out the scopes property of the client module with the names of the client schemas for which the handler must work.

View detailed examples of handler invocation in a separate block: Examples.

Close the WebSocket when destroying the View of the model

To close the WebSocket when destroying the View of the model, add a custom implementation of the crt.HandleViewModelDestroyRequest system query handler to the handlers schema section. The handler is executed when the View of the model is destroyed (for example, when you open another page). Designed to destroy resources. We do not recommend writing asynchronous code in the handler (server calls, timeouts, etc.) except for reading the value of attributes.

View an example of the crt.HandleViewModelDestroyRequest query handler that closes the custom SomeWebSocket WebSocket below.

handlers schema section
handlers: /**SCHEMA_HANDLERS*/[
request: "crt.HandleViewModelDestroyRequest",
/* Custom implementation of a system query handler. */
handler: async (request, next) => {
/* Close the SomeWebSocket WebSocket */
(await request.$context.SomeWebSocket).close();
/* Call the next handler if it exists and return its result. */
return next?.handle(request);

See also

Overview of Freedom UI Designer and its elements (user documentation)

Client module

Freedom UI page

Create a custom app (user documentation)

Set up the app UI (user documentation)

Client schema