2.3. Branding the Business Central Application

The Business Central web application enables you to customize its look and feel by allowing you to override some of its default styles. The ability to customize the Business Central branding allows you to get a consistent appearance across all your applications thereby improving the user experience. It also helps in cases when multiple teams are using the application. Each team can develop their own customized user interface. The customizable elements are built using cascading style sheets (CSS), images, and HTML files, providing an easy and flexible approach to customize without having to recompile the code.
You can modify the following elements in the Business Central application to make it inline with your company’s brand:
  • Login screen
    You can customize the following attributes of the Business Central login screen:
    • The background image
    • The company logo
    • The application logo
  • Application header
    You can customize the following attributes of the Business Central application header:
    • The Business Central header containing the title and banner logo
  • Help pop-up windows
    You can customize the following attributes of the splash help pop-up windows:
    • The splash help images
    • The label text

2.3.1. Customizing Business Central Login Page

Procedure 2.2. Changing the Business Central Login Page Background Image

  1. Start the EAP server and open http://localhost:8080/business-central in a web browser.
  2. Copy the new background image to the $EAP_HOME/standalone/deployments/business-central.war/images directory in your JBoss BPM Suite installation.
  3. Navigate to $EAP_HOME/standalone/deployments/business-central.war/styles directory and open the login-screen.css file in a text editor.
  4. In the login-screen.css file, provide the location of your new background image in the following background-image attribute. 
    background-image: url("../images/login-screen-background.jpg");
    The background-image attribute points to the default login-screen-background.jpg image.
    In addition to the background image, you can modify other attributes such as image size, position, and background color in the login-screen.css file.
Refresh the Business Central login page to view your changes.

Procedure 2.3. Changing the Business Central Login Page Company Logo and Project Logo

  1. Start the EAP server and open http://localhost:8080/business-central in a web browser.
  2. Navigate to the $EAP_HOME/standalone/deployments/business-central.war/images directory in your JBoss BPM Suite installation.
  3. Replace the default image login-screen-logo.png with a new one. This is the company logo that appears on the top right hand corner of the login page.
  4. Replace the default image RH_JBoss_BPMS_Logo.pngRH_JBoss_BRMS_Logo.png with a new one. This is the project logo that appears on the center left hand side of the login page.
Refresh the Business Central login page to view your changes.

2.3.2. Customizing Business Central Application Header

Procedure 2.4. Changing the Business Central Application Header (Banner)

  1. Start the EAP server and open http://localhost:8080/business-central in a web browser.
  2. Log in to the Business Central application with your user credentials.
  3. Copy your new application header image to the $EAP_HOME/standalone/deployments/business-central.war/banner directory in your JBoss BPM Suite installation.
  4. Open $EAP_HOME/standalone/deployments/business-central.war/banner/banner.html file in a text editor.
  5. In the banner.html file, edit the following <img> tag to provide the name of your new header image: 
    <img src="banner/logo.png"/>
    The default image is logo.png.
Refresh the Business Central Home page to view your changes.

2.3.3. Customizing Business Central Splash Help Windows

The $EAP_HOME/standalone/deployments/business-central.war/plugins directory contains the splash pages and the corresponding html files. Each splash page holds the name of the html file, which contains information about the image(s) and the text to be displayed. For example, the authoring_perspective.splash.js splash page points to the authoring_perspective.splash.html file. The authoring_perspective.splash.html contains the names and location of all the image files that appear on the Authoring Perspective splash help and also their captions. You can customize the images and the corresponding captions of the existing splash help pop-up windows.

Procedure 2.5. Changing the Business Central Splash Help Pop-Up Images and Captions

  1. Start the EAP server and open http://localhost:8080/business-central in a web browser.
  2. Log in to the Business Central application with your user credentials.
  3. Copy your new splash help image(s) to the $EAP_HOME/standalone/deployments/business-central.war/images directory in your JBoss BPM Suite installation.
  4. Open the corresponding html file from $EAP_HOME/standalone/deployments/business-central.war/plugins directory in a text editor.
  5. Edit the html file to point to your new splash help image. For example, to change the first image that appears in the Authoring Perspective splash help, edit the following <img> tag in the authoring_perspective.splash.html file to add your new image: 
    <img src="images/authoring_perspective1.png" alt="">
    The default image is authoring_perspective1.png, which appears on the first page of the Authoring Perspective splash help.
  6. To change the image caption that appears on the splash help, edit the <h4> and <p> tag contents below the <img> tag: 
    <h4>Authoring</h4>
<p>Modularized and customizable workbench</p>
Refresh the Business Central Home page and access the splash help pop-up windows to view your changes.