Mobile app - MobileFUI client module

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. 1) Create TypeScript project for remote module.
2. 2) Create a custom request in remote module.
3. 3) Create custom request handlers using remote module.
4. 4) Register handler in remote module.
5. 5) Build project and upload changes to Creatio.
6. 6) Add button to the page using metadata.
7. 7) Check functionality.
8. 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:

9. 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\" }}}}]"
	}
}

Dmytro Vovchenko,

Thank you!