Adding custom CSS to a mobile application

There are 2 ways on how to add a custom CSS to a mobile application. The first one works globally. The second one can work enter globally or locally in a specific section. 

Global CSS

1. Create a new module in a "Configuration" section. I named it "UsrMobileStyle". Add needed CSS into a "Less" tab for the module.

http://prntscr.com/ofbv8p

2. Open "Mobile application wizard". Change something and save changes. The system will create a new replacing client module for "Manifest". Find the module called "MobileApplicationManifestDefaultWorkplace" in the configuration section.

3. Add the "CustomSchemas" array with the module that was created in the first step to the manifest in the following way:

{

    "SyncOptions": {

        "SysSettingsImportConfig": [],

        "ModelDataImportConfig": []

    },

    "Modules": {},

    "Models": {},

    "CustomSchemas": [

        "UsrMobileStyle"

    ]

}

http://prntscr.com/ofbwh4

4. Save changes, restart the application pool, enjoy.

If it's a cloud application, please email to support@bpmonline.com and ask to restart the application pool. 

If it's a local application, please use the "Mobile application emulator" in order to check the changes

Local CSS. 

The same idea. Please find more information in the article by the link below.

https://community.bpmonline.com/questions/reg-validations-mobile-app

 

Like 0

Like

Share

4 comments

I tried Global CSS and its reflected except home screen which appearing just after successful login. Is it possible to apply custom css on home screen?

Muhammad Shajiuddin,

It's called "login page". Unfortunately, it's not possible to modify a mobile login page. 

Eugene Podkovka,

Please confirm the login page is exist as separate html file which is embedded with mobile app or something else? can we modify it locally?

The login page is an html file that is embedded in mobile app and can't be customized.

Show all comments