Creatio lets you implement the business logic of the Freedom UI page using request handlers. Creatio executes request handlers when an event is triggered on a visual element of a Freedom UI page. You can use base request handlers or implement a new one. Base handlers are executed at different life cycle stages. Learn more in a separate article: Creatio front-end architecture.
You can modify the business logic of a request handler based on the type of related request. View the request type in the component documentation or source code of the schema that implements the request logic.
You can implement a custom request handler in the following ways:
- Use the handlers schema section of the Freedom UI page. Supported in Creatio 8.0 Atlas and later. View examples that invoke handlers in separate articles: Page customization.
- Use a remote module. Supported in Creatio 8.0.8 Atlas and later.
To implement a custom request handler using remote module:
- Create an Angular project to develop a custom request handler using remote module.
- Create a custom request using remote module.
- Create a custom service using remote module.
- Create custom request handlers using remote module.
- Add the request implemented using remote module to the Freedom UI page.
1. Create an Angular project to develop a custom request handler using remote module
Develop a custom request handler in a dedicated npm package using an external IDE. This example covers the request handler development in Microsoft Visual Studio Code.
You can create an Angular project to develop a custom request handler in multiple ways, similarly to creating an Angular project to develop a custom UI component using remote module. To do this, follow the instruction in a separate article: Custom UI component implemented using remote module.
2. Create a custom request using remote module
-
Create an Angular class in the project. To do this, run the ng g class some-request-name.request command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the SomeRequestNameRequest class files to the src/app/ project directory.
-
Implement the request.
- Open the some-request-name.request.ts file.
- Inherit the BaseRequest class from the @creatio-devkit/common library.
- Add the type and parameter of the request.
- Import the required functionality from the libraries into the class.
- Save the file.
- Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the <%projectName%> name specified on step 1.
3. Create a custom service using remote module
-
Create an Angular class in the project. To do this, run the ng g class some-service-name.service command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the SomeServiceNameService class files to the src/app/ project directory.
-
Implement the service that receives data from external web service.
- Open the some-service-name.service.ts file.
- Flag the SomeServiceNameService class using the Injectable decorator.
- Implement the someMethodName() method that receives data from external web service.
- Import the required functionality from the libraries into the class.
- Save the file.
- Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the <%projectName%> name specified on step 1.
4. Create custom request handlers using remote module
-
Create a custom handler that displays data received from the external web service on the Freedom UI page.
-
Set up the Freedom UI page.
- Repeat steps 1-6 of the procedure to implement a custom UI component using remote module.
-
Add a SomeAttributeName attribute that stores data received from the external web service to the viewModelConfig schema section.
-
Bind the caption property of the corresponding component to the $SomeAttributeName model attribute in the viewConfigDiff schema section.
- Click Save on the Client Module Designer's toolbar.
-
Create an Angular class in the project. To do this, run the ng g class some-handler-name.handler command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the SomeHandlerNameHandler class files to the src/app/ project directory.
-
Implement the handler.
- Open the some-handler-name.handler.ts file.
-
Add the configuration object that declares the request handler.
- Set type property to usr.SomeHandlerNameHandler. The type property is the type of handler.
- Set requestType property to crt.UpdateCurrentTimeRequest. The type property is the type of request to execute the handler specified in the type property.
- Flag the SomeHandlerNameHandler class using the CrtRequestHandler decorator.
- Inherit the BaseRequestHandler class from the @creatio-devkit/common library.
- Implement the handling of the request result.
- Generate the value to display in the component of Freedom UI page.
- Import the required functionality from the libraries into the class.
- Save the file.
-
-
Create a custom handler that is executed when Creatio initializes a Freedom UI page.
-
Create an Angular class in the project. To do this, run the ng g class some-handler1-name.handler command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the SomeHandler1NameHandler class files to the src/app/ project directory.
-
Implement the handler.
- Open the some-handler1-name.handler.ts file.
-
Add the configuration object that declares the request handler.
- Set type property to usr.SomeHandler1NameHandler.
- Set requestType property to crt.HandleViewModelInitRequest.
- Set scopes property to code of Freedom UI page. The request handler is executed when Creatio initializes the Freedom UI page that has the specified code. If the property is empty or missing, it is a global handler that Creatio executes on all Freedom UI pages.
- Flag the SomeHandler1NameHandler class using the CrtRequestHandler decorator.
- Inherit the BaseRequestHandler class from the @creatio-devkit/common library.
- Implement the update of data received from the external web service when Creatio initializes the Freedom UI page.
- Import the required functionality from the libraries into the class.
- Save the file.
-
-
Register the handlers.
- Open the app.module.ts file.
- Add the SomeHandlerNameHandler and SomeHandler1NameHandler handlers to the requestHandlers section in the CrtModule decorator.
- Import the required functionality from the libraries into the class.
- Save the file.
- Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the <%projectName%> name specified on step 1.
5. Add the request implemented using remote module to the Freedom UI page
- Repeat steps 2-7 of the procedure to implement custom UI component using remote module.
-
Change the property value of the corresponding component in the viewConfigDiff schema section to request configuration object.
- Enter the request name in the request property.
- Enter the configuration object of parameters in the params property.
- Click Save on the Client Module Designer’s toolbar.
As a result, Creatio will add the request to the Freedom UI page. When an event initiates a request, the related handler will be executed.
1. Create an Angular project to develop a custom request handler using remote module
To create an Angular project to develop a custom request handler using remote module, follow the instruction in a separate article: Implement custom UI component using remote module.
2. Create a custom request using remote module
-
Create an Angular class in the project. To do this, run the ng g class update-current-time.request command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the UpdateCurrentTimeRequest class files to the src/app/ project directory.
-
Implement the request.
- Open the update-current-time.request.ts file.
- Inherit the BaseRequest class from the @creatio-devkit/common library.
- Add the type and parameter of the request.
- Import the required functionality from the libraries into the class.
- Save the file.
- Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the sdk_remote_module_package name.
3. Create a custom service using remote module
-
Create an Angular class in the project. To do this, run the ng g class date-time.service command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the DateTimeService class files to the src/app/ project directory.
-
Implement the service that generates current date and time.
- Open the date-time.service.ts file.
- Flag the DateTimeService class using the Injectable decorator.
- Implement the getCurrentDateTime() method that receives current date and time.
- Import the required functionality from the libraries into the class.
- Save the file.
- Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the sdk_remote_module_package name.
4. Create custom request handlers using remote module
-
Create a custom handler that displays current date and time on the Freedom UI page.
-
Set up the Freedom UI page.
- Use the Records & business processes template to create a custom Requests app. To do this, follow the instruction in the user documentation: Manage apps.
- Open the Requests form page page in the working area of the Requests app page.
- Add a Label type component to the working area of the Freedom UI Designer.
- Click the
button in the action panel of the Freedom UI Designer. After you save the page settings, Creatio opens the source code of the Freedom UI page.
-
Add a CurrentDateTime attribute that stores data about the current date and time to the viewModelConfig schema section.
-
Bind the caption property of the Label element to the $CurrentDateTime model attribute in the viewConfigDiff schema section.
- Click Save on the Client Module Designer's toolbar.
-
Create an Angular class in the project. To do this, run the ng g class update-current-time.handler command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the UpdateCurrentTimeHandler class files to the src/app/ project directory.
-
Implement the handler.
- Open the update-current-time.handler.ts file.
-
Add the configuration object that declares the request handler.
- Set the type property to usr.UpdateCurrentTimeHandler.
- Set the requestType property to crt.UpdateCurrentTimeRequest.
- Flag the UpdateCurrentTimeHandler class using the CrtRequestHandler decorator.
- Inherit the BaseRequestHandler class from the @creatio-devkit/common library.
- Implement the handling of the request result.
- Generate the value to display in the component of Freedom UI page.
- Import the required functionality from the libraries into the class.
- Save the file.
-
-
Create a custom handler that is executed when Creatio initializes a Freedom UI page.
-
Create an Angular class in the project. To do this, run the ng g class page-init-current-time.handler command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the PageInitCurrentTimeHandler class files to the src/app/ project directory.
-
Implement the handler.
- Open the page-init-current-time.handler.ts file.
-
Add the configuration object that declares the request handler.
- Set the type property to usr.PageInitCurrentTimeHandler.
- Set the requestType property to crt.HandleViewModelInitRequest.
- Set the scopes property to UsrRequests_FormPage. The request handler is executed when Creatio initializes the Freedom UI page that has the UsrRequests_FormPage code.
- Flag the PageInitCurrentTimeHandler class using the CrtRequestHandler decorator.
- Inherit the BaseRequestHandler class from the @creatio-devkit/common library.
- Implement the update of the current date and time when Creatio initializes the Freedom UI page.
- Import the required functionality from the libraries into the class.
- Save the file.
-
-
Register the handlers.
- Open the app.module.ts file.
- Add the UpdateCurrentTimeHandler and PageInitCurrentTimeHandler handlers to the requestHandlers section in the CrtModule decorator.
- Import the required functionality from the libraries into the class.
- Save the file.
Complete source code of the app.module.ts file - Build the project. To do this, run the npm run build command at the command line terminal of Microsoft Visual Studio Code.
As a result, Microsoft Visual Studio Code will add the build to the dist directory of the Angular project. The build will have the sdk_remote_module_package name.
5. Add the request implemented using remote module to the Freedom UI page
- Repeat steps 2-7 of the procedure to implement custom UI component using remote module.
- Add a Button type component to the working area of the Freedom UI Designer.
- Click the
button in the action panel of the Freedom UI Designer. After you save the page settings, Creatio opens the source code of the Freedom UI page.
-
Change the clicked property value for the RefreshCurrentDateTimeButton element in the viewConfigDiff schema section to request configuration object.
- Enter the crt.UpdateCurrentTimeRequest request name in the request property.
- Enter the configuration object of parameters in the params property.
Complete source code of the page schema - Click Save on the Client Module Designer’s toolbar.
As a result, Creatio will add the request to the Freedom UI page.
Outcome of the example
To view the outcome of the example:
- Open the Requests app page and click Run app.
- Click New on the Requests app toolbar.
- Click Refresh date and time on the request page toolbar.
As a result, Creatio will display current date and time on the request page.

Creatio will update the current date and time when you click the Refresh date and time.

The handlers are implemented using the remote module created in Angular framework.