Version: 8.0

Open a record page from a custom handler

Level: intermediate

Example

Add the following buttons to the record page of the custom Handler Chain Service section:

Edit contact. Must open the page of the contact that has the specified ID.
Create request. Must open the page of a new request in the custom Requests section. The Name field must be populated with the "New request" value.

Records open similarly in Creatio versions 7.X and 8.X. When Creatio adds a new record, you can pass the needed default column values.

1. Set up the UI of the pages

Set up the UI of the custom Requests section page. Create a custom Requests app based on the Records & business processes template. To do this, follow the guide in the user documentation: Create a custom app.

The Requests form page page includes the Name field by default.
Set up the UI of the custom Handler Chain Service section page.
1. Click on the Requests app page.
2. Create a custom Handler Chain Service app based on the Records & business processes template. To do this, follow the guide in the user documentation: Create a custom app.
3. Open the Handler Chain Service form page page in the working area of the Handler Chain Service app page.
4. Delete the Name field the Handler Chain Service form page page includes by default.
5. Add a button that opens the page of the contact that has the specified ID.
  1. Add a Button type component to the toolbar of the Freedom UI Designer.
  2. Click in the action panel of the Freedom UI Designer and set the Title button property in the setup area to "Edit contact."
6. Add a button that opens the page of a new request in the custom Requests section.
  1. Add a Button type component to the toolbar of the Freedom UI Designer.
  2. Click in the action panel of the Freedom UI Designer and fill out the button properties in the setup area.
    - Set Title to "Create request."
    - Select "Primary" in the Style property.
7. Click 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.

2. Set up the way record pages open

Configure the business logic in the Client Module Designer. For this example, set up the way record pages open.

Enable the sdk.HandlerChainService service that opens pages. To do this, add @creatio-devkit/common to the AMD module as a dependency.

AMD module dependencies
/* Declare the AMD module. */
define("UsrAppHandlerChainSe_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
        ...
    };
});

Change the clicked property value in the viewConfigDiff schema section to the following:

usr.EditContactRequest for the EditContactButton element
usr.CreateUsrRequestRequest for the CreateRequestButton element

The clicked property handles the action executed on button click.

viewConfigDiff schema section
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    {
        "operation": "insert",
        "name": "EditContactButton",
        "values": {
            ...,
            "clicked": {
                /* Bind the sending of the custom usr.EditContactRequest query to the clicked button event. */
                "request": "usr.EditContactRequest"
            }
        },
        ...
    },
    {
        "operation": "insert",
        "name": "CreateRequestButton",
        "values": {
            ...,
            "clicked": {
                /* Bind the sending of the custom usr.CreateUsrRequestRequest query to the clicked button event. */
                "request": "usr.CreateUsrRequestRequest"
            }
        },
        ...
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Implement custom query handlers in the handlers schema section:

usr.EditContactRequest
1. Retrieve the instance of the sdk.HandlerChainService singleton service that opens pages.
2. Send the crt.UpdateRecordRequest system query that opens the page of the contact that has the specified ID. You can view the ID of the contact whose page to open in the browser address bar. For this example, open the page of the Alexander Wilson contact whose ID is "98dae6f4-70ae-4f4b-9db5-e4fcb659ef19."
usr.CreateUsrRequestRequest
1. Retrieve the instance of the sdk.HandlerChainService singleton service that opens pages.
2. Send the crt.CreateRecordRequest system query that opens the page of a new request. Populate the Name field with the "New request" value.

handlers schema section
handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "usr.EditContactRequest",
        /* Implement the custom query handler. */
        handler: async (request, next) => {
            /* Retrieve the instance of the singleton service that opens pages. */
            const handlerChain = sdk.HandlerChainService.instance;
            /* Send the crt.UpdateRecordRequest system query that opens the page of the contact that has the specified ID. */
            await handlerChain.process({
                type: 'crt.UpdateRecordRequest',
                entityName: 'Contact',
                recordId: '98dae6f4-70ae-4f4b-9db5-e4fcb659ef19',
                $context: request.$context
            });
            /* Call the next handler if it exists and return its result. */
            return next?.handle(request);
        }
    },
    {
        request: "usr.CreateUsrRequestRequest",
        /* Implement the custom query handler. */
        handler: async (request, next) => {
            /* Retrieve the instance of the singleton service that opens pages. */
            const handlerChain = sdk.HandlerChainService.instance;
            /* Send the crt.CreateRecordRequest system query that opens the page of a new request. Populate the [Name] field with the specified value. */
            await handlerChain.process({
                type: 'crt.CreateRecordRequest',
                entityName: 'UsrAppRequests',
                        defaultValues: [{
                            attributeName: 'UsrName',
                            value: 'New request'
                }],
                $context: request.$context
            });
            /* Call the next handler if it exists and return its result. */
            return next?.handle(request);
        }
    }
] /**SCHEMA_HANDLERS*/,

Click Save on the Client Module Designer's toolbar.

Outcome of the example

To view the outcome of the example that opens the contact page:

Open the Handler Chain Service app page and click Run app.
Click New on the Handler Chain Service app toolbar.
Click Edit contact on the record page of the custom Handler Chain Service section.

As a result, Creatio will open the page of the Alexander Wilson contact whose ID is "98dae6f4-70ae-4f4b-9db5-e4fcb659ef19."

To view the outcome of the example that opens the request page and populates the field:

Refresh the Handler Chain Service app page.
Click New on the Handler Chain Service app toolbar.
Click Create request on the record page of the custom Handler Chain Service section.

As a result, Creatio will open the page of a new request in the custom Requests section. The Name field will be populated with the "New request" value.

Source codes

UsrAppHandlerChainSe_FormPage
/* Declare the AMD module. */
define("UsrAppHandlerChainSe_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "insert",
                "name": "EditContactButton",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Button",
                    "caption": "#ResourceString(EditContactButton_caption)#",
                    "color": "default",
                    "disabled": false,
                    "clicked": {
                        /* Bind the sending of the custom usr.EditContactRequest query to the clicked button event. */
                        "request": "usr.EditContactRequest"
                    }
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "CreateRequestButton",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Button",
                    "caption": "#ResourceString(CreateRequestButton_caption)#",
                    "color": "primary",
                    "disabled": false,
                    "clicked": {
                        /* Bind the sending of the custom usr.CreateUsrRequestRequest query to the clicked button event. */
                        "request": "usr.CreateUsrRequestRequest"
                    }
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 1
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "Id": {
                    "modelConfigDiff": {
                        "path": "PDS.Id"
                    }
                }
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppHandlerChainSe"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "usr.EditContactRequest",
                /* Implement the custom query handler. */
                handler: async (request, next) => {
                    /* Retrieve the instance of the singleton service that opens pages. */
                    const handlerChain = sdk.HandlerChainService.instance;
                    /* Send the crt.UpdateRecordRequest system query that opens the page of the contact that has the specified ID. */
                    await handlerChain.process({
                        type: 'crt.UpdateRecordRequest',
                        entityName: 'Contact',
                        recordId: '98dae6f4-70ae-4f4b-9db5-e4fcb659ef19',
                        $context: request.$context
                    });
                    /* Call the next handler if it exists and return its result. */
                    return next?.handle(request);
                }
            },
            {
                request: "usr.CreateUsrRequestRequest",
                /* Implement the custom query handler. */
                handler: async (request, next) => {
                    /* Retrieve the instance of the singleton service that opens pages. */
                    const handlerChain = sdk.HandlerChainService.instance;
                    /* Send the crt.CreateRecordRequest system query that opens the page of a new request. Populate the [Name] field with the specified value. */
                    await handlerChain.process({
                        type: 'crt.CreateRecordRequest',
                        entityName: 'UsrAppRequests',
                        defaultValues: [{
                            attributeName: 'UsrName',
                            value: 'New request'
                        }],
                        $context: request.$context
                    });
                    /* Call the next handler if it exists and return its result. */
                    return next?.handle(request);
                }
            }
        ] /**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

Resources

*.zip archive that contains packages with example implementation

1. Set up the UI of the pages​

2. Set up the way record pages open​

Outcome of the example​

Source codes​

Resources​

1. Set up the UI of the pages

2. Set up the way record pages open

Outcome of the example

Source codes

Resources