Customizing the Mobile Application User Interface Appearance

The color scheme used in the Archibus Mobile applications is configured using SASS variables that are contained in the ../schema/ab-products/common/mobile/src/touch/resources/themes/stylesheets/sencha-touch/boston/var/_Class.scss file.

To modify any of the color settings, simply change the color values of the SASS variables then use compass to build the app.css file for the application.

Adding Customized Branding Elements to the Application Screen

Custom branding elements can be added to the Archibus Mobile application launch screen. Adding custom branding elements requires changes to be made to the . ./schema/ab-products/common/mobile/src/AppLauncher/view/AppContainer.js file.

To add a custom title bar:

1. Set the docked configuration of the Archibus title bar to ‘bottom’
2. Add a CSS class containing the logo to the ../src/AppLauncher/resources/sass/app.scss file
3. Add a title bar to the AppContainer.js file.
4. Build the app.

Ext.define('AppLauncher.view.AppContainer', { extend: 'Ext.Container', requires: 'AppLauncher.view.AppList', config: { cls: 'panelBackground', layout: 'fit', items: [ { xtype: 'titlebar', docked: 'top', title: 'Company Name', style: 'background-color:#fff;font-size:2em', items: [ { // Company Logo xtype: 'container', cls: 'companylogo', // CSS class containing the custom logo, added to the ../resources/sass/app.scss file height: '126px', width: '270px' } ] }, { xtype: 'titlebar', style: 'background-color:#0F407A', cls: 'ab-titlebar', docked: 'bottom', // Docked to the bottom of the view when a custom title bar is added. height: Ext.os.is.Phone ? '45px':'80px', items: [ { xtype: 'container', cls: 'ailogo', height: Ext.os.is.Phone ? '40px':'59px', width: Ext.os.is.Phone ? '200px':'360px', itemId: 'ailogo' }, { xtype: 'button', align: 'right', iconCls: 'settings', action: 'displayPreferences' } ] }, { xtype: 'appList', margin: '6px 0px 0px 0px' } ] } });