Custom request handler implemented using remote module

PDF

Medium

You can implement a custom request handler using remote module in Creatio version 8.0.8 Atlas and later.

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.
1. Open the some-request-name.request.ts file.
2. Inherit the BaseRequest class from the @creatio-devkit/common library.
3. Add the type and parameter of the request.
4. Import the required functionality from the libraries into the class.
5. Save the file.
some-request-name.request.ts file
```
/* Import the required functionality from the libraries. */
import { BaseRequest } from "@creatio-devkit/common";

export class SomeRequestNameRequest extends BaseRequest{
  /* The type and parameters of the request. */
  public someParameterName!: someParatemerType;
}
```
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.

some-service-name.service.ts file

/* Import the required functionality from the libraries. */
import { Injectable } from "@angular/core";

@Injectable({
  providedIn: 'root',
})
export class SomeServiceNameService {
  /* Receive data from external web service. */
  public someMethodName(someParameterName: someParatemerType): Promise<{
    someParameterName: Record<string, number>
  }> {
    /* Implement the business logic. */
    ...

    /* Return data from external web service. */
    return Promise.resolve({
      someParameterName: {'someParameterName': /* Receive data from external web service. */ }
    });
  }
}

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.

viewModelConfig schema section

viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...,
        /* The attribute that stores data received from the external web service. */
        "SomeAttributeName": {}
    }
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

Bind the caption property of the corresponding component to the $SomeAttributeName model attribute in the viewConfigDiff schema section.

viewConfigDiff schema section

viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "SomeComponentName",
        "values": {
            ...,
            /* Bind the SomeAttributeName attribute to the caption property. */
            "caption": "$SomeAttributeName",
            ...
        },
        ...
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

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.

some-handler-name.handler.ts file

/* Import the required functionality from the libraries. */
import { BaseRequestHandler, CrtRequestHandler } from "@creatio-devkit/common";
import { SomeServiceNameService } from "./some-service-name.service";
import { SomeRequestNameRequest } from "./some-request-name.request";

/* Add the CrtRequestHandler decorator to the SomeHandlerNameHandler class. */
@CrtRequestHandler({
    type: 'usr.SomeHandlerNameHandler',
    requestType: 'crt.SomeRequestNameRequest',
  })

export class SomeHandlerNameHandler extends BaseRequestHandler{
  constructor(private _someServiceNameService: SomeServiceNameService) {
    super();
  }
  public async handle(request: SomeRequestNameRequest): Promise<unknown> {
    const result = await this._someServiceNameService.someMethodName(request.someParameterName);
    const someParameter1Name = result.someParameterName[request.someParameterName] ?? 0
    /* Generate the value to display in the component of Freedom UI page. */
    request.$context['SomeAttributeName'] = someParameter1Name;
    return someParameter1Name;
  }
}

Create a custom handler that is executed when Creatio initializes a Freedom UI page.
1. 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.
2. Implement the handler.
  1. Open the some-handler1-name.handler.ts file.
  2. 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.
  3. Flag the SomeHandler1NameHandler class using the CrtRequestHandler decorator.
  4. Inherit the BaseRequestHandler class from the @creatio-devkit/common library.
  5. Implement the update of data received from the external web service when Creatio initializes the Freedom UI page.
  6. Import the required functionality from the libraries into the class.
  7. Save the file.
  some-handler1-name.handler.ts file
  /* Import the required functionality from the libraries. */ import { BaseRequest, BaseRequestHandler, CrtRequestHandler, HandlerChainService } from "@creatio-devkit/common"; import { SomeRequestNameRequest } from "./some-request-name.request"; /* Add the CrtRequestHandler decorator to the SomeHandler1NameHandler class. */ @CrtRequestHandler({ type: 'usr.SomeHandler1NameHandler', requestType: 'crt.HandleViewModelInitRequest', scopes: ['CodeOfSomeFreedomUIPage'], }) export class SomeHandler1NameHandler extends BaseRequestHandler{ public async handle(request: BaseRequest): Promise<unknown> { /* Update data received from the external web service when Creatio initializes the Freedom UI page. */ await HandlerChainService.instance.process({ type: 'crt.SomeRequestNameRequest', someParameterName: 'someParameterValue', $context: request.$context } as SomeRequestNameRequest); return this.next?.handle(request); } }

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.

app.module.ts file

/* Import the required functionality from the libraries. */
import { CrtModule } from '@creatio-devkit/common';
import { SomeHandlerNameHandler } from './some-handler-name.handler';
import { SomeHandler1NameHandler } from './some-handler1-name.handler';
...

@CrtModule({
  ...,
  /* Specify that SomeHandlerNameHandler and SomeHandler1NameHandler are request handlers. */
  requestHandlers: [
    SomeHandlerNameHandler,
    SomeHandler1NameHandler
  ],
})
...

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.

