Maintaining Application Style Sheets

The CSS may need to be updated as apps are created and updated. The SASS definitions for CSS used in framework classes should be placed in the ../src/Common/resources/sass/mobileclient/_shared.scss file. SASS definitions for app components should be included in the ../src/[Application]/resources/sass/app.scss file.

Managing Icons

The Archibus Mobile apps use icon fonts to render the icons. The icon characters are mapped to icon class names in the ../schema/ab-products/common/mobile/src/touch/resources/themes/stylesheets/sencha-touch/boston/src/_Class.scss file.

The icon source files used in the Archibus apps are located in the ../schema/ab-products/common/mobile/src/Common/resources/sass/fonts/abicons folder.

Adding a Custom Icon

Icon fonts are generated from SVG files. You can add a custom icon to an app by converting the SVG file to an icon font. There are many programs available that will convert a SVG file to an icon. One popular app is the icomoon app available at https://icomoon.io/app.

The following are the general steps required to add a new icon to the app using the icomoon app.

  1. Import ../Common/resources/sass/fonts/abicons/abicon.svg into the icomoon app.
  2. Add your SVG file to the library
  3. Set the character code and icon properties
  4. Generate the font using abicon as the font name
  5. Replace the files in the ../Common/resources/sass/fonts/abicons folder with the generated font files.
  6. Include the icon in the Class.scss file.