Freedom UI page customization basics

Level: beginner

Configure the business logic of Freedom UI pages in the validators, converters, and handlers schema section. 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, Freedom UI page overview.

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

• condition that display the element
• condition that locks the element
• condition that populates the element
• condition that makes element required
• validate the element data
• convert the element data
• element filtering
• Creatio data requesting
• handle the result of a web service
• page navigation

General procedure to customize 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 whose business logic to set up. Instructions: Set up the app UI (user documentation).

2. Set up the page business logic.

   Configure the business logic in the Client Module Designer.

   1. Open the source code of the Freedom UI page. To do this, click .
   2. Perform the setup in the corresponding schema sections of the Freedom UI page schema. Learn more: Client schema (Freedom UI).

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 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 saver 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). 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 system 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)

Configuration elements of the Client module type

Freedom UI page overview

Manage apps (user documentation)

Set up the app UI (user documentation)

Client schema (Freedom UI)