Mobile app - MobileFUI client module

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 1

Like

2 comments

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!

Show all comments