Freedom UI page customization basics
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
-
Set up an app page.
- Create a custom app. To do this, follow the procedure in the user documentation: Create a custom app.
- 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.
-
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_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);
}
}
]/**SCHEMA_HANDLERS*/,
See also
Overview of Freedom UI Designer and its elements (user documentation)
Create a custom app (user documentation)