Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member184471
Active Participant

In my previous tutorial I already talked about how to change the name and URL of BI launch pad. Often this is not enough and partners as well as customers would like to change the logo or even color scheme of BI launch pad. The SAP BI 4.0 SP4 release introduced a branding and theming mechanism that will be maintained over patches. Detailed documentation about how to customize BI launch pad, Cyrstal reports or OpenDocument can be found in the SAP BusinessObjects BI Customization Guide (see Web Application Customization section). For this tutorial I like to focus on BI launch pad customization only. Please note that knowledge of cascaring style sheets (css) is needed for this customization. You can make changes as small as changing the logo files or as big as changing the entire color scheme of BI launch pad, it all depends on how many styles you override.

Retrieve sample files

As this customization can be quite complex, we provide you with a sample customization as part of the installation package. The template.zip file is located in the Collaterals\CustomizationTemplate folder of your installation package, and contains the branding bundles (JAR files) to customize. This file is the starting point for customizing your web applications.

  1. Copy template.zip from the Collaterals\CustomizationTemplate folder of your installation package to a directory on your local drive.
  2. Extract the template.zip file
  3. Once extracted navigate to the sub-folder SAP BusinessObjects Enterprise XI 4.0\warfiles\webapps\BOE\WEB-INF\eclipse\plugins of the extracted package
  4. In that folder there is a com.businessobjects.webpath.InfoViewBranding.jar bundle, which contains a sample customization. Using winrar, extract the com.businessobjects.webpath.InfoViewBranding.jar bundle
  5. The sample files are located in web\sample folder. The sample contains sample images as well as a sample css file to override the BI launch pad style as guidance. You can customize as little or as much as you like!
  6. Open the customize.css file located in \web\sample\css folder using Notepad++ (or any other text editor)

    

Create customization files

It is recommended to start with a blank customize.css and add customized styles to the blank file using the sample as guidance rather than modifying the sample customize.css file itself.

You can customize the favicon, logo, backgrounds, styles, and more. Most of these customizations involve changing the CSS rules in the customize.css
file. All customizations must be made available in the web folder of com.businessobjects.webpath.InfoViewBranding.jar to take effect. The web folder has to have the following sub-folder structure:

         \web

    \css

                      customize.css

                 \images

                      favicon.ico

                      \theme

    *.png, *.gif

  1. Under the com.businessobjects.webpath.InfoViewBranding folder created from the extraction of the com.businessobjects.webpath.InfoViewBranding.jar bundle, create the folder structure mentioned above
  2. BI launch pad uses a few images as background for its UI, for this tutorial I have created a customized sub-set of these images. Download the "BI launch pad background images in light red.zip". Extract the file and drop the images the theme folder.
  3. Create a new customize.css file in the css folder using Notepad++ (or any other text editor)

Customize BI launch pad logon page

The following diagram show the elements customized in this activity, for reference purposes. The numbers in the boxes refer to sections in the sample customize.css file. Our official documentation contains more detailed diagrams if you like to customize more parts. For the cases that the color is defined as hex color, I have suggested a new color value; feel free to use any value you like.

  1.   By using the sample customize.css file and the diagram below, add the new css styles to the new customize.css file.

Customize BI launch pad top part

The following diagram show the elements customized in the activity, for reference purposes. The numbers in the boxes refer to sections in the
sample customize.css file.

  1. By using the sample customize.css file and the diagram below, add the new css styles to the new customize.css file.

Customize BI launch pad home page

The following diagram show the elements customized in the activity, for reference purposes. The numbers in the boxes refer to sections in the
sample customize.css file.

  1. By using the sample customize.css file and the diagram below, add the new css styles to the new customize.css file.

Customize BI launch pad Universal Repository Explorer

The following diagram show the elements customized in the activity, for reference purposes. The numbers in the boxes refer to sections in the
sample customize.css file.

  1. By using the sample customize.css file and the diagram below, add the new css styles to the new customize.css file.

Customize BI launch pad Menu

The following diagram show the elements customized in the activity, for reference purposes. The numbers in the boxes refer to sections in the
sample customize.css file.

  1. By using the sample customize.css file and the diagram below, add the new css styles to the new customize.css file.

Customize BI launch pad Simple Dialogs

The following diagram show the elements customized in the activity, for reference purposes. The numbers in the boxes refer to sections in the
sample customize.css file.

  1. By using the sample customize.css file and the diagram below, add the new css styles to the new customize.css file.

Customize BI launch pad Large Dialogs

The following diagram show the elements customized in the activity, for reference purposes. The numbers in the boxes refer to sections in the
sample customize.css file.

  1. By using the sample customize.css file and the diagram below, add the new css styles to the new customize.css file.

Testing your customizations

Before performing customizations on your production systems, it is good practice to test your customizations first on a test installation. In a default installation that uses the bundled Tomcat server, you can instantly see the effects of your changes by making temporary modifications to the webpath.InfoViewBranding folders in the Tomcat work directory:

<INSTALLDIR>\SAP BusinessObjects\tomcat\work\Catalina\localhost\BOE\eclipse\plugins\webpath.InfoViewBranding\web\ This folder have the same structure as the branding resources contained in template.zip. Note: The Tomcat work directory is not permanent and your temporary changes are deleted when patching. You may need to restart tomcat and clear your browser cache to see the temporary changes.

Create the custumization bundle

  1. Using Winrar open the sample com.businessobjects.webpath.InfoViewBranding.jar bundle

  2. Delete the sample folder within the bundle

  3. Add the your customized css and image folders and its underlying files under the web folder. Close Winrar

  4. Copy the com.businessobjects.webpath.InfoViewBranding.jar branding bundle in the following location

    <INSTALLDIR>\SAP BusinessObjects Enterprise XI 4.0\warfiles\webapps\BOE\WEB-INF\eclipse\plugins

        

Deploy custimization files

In order for these changes to show in BI launch pad one has to run wdeploy.

  1. Stop Tomcat using the Central Configuration Manager
  2. Use WDeploy to redeploy the BOE.war file on Tomcat. Wdeploy is available via the Start menu.
  3. Wait for WDeploy to finish
  4. Restart Tomcat

  

View customization

  

  1. Clear your Browser cache in order to ensure that the browser consumes the new styles

  2. Login to BI launch pad as Administrator.

  3. Browse around to view the customization

108 Comments