Just like SAP, many companies have their own branding requirement even for internal used tools and applications. They want their own logo to be appeared, their own fonts to be used, their own colors to be brushed.

We support such kind of UI customization since BPC 10.1 NW initial release. Still, lots of customers are not aware of it and ask for more information in terms of how to do it. Here I will introduce the details and hope it’s useful for people in such needs.

What can be customized

As illustrated below, following things can be customized.

  1. logo and application name, including the icon displayed in browser’s tab
  2. Shell background. You can define a different color or use an image as the background.
  3. Icons at home page
  4. Name under each icon
  5. Separator line
  6. Content background color
  7. all font faces

example of after customization.

Not just things in home page, the UI elements in other pages can also be customized. For example, color and font in each page’s tool bar and pop-up dialog boxes are open for customization as well.

after customization.

How to customize

Technically the customization is done in a CSS file, which looks like below.

/* ==================================================================================================================== */
/* Special CSS for Customer Start Here; */
/* Customer Can Modify Font Style(Size/Color/Family); Nav Icon; Page Background; Logo */
/* Customer's Modification Can Affect One Theme or All Themes */
/* ==================================================================================================================== */


/* ============================================================================================== */
/* For All Themes */
/* ============================================================================================== */
/* ======================================================================== */
/* Global Font Face */
/* ======================================================================== */
.sapUiBody * {
	font-family: Times New Roman;
}

/* ======================================================================== */
/* Logo */
/* ======================================================================== */
.bpc-shell-logo {
	background:url(img_c/logo_sample.png) no-repeat;
	background-size:100%;
	width:40px;
}


/* ============================================================================================== */
/* For Theme Goldreflection */
/* All Selector Should Begin by 'html[class*='goldreflection']' */
/* ============================================================================================== */
/* ======================================================================== */
/* Global Font Style */
/* ======================================================================== */
html[class*='goldreflection'] .sapUiBody * {
	font-family: Century Gothic;
}


/* ======================================================================== */
/* Shell Background */
/* ======================================================================== */
html[class*='goldreflection'] .sapUiUx3ShellHeader,
html[class*='goldreflection'] .sapUiUx3ShellBgImg {
	background:#213950;
}
html[class*='goldreflection'] .slideClass {
	background-color:#F5F2E8;
}


/* ======================================================================== */
/* Homepage Top Nav Icon */
/* ======================================================================== */
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(2) {
	background-image: url(img_c/home_bar_activities_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(3) {
	background-image: url(img_c/home_bar_library_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(4) {
	background-image: url(img_c/home_bar_consolidation_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(5) {
	background-image: url(img_c/home_bar_administration_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(6) {
	background-image: url(img_c/home_bar_reports_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(7) {
	background-image: url(img_c/home_bar_documents_sample.png);
}
html[class*='goldreflection'] .homeview-navigation-bar li:nth-child(8) {
	background-image: url(img_c/home_bar_temp_sample.png);
}


/* ======================================================================== */
/* Homepage Top Nav Title */
/* ======================================================================== */
html[class*='goldreflection'] .homeview-navigation-bar .sapUiUx3NavBarItemSel > a {
	color:#921F1F;
}
html[class*='goldreflection'] .homeview-navigation-bar .sapUiUx3NavBarItem {
	color:#B6AF9E;
}


/* ======================================================================== */
/* Shell Navigation Bar Line & Arrow */
/* ======================================================================== */
html[class*='goldreflection'] .sapUiUx3NavBar {
	border-color:#AD754F;
}
html[class*='goldreflection'] .sapUiUx3NavBarArrow {
	border-bottom-color:#AD754F;
}


/* ======================================================================== */
/* Workspace */
/* ======================================================================== */
html[class*='goldreflection'] .sapEpmUiControlsCustomToolBar {
	background:#C9D6DB;
}
html[class*='goldreflection'] .sapEpmUiControlsWorkspaceLowerDiv > .sapUiSplitter > .sapUiVSplitterFirstPane {
	background:#FFF;
}
html[class*='goldreflection'] .sapEpmUiControlsViewContainer {
	background:#FFF;
}


/* ======================================================================== */
/* Dialog */
/* ======================================================================== */
html[class*='goldreflection'] .sapUiDlg {
	background:#213950;
}


/* ============================================================================================== */
/* For Theme UX */
/* All Selector Should Begin by 'html[class*='ux']' */
/* ============================================================================================== */
/* ======================================================================== */
/* Global Font Style */
/* ======================================================================== */
html[class*='ux'] .sapUiBody * {
	font-family: Tahoma;
}


/* ============================================================================================== */
/* For Theme HCB */
/* All Selector Should Begin by 'html[class*='hcb']' */
/* ============================================================================================== */
/* ======================================================================== */
/* Global Font Style */
/* ======================================================================== */
html[class*='hcb'] .sapUiBody * {
	font-family: Trebuchet MS;
}

There are many selectors in this CSS file. You need to know where to define what. Following table gives you a mapping of UI elements and selectors.

Function Part CSS Selector
All Font Face .sapUiBody *
Logo .bpc-shell-logo
Shell Background .sapUiUx3ShellHeader, .sapUiUx3ShellBgImg
Content Background .slideClass
Navigation Icons .homeview-navigation-bar li:nth-child(2)/(3)/(4)…
Navigation Title (Highlight) .homeview-navigation-bar .sapUiUx3NavBarItemSel > a
Navigation Title (Normal) .homeview-navigation-bar .sapUiUx3NavBarItem
Navigation Line .sapUiUx3NavBar
Navigation Arrow .sapUiUx3NavBarArrow
Workspace Toolbar .sapEpmUiControlsCustomToolBar
Workspace Left Pane Background .sapEpmUiControlsWorkspaceLowerDiv > .sapUiSplitter > .sapUiVSplitterFirstPane
Workspace Right Pane Background .sapEpmUiControlsViewContainer
Dialog Border/Header Background .sapUiDlg

BPC 10.1 NW delivers two themes: standard (the default one, which is also called goldreflection internally) and high-contrast theme. You can customize any of them only or customize all. If you don’t specify a prefix, you define at global level and your CSS code impacts all themes; if you specify a prefix, you only customize the particular theme.

Here is the mapping between theme name and CSS prefix.

Theme Name Prefix in CSS
Gold Reflection html[class*=’goldreflection’]
High Contrast Black html[class*=’hcb’]

Some sample code

Define your logo. Note the logo has a fixed height of 18 pixels. Your own logo will be resized proportionally to fit the height. The file type can be gif, jpg or png. And for your reference, the original SAP logo image is a 73×36 png file.

.bpc-shell-logo {
	background:url(img_c/logo.png) no-repeat;
	background-size:100%;
	width:40px;
}

Change Background Color. Obviously, following code is only for the standard theme – Goldreflection

html[class*='goldreflection'] .sapUiUx3ShellHeader,
html[class*='goldreflection'] .sapUiUx3ShellBgImg {
	background:#213950;
}

Change Background Image.

html[class*='goldreflection'] .sapUiUx3ShellHeader,
html[class*='goldreflection'] .sapUiUx3ShellBgImg {
background:url(img_c/background.png) no-repeat;
}

If you want to change application name and browser tab icon, you need a customize.json file and put following code into the file. Note the icon image should be a 32×32 ico file.

{
    "title": "Business Planning and Consolidation",
    "titleImage": "themes/bas/img_c/saplogo.ico"
}

Sample files

To accelerate such customization, we also delivered sample files in your BPC installation. Here is how to get the sample files.

  1. Logon to your application server with enough privilege.
  2. Open transaction SE80
  3. Navigate to “Repository Browser”, and open BSP Application “bpcwebclient”
  4. Go to “bpcwebclient/Page Fragments/themes/bas/” to download the sample css file (customer_sample.css) or copy the code.
  5. Go to “bpcwebclient/Page Fragments/” to download the sample JSON file (customize_sample.json) or copy the code.

How to deploy

You need to rename the file name as customer.css and cutomize.json and upload them to your BPC web server, then activate them. Here are the detail steps (we create the files in server directly and paste your code into them).

  1. Logon to your application server with enough privilege.
  2. Open transaction SE80
  3. Navigate to “Repository Browser”, and open BSP Application “bpcwebclient”
  4. Right click “Page Fragments”, and then click “Create” on popup context menu.
  5. Enter “themes/bas/customer.css” as page name, and select “Page Fragment” as page type, and then click save button to save. (refer to screenshot below)
  6. Copy the content of your local customer.css into the file, and then activate it (Ctrl + F3).
  7. Goto “MIMEs/themes/base/img_c/”.
  8. Right click folder “img_c”, and then click “Import MIME objects” on popup context menu.
  9. Upload your image files one by one.
  10. Right click “Page Fragments”, and then click “Create” on popup context menu.
  11. Enter “customize.json” as page name, and select “Page Fragment” as page type, and then click save button to save.
  12. Copy the content of your local customize.json into the file, and then activate it (Ctrl + F3).

Summary

In BPC 10.1 NW, with simple CSS writing, you are able to customize BPC web UI to your own theme to support your organization’s branding need. Such customization is supported by the product, it will keep intact and work as before even if you upgrade to a later BPC support package. The solution is also independent of modelling technology (BPC Standard and BPC Embedded) as the web server is shared.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply