Freedom UI page customization basics

Level: beginner

Configure the business logic of Freedom UI pages in the validators, converters, and handlers schema sections. We recommend using no-code tools to set up business logic. Learn more: Overview of Freedom UI Designer and its elements (user documentation).

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: Freedom UI page schema, Structure of a Freedom UI page.

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

• condition that displays the element
• condition that locks the element
• condition that populates the element
• condition that makes the element required
• element data validation
• element data conversion
• element filtering
• Creatio data requests
• web service result handling
• page navigation

General procedure to customize a Freedom UI page

1. Set up the page UI.

   1. Create an app based on the corresponding template. Instructions: Create an app manually (user documentation).

   2. Add one or more elements for which to set up business logic. Instructions: Set up the app UI (user documentation).

      When you change the unique code of the Freedom UI element (the Element code property value) in the Freedom UI page and save the changes in the Freedom UI Designer, Creatio changes both the Code property value of the localizable string and the caption property value of the page element in the Freedom UI page schema automatically. This makes it easier to customize the app, especially if you have multiple similar elements on the page.

      Since version 10.1, when you save a Freedom UI page in the Freedom UI Designer, Creatio saves only changed element properties to the Freedom UI page schema. Learn more: Freedom UI page schema.

2. Set up the page business logic.

   Configure the business logic in the Client Module Designer.

   1. Click to open the source code of the Freedom UI page.
   2. Perform the setup in the corresponding schema sections of the Freedom UI page schema. Learn more: Freedom UI page schema.

Request handlers are the preferred way to customize the page. Request handlers are items of the HandlerChain mechanism that lets you describe business logic as an action request and a chain of handlers. You can manage data sources using the handlers schema section. Learn more: "handlers" schema section.

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

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

Close the WebSocket when destroying the View of the model

To close the WebSocket when destroying the View of the model:

1. Go to the handlers schema section.

2. Add a custom implementation of the crt.HandleViewModelDestroyRequest base request handler.

   Creatio executes the handler when the View of the model is destroyed (for example, when you open another page). The handler is 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 request handler that closes the custom SomeWebSocket WebSocket below.

   handlers schema section

   handlers: /**SCHEMA_HANDLERS*/[
       {
           request: "crt.HandleViewModelDestroyRequest",
           /* The custom implementation of the base request 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);
           }
       }
   ]/**SCHEMA_HANDLERS*/,

---

See also

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

"Client module" type schema

Structure of a Freedom UI page

Manage apps (user documentation)

Set up the app UI (user documentation)

Freedom UI page schema

Best practices for optimizing data fetching in Freedom UI page logic