BRAND SETUP GUIDE
This document includes following topics:
Branding
Branding describes the process of applying a product or company brand to the user interface. One can regard it as "theming with the goal to represent a certain product/company on the user interface". So the typical changes are the same as theming, with the only difference that certain visual styles and entities are directly derived from a product or company brand.
Implementation
Branding in OBDX is implemented in terms of changing CSS and changing the image resources.
CSS compilation is done using node-sass [NodeJS package].
Largely speaking, when a brand is created, the variables taken from user input provide the overriding variables for the scss which is then compiled to CSS by node-sass. The image resources are taken as zip file and extracted alongside brand artifacts.
There are two basic requirements:
- Node HTTP Server to generate brand artifacts.
- HTTP Server to serve brand artifacts*.
*Not needed if Node HTTP server is on same setup as OHS.In this case, OHS can be used to serve the artifacts.
There are two cases:
- The Node HTTP Server is on same setup as OHS. [Recommended]
- The Node HTTP Server is on different setup from OHS.
Out of these, the first option is recommended as it enables sharing of SCSS resources and eliminates the need of a separate HTTP server required to serve brand artifacts.
Handling Assets
Assets upload is for uploading image assets for branding purposes. For adding a new image asset to override the default image asset available, following steps need to be followed.
- Whitelist the image assets as specified in framework/js/constants/brand-assets.js. Keep in mind that only the images whitelisted in above file can be overridden via branding.
- Place the changed files which you wish to update in the same directory structure as images folder. Create a zip file at the root.
For example, if you wish to override the bank logo, the corresponding image file is images/common/logo.svg
Related section in framework/js/constants/brand-assets.js will look like
And folder structure of the zip file would be, assuming zip is named images.zip (zip name is not an issue).