viewConfigDiff schema section

viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    {
        "operation": "insert",
        "name": "SomeButtonName",
        "values": {
            ...,
            "clicked": {
                /* Bind the sending of the custom request to the button click event. */
                "request": "crt.SomeRequestNameRequest",
                "params": {
                    "someParameterName": "someParameterValue"
                }
            }
        },
        ...
    },
    ...
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

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.
1. Open the update-current-time.request.ts file.
2. Inherit the BaseRequest class from the @creatio-devkit/common library.
3. Add the type and parameter of the request.
4. Import the required functionality from the libraries into the class.
5. Save the file.
update-current-time.request.ts file
```
/* Import the required functionality from the libraries. */
import { BaseRequest } from "@creatio-devkit/common";

export class UpdateCurrentTimeRequest extends BaseRequest{
  /* The type and parameters of the request. */
  public dateTime!: string;
}
```
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.

date-time.service.ts file

/* Import the required functionality from the libraries. */
import { formatDate } from "@angular/common";
import { Injectable } from "@angular/core";

@Injectable({
  providedIn: 'root',
})
export class DateTimeService {
  /* Receive current date and time. */
  public getCurrentDateTime(dateTime: string): Promise<{
    dateTime: Record<string, unknown>
  }> {
    /* Return current date and time. */
    return Promise.resolve({
      dateTime: {'dateTime': formatDate(new Date(), 'medium', 'en')}
    });
  }
}

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.
1. Set up the Freedom UI page.
  1. Use the Records & business processes template to create a custom Requests app. To do this, follow the instruction in the user documentation: Manage apps.
  2. Open the Requests form page page in the working area of the Requests app page.
  3. Add a Label type component to the working area of the Freedom UI Designer.
  4. 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.
  5. Add a CurrentDateTime attribute that stores data about the current date and time to the viewModelConfig schema section.
    viewModelConfig schema section
    
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{ "attributes": { ..., /* The attribute that stores the current date and time. */ "CurrentDateTime": {} } }/**SCHEMA_VIEW_MODEL_CONFIG*/,
  6. Bind the caption property of the Label element to the $CurrentDateTime model attribute in the viewConfigDiff schema section.
    viewConfigDiff schema section
    
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[ ..., { "operation": "insert", "name": "Label", "values": { ..., /* Bind the CurrentDateTime attribute to the caption property. */ "caption": "$CurrentDateTime", ... }, ... } ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
  7. Click Save on the Client Module Designer's toolbar.
2. 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.
3. Implement the handler.
  1. Open the update-current-time.handler.ts file.
  2. Add the configuration object that declares the request handler.
    - Set the type property to usr.UpdateCurrentTimeHandler.
    - Set the requestType property to crt.UpdateCurrentTimeRequest.
  3. Flag the UpdateCurrentTimeHandler class using the CrtRequestHandler decorator.
  4. Inherit the BaseRequestHandler class from the @creatio-devkit/common library.
  5. Implement the handling of the request result.
  6. Generate the value to display in the component of Freedom UI page.
  7. Import the required functionality from the libraries into the class.
  8. Save the file.
  update-current-time.handler.ts file
  /* Import the required functionality from the libraries. */ import { BaseRequestHandler, CrtRequestHandler } from "@creatio-devkit/common"; import { DateTimeService } from "./date-time.service"; import { UpdateCurrentTimeRequest } from "./update-current-time.request"; /* Add the CrtRequestHandler decorator to the UpdateCurrentTimeHandler class. */ @CrtRequestHandler({ type: 'usr.UpdateCurrentTimeHandler', requestType: 'crt.UpdateCurrentTimeRequest', }) export class UpdateCurrentTimeHandler extends BaseRequestHandler{ constructor(private _dateTimeService: DateTimeService) { super(); } public async handle(request: UpdateCurrentTimeRequest): Promise<unknown> { const result = await this._dateTimeService.getCurrentDateTime(request.dateTime); const dateTime = result.dateTime[request.dateTime] ?? 0 /* Generate the value to display in the component of Freedom UI page. */ request.$context['CurrentDateTime'] = dateTime; return dateTime; } }
Create a custom handler that is executed when Creatio initializes a Freedom UI page.
1. 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.
2. Implement the handler.
  1. Open the page-init-current-time.handler.ts file.
  2. 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.
  3. Flag the PageInitCurrentTimeHandler class using the CrtRequestHandler decorator.
  4. Inherit the BaseRequestHandler class from the @creatio-devkit/common library.
  5. Implement the update of the current date and time when Creatio initializes the Freedom UI page.
  6. Import the required functionality from the libraries into the class.
  7. Save the file.
  page-init-current-time.handler.ts file
  /* Import the required functionality from the libraries. */ import { BaseRequest, BaseRequestHandler, CrtRequestHandler, HandlerChainService } from "@creatio-devkit/common"; import { UpdateCurrentTimeRequest } from "./update-current-time.request"; /* Add the CrtRequestHandler decorator to the PageInitCurrentTimeHandler class. */ @CrtRequestHandler({ type: 'usr.PageInitCurrentTimeHandler', requestType: 'crt.HandleViewModelInitRequest', scopes: ['UsrRequests_FormPage'], }) export class PageInitCurrentTimeHandler extends BaseRequestHandler{ public async handle(request: BaseRequest): Promise<unknown> { /* Update the current date and time when Creatio initializes the Freedom UI page. */ await HandlerChainService.instance.process({ type: 'crt.UpdateCurrentTimeRequest', dateTime: 'dateTime', $context: request.$context } as UpdateCurrentTimeRequest); return this.next?.handle(request); } }

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.

app.module.ts file

/* Import the required functionality from the libraries. */
import { CrtModule } from '@creatio-devkit/common';
import { PageInitCurrentTimeHandler } from './page-init-current-time.handler';
import { UpdateCurrentTimeHandler } from './update-current-time.handler';
...

@CrtModule({
  ...,
  /* Specify that UpdateCurrentTimeHandler and PageInitCurrentTimeHandler are request handlers. */
  requestHandlers: [
    UpdateCurrentTimeHandler,
    PageInitCurrentTimeHandler
  ],
})
...

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.

viewConfigDiff schema section

viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    {
        "operation": "insert",
        "name": "RefreshCurrentDateTimeButton",
        "values": {
            ...,
            "clicked": {
                /* Bind the sending of the custom crt.UpdateCurrentTimeRequest request to the button click event. */
                "request": "crt.UpdateCurrentTimeRequest",
                "params": {
                    "dateTime": "dateTime"
                }
            }
        },
        ...
    },
    ...
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Complete source code of the page schema

UsrRequests_FormPage

define("UsrRequests_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "name": "Feed",
                "values": {
                    "dataSourceName": "PDS",
                    "entitySchemaName": "UsrRequests"
                }
            },
            {
                "operation": "merge",
                "name": "AttachmentList",
                "values": {
                    "columns": [
                        {
                            "id": "df093806-a8ed-40ae-979c-770bec690b3c",
                            "code": "AttachmentListDS_Name",
                            "caption": "#ResourceString(AttachmentListDS_Name)#",
                            "dataValueType": 28,
                            "width": 200
                        }
                    ]
                }
            },
            {
                "operation": "insert",
                "name": "RefreshCurrentDateTimeButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(RefreshCurrentDateTimeButton_caption)#",
                    "color": "accent",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    "visible": true,
                    "clicked": {
                         /* Bind the sending of the custom crt.UpdateCurrentTimeRequest request to the button click event. */
                        "request": "crt.UpdateCurrentTimeRequest",
                        "params": {
                            "dateTime": "dateTime"
                        }
                    }
                },
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "UsrName",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "label": "$Resources.Strings.UsrName",
                    "control": "$UsrName",
                    "labelPosition": "auto"
                },
                "parentName": "SideAreaProfileContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "Label",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    /* Bind the CurrentDateTime attribute to the caption property. */
                    "caption": "$CurrentDateTime",
                    "labelType": "body",
                    "labelThickness": "default",
                    "labelEllipsis": false,
                    "labelColor": "auto",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start",
                    "visible": true
                },
                "parentName": "SideAreaProfileContainer",
                "propertyName": "items",
                "index": 1
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "UsrName": {
                    "modelConfig": {
                        "path": "PDS.UsrName"
                    }
                },
                "Id": {
                    "modelConfig": {
                        "path": "PDS.Id"
                    }
                },
                "CurrentDateTime": {}
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrRequests"
                    },
                    "scope": "page"
                },
                "AttachmentListDS": {
                    "type": "crt.EntityDataSource",
                    "scope": "viewElement",
                    "config": {
                        "entitySchemaName": "SysFile",
                        "attributes": {
                            "Name": {
                                "path": "Name"
                            }
                        }
                    }
                }
            },
            "primaryDataSourceName": "PDS"
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

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.

Resources

*.zip archive that contains the implemented Freedom UI app

Angular project that contains the implemented example

Custom request handler implemented using remote module

1. Create an Angular project to develop a custom request handler using remote module

2. Create a custom request using remote module

3. Create a custom service using remote module

4. Create custom request handlers using remote module

5. 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

2. Create a custom request using remote module

3. Create a custom service using remote module

4. Create custom request handlers using remote module

5. Add the request implemented using remote module to the Freedom UI page

Outcome of the example

Did you find this information useful?