Version: 8.2

Implement a custom request handler using remote module in Mobile Creatio

Level: advanced

note

This functionality is available for Creatio 8.2.2 and later, Mobile Creatio 8.2.6 and later.

To implement the example:

Create a TypeScript project. Read more >>>
Create a custom request. Read more >>>
Create a custom request handler. Read more >>>
Add the custom request handler to the Freedom UI page. Read more >>>

Example

Add a Change to supplier button to the contact page in Mobile Creatio. The button must send the custom request handler and change the Type field value to "Supplier."

Implement a request handler using a remote module created in TypeScript project.

1. Create a TypeScript project

Install or update Node.js® and npm package manager if needed. Download the file.

Learn more: Downloading and installing Node.js and npm (official npm Docs documentation).
Download and unpack the *.zip archive. Download.
Change the directory name of the TypeScript project to the name of the package to transfer the remote module.

For this example, change the directory name of the TypeScript project to the handler_in_remote_module_mobile.
Open the project in Microsoft Visual Studio Code.
Install the npm modules. To do this, run the npm install command at the command line terminal of Microsoft Visual Studio Code.
Update the @creatio/mobile-common library. To do this, run the npm update @creatio/mobile-common command at the command line terminal of Microsoft Visual Studio Code.

As a result, Microsoft Visual Studio Code will create a TypeScript project to develop a custom request handler using remote module.

2. Create a custom request

Open the index.ts file.
Inherit the BaseRequest class from the @creatio/mobile-common library.
Import the required functionality from the libraries into the class.
Save the file.

index.ts file
/* Import the required functionality from the libraries. */
import { 
    BaseRequest,
    CrtRequest
} from "@creatio/mobile-common";

/* Add the "CrtRequest" decorator to the "ChangeContactTypeToSupplierRequest" class. */
@CrtRequest({
    type: 'usr.ChangeContactTypeToSupplierRequest'
})

export class ChangeContactTypeToSupplierRequest extends BaseRequest {}

3. Create a custom request handler

Implement a custom request handler that changes the Type field value on a contact page in Mobile Creatio to "Supplier."
1. Open the index.ts file.
2. Add the configuration object that declares the request handler.
  - Set type property to usr.ChangeContactTypeToSupplierRequestHandler. The type property is the type of handler.
  - Set requestType property to usr.ChangeContactTypeToSupplierRequest. The type property is the type of request to execute the handler specified in the type property.
3. Flag the ChangeContactTypeToSupplierRequestHandler class using the CrtRequestHandler decorator.
4. Inherit the BaseRequestHandler class from the @creatio-devkit/common library.
5. Find the ID of the "Supplier" value in the Contact type lookup. For this example, the ID is "ac278ef3-e63f-48d9-ba34-7c52e92fecfe."
6. Generate the value to display on the Freedom UI page.
7. Import the required functionality from the libraries into the class.
8. Save the file.
index.ts file
```
/* Import the required functionality from the libraries. */
import {
    BaseRequestHandler,
    CrtRequestHandler
} from "@creatio/mobile-common";

/* Add the "CrtRequestHandler" decorator to the "ChangeContactTypeToSupplierRequestHandler" class. */
@CrtRequestHandler({
    requestType: 'usr.ChangeContactTypeToSupplierRequest',
    type: 'usr.ChangeContactTypeToSupplierRequestHandler'
})

export class ChangeContactTypeToSupplierRequestHandler extends BaseRequestHandler<ChangeContactTypeToSupplierRequest> {

    public async handle(request: ChangeContactTypeToSupplierRequest): Promise<unknown> {

        /* Generate the value to display on the Freedom UI page. */
        request.$context['Type'] = 'ac278ef3-e63f-48d9-ba34-7c52e92fecfe';
        return this.next?.handle(request);

    }
}
```

Register the request handler.

Open the index.ts file.
Add the ChangeContactTypeToSupplierRequestHandler handler to the requestHandlers section in the CrtModule decorator.
Import the required functionality from the libraries into the class.
Save the file.

index.ts file
/* Import the required functionality from the libraries. */
import {
    CrtModule,
    bootstrapCrtModule,
    DoBootstrap
} from '@creatio/mobile-common';
...

@CrtModule({
    ...,
    /* Specify that "ChangeContactTypeToSupplierRequestHandler" is request handler. */
    requestHandlers: [
        ChangeContactTypeToSupplierRequestHandler
    ],
})

export class SdkRemoteModuleInMobileApp implements DoBootstrap {
    bootstrap(): void {
        bootstrapCrtModule('SdkRemoteModuleInMobileApp', SdkRemoteModuleInMobileApp);
    }
}

Build the project.
1. Run the npm run build command at the command line terminal of Microsoft Visual Studio Code.
2. Open the package.json file.
3. Click → build command.

As a result, Microsoft Visual Studio Code will add the main.js build file to the TypeScript project's directory that is specified in the webpack.config.js file → baseConfig configuration object → output configuration object → path property. Out of the box, Microsoft Visual Studio Code adds the build files to the ../ts_sdk_template_module/out/mobile/SomeMainAppClass project directory.

4. Add the custom request handler to the Freedom UI page

Ensure the EnableMobileSDK additional feature is enabled. Instructions: Change the status of an additional feature for all users.
Open the Customer 360 app in the No-Code Designer.
Open the Package settings tab in the No-Code Designer. To do this, click in the top right → "Application management" → "Application Hub" → Customer 360 app → "Package settings."
Create a user-made package to add the schema. To do this, click → Create new package → fill out the package properties → Save.

For this example, create the sdkChangeContactTypeMobile user-made package.
Change the current package. Instructions: Change the current package.

For this example, change the current package to sdkChangeContactTypeMobile user-made package.
Enable the file system development mode. Instructions: Set up Creatio to work with the file system.
Download packages to the file system using Creatio IDE.
1. Open the Configuration section. Instructions: Open the Configuration section.
2. Click Actions → File system development mode group → Download packages to file system.
3. Go to the ../Terrasoft.WebApp/Terrasoft.Configuration/Pkg/sdkChangeContactTypeMobile/Files file system directory.
4. Create a /src/mobile/SdkRemoteModuleInMobileApp directory.
5. Copy the main.js build file from the ../ts_sdk_template_module/out/mobile/SdkRemoteModuleInMobileApp project directory to the ../Terrasoft.WebApp/Terrasoft.Configuration/Pkg/sdkChangeContactTypeMobile/Files/src/mobile/SdkRemoteModuleInMobileApp directory.
6. Click Actions → File system development mode group → Update packages from file system.
7. Compile the configuration. Instructions: Compile the configuration.
Add the schemas that configure manifest and page settings of Mobile Creatio section to the user-made package. Instructions: Add the schemas that configure manifest and page settings of Mobile Creatio section.

For this example, select the Contacts section in the section list.

As a result, the MobileApplicationManifestDefaultWorkplace and MobileFUIContactRecordPageSettingsDefaultWorkplace schemas will be added to the sdkChangeContactTypeMobile user-made package.
Define the position of the button. Instructions: Define the position of the Freedom UI component.

For this example, the button will be added to the structure item whose name property is set to Contact_PrimaryTab_Body_infoColumnSet.

Configure the button. Instructions: Configure the Freedom UI component.

For this example, the resulting configuration object that configures the button is as follows.

viewConfigDiff schema section
"viewConfigDiff": "[{\"operation\":\"insert\",\"name\":\"UsrChangeContactTypeButton\",\"parentName\":\"Contact_PrimaryTab_Body_infoColumnSet\",\"index\":1,\"propertyName\":\"items\",\"values\":{\"type\":\"crt.Button\",\"caption\":\"Change to supplier\",\"size\":\"medium\",\"clicked\":{\"request\":\"usr.ChangeContactTypeToSupplierRequest\"}}}]"

Add the button to the Freedom UI page. Instructions: Add the Freedom UI component to the Freedom UI page.

For this example, add the button to the MobileFUIContactRecordPageSettingsDefaultWorkplace Freedom UI page schema.

MobileFUIContactRecordPageSettingsDefaultWorkplace schema
[
    {
        "operation": "merge",
        "name": "settings",
        "values": {
            "localizableStrings": {
                "primaryColumnSetContact_caption": "Primary column set",
                "profileColumnSetContact_caption": "Profile",
                "infoColumnSetContact_caption": "Contact info",
                "ContactCareerDetailV2EmbeddedDetailContact_caption": "Job experience",
                "ContactAddressDetailV2EmbeddedDetailContact_caption": "Addresses",
                "ContactCommunicationDetailEmbeddedDetailContact_caption": "Communication options",
                "ContactTimelineTab_caption": "Timeline",
                "TabFeed_caption": "Feed",
                "TabAttachments_caption": "Attachments"
            },
            "viewConfigDiff": "[{\"operation\":\"insert\",\"name\":\"UsrChangeContactTypeButton\",\"parentName\":\"Contact_PrimaryTab_Body_infoColumnSet\",\"index\":1,\"propertyName\":\"items\",\"values\":{\"type\":\"crt.Button\",\"caption\":\"Change to supplier\",\"size\":\"medium\",\"clicked\":{\"request\":\"usr.ChangeContactTypeToSupplierRequest\"}}}]"
        }
    }
]

Save the changes.

As a result, the Change to supplier button will be added to the contact page.

View the result

Synchronize Mobile Creatio with the main Creatio app.
1. Run Mobile Creatio using the emulator created in Android Studio.
2. Log in to Mobile Creatio using the same user credentials as the main Creatio app.
3. Open the Settings page. To do this, click .
4. Go to the Synchronization block.
5. Click Synchronize.
Synchronize the emulator file system if needed. To do this, go to the Device Explorer tab → right-click an arbitrary directory → Synchronize.
Open the Contacts section.
Open a contact whose Type field value differs from the "Supplier." For example, "Alexander Wilson."
Click Change to supplier.

As a result, the Change to supplier button on the contact page in Mobile Creatio will send the custom request handler and change the Type field value to "Supplier." View the result >>>

The handler is implemented using the remote module created in TypeScript project.

Source code

index.ts file
MobileFUIContactRecordPageSettingsDefaultWorkplace

/* Import the required functionality from the libraries. */
import {
    BaseRequestHandler,
    CrtModule,
    CrtRequestHandler,
    BaseRequest,
    bootstrapCrtModule,
    DoBootstrap,
    CrtRequest
} from '@creatio/mobile-common';

/* Add the "CrtRequest" decorator to the "ChangeContactTypeToSupplierRequest" class. */
@CrtRequest({
    type: 'usr.ChangeContactTypeToSupplierRequest'
})
export class ChangeContactTypeToSupplierRequest extends BaseRequest {}

/* Add the "CrtRequestHandler" decorator to the "ChangeContactTypeToSupplierRequestHandler" class. */
@CrtRequestHandler({
    requestType: 'usr.ChangeContactTypeToSupplierRequest',
    type: 'usr.ChangeContactTypeToSupplierRequestHandler'
})

export class ChangeContactTypeToSupplierRequestHandler extends BaseRequestHandler<ChangeContactTypeToSupplierRequest> {

    public async handle(request: ChangeContactTypeToSupplierRequest): Promise<unknown> {

        /* Generate the value to display on the Freedom UI page. */
        request.$context['Type'] = 'ac278ef3-e63f-48d9-ba34-7c52e92fecfe';
        return this.next?.handle(request);
    }
}

@CrtModule({
    /* Specify that "ChangeContactTypeToSupplierRequestHandler" is request handler. */
    requestHandlers: [
        ChangeContactTypeToSupplierRequestHandler
    ],
})
export class SdkRemoteModuleInMobileApp implements DoBootstrap {
    bootstrap(): void {
        bootstrapCrtModule('SdkRemoteModuleInMobileApp', SdkRemoteModuleInMobileApp);
    }
}

[
    {
        "operation": "merge",
        "name": "settings",
        "values": {
            "localizableStrings": {
                "primaryColumnSetContact_caption": "Primary column set",
                "profileColumnSetContact_caption": "Profile",
                "infoColumnSetContact_caption": "Contact info",
                "ContactCareerDetailV2EmbeddedDetailContact_caption": "Job experience",
                "ContactAddressDetailV2EmbeddedDetailContact_caption": "Addresses",
                "ContactCommunicationDetailEmbeddedDetailContact_caption": "Communication options",
                "ContactTimelineTab_caption": "Timeline",
                "TabFeed_caption": "Feed",
                "TabAttachments_caption": "Attachments"
            },
            "viewConfigDiff": "[{\"operation\":\"insert\",\"name\":\"UsrChangeContactTypeButton\",\"parentName\":\"Contact_PrimaryTab_Body_infoColumnSet\",\"index\":1,\"propertyName\":\"items\",\"values\":{\"type\":\"crt.Button\",\"caption\":\"Change to supplier\",\"size\":\"medium\",\"clicked\":{\"request\":\"usr.ChangeContactTypeToSupplierRequest\"}}}]"
        }
    }
]

Resources

*.zip archive that contains the implemented Freedom UI app for Mobile Creatio

TypeScript project that contains the implemented example

1. Create a TypeScript project​

2. Create a custom request​

3. Create a custom request handler​

4. Add the custom request handler to the Freedom UI page​

View the result​

Source code​

Resources​