Hi there,
I am trying to create a mobile app which has custom buttons which, when pressed, record a timestamp. I have created a new workplace in the mobile application wizard and have added the section where I want to include these buttons. When I generate this section, four client modules are created as shown in the image attached. Can I configure these custom buttons in one of these client modules? Some documentation recommends configuration in MobileFUI... client modules but I have no MobileFUI client modules for my new section.
Thanks
Like
Hello,
The process of adding a new button in the mobile app involves creating your own remote module, basically, the list of things you need to do is following:
- 1) Create TypeScript project for remote module.
- 2) Create a custom request in remote module.
- 3) Create custom request handlers using remote module.
- 4) Register handler in remote module.
- 5) Build project and upload changes to Creatio.
- 6) Add button to the page using metadata.
- 7) Check functionality.
- Also, you need to add and enable EnableMobileSDK feature in the features section.
An example of adding a custom module can be found in this article. In your case, the code of the remote module should look like this: -
import { BaseRequest, BaseRequestHandler, CrtModule, CrtRequestHandler, Logger, CrtRequest, ModalPresenter, bootstrapCrtModule, DoBootstrap, } from '@creatio/mobile-common'; @CrtRequest({ type: 'crt.MyButtonRequest', }) export class MyButtonRequest extends BaseRequest { public message?: string; } @CrtRequestHandler({ requestType: 'crt.MyButtonRequest', type: 'usr.MyButtonRequest', scopes: ['UsrMobileUsrUserModuleRecordPageSettingsDefaultWorkplace_Root'], }) export class UsrMyButtonRequestHandler extends BaseRequestHandler<MyButtonRequest> { public async handle(request: BaseRequest): Promise<unknown> { var message: string | undefined = (request as MyButtonRequest).message; if (message) { Logger.console('Request message: ' + message); ModalPresenter.showSnackBar('Message title', message); } return this.next?.handle(request); } } @CrtModule({ requestHandlers: [ UsrMyButtonRequestHandler, ], }) export class UsrModule implements DoBootstrap { bootstrap(): void { bootstrapCrtModule('UsrModule', UsrModule); } }
The difference with the article above is a way to add a button. In order to do so in one of the schemas you showed (depending on where you want to locate a button) you need to add a code of the button to a viewConfigDiff:
{ "operation": "insert", "name": "settings", "values": { "entitySchemaName": "UsrUserModule", "details": [], "columnSets": [], "localizableStrings": { "SocialMessageDetailCaptionUsrUserModule_caption": "Feed", "AttachmentsDetailCaptionUsrUserModule_caption": "Attachments", "primaryColumnSetUsrUserModule_caption": "General information" }, "settingsType": "RecordPage", "operation": "insert", "viewConfigDiff": "[{\"operation\": \"insert\", \"name\": \"MyButton\", \"parentName\": \"UsrUserModule_PrimaryTab_Body_primaryColumnSet\", \"propertyName\":\"items\", \"values\": {\"type\":\"crt.Button\",\"caption\": \"Click here\", \"color\":\"primary\",\"clicked\":{\"request\": \"crt.MyButtonRequest\", \"params\": { \"message\": \"Some test message\" }}}}]" } }