Recently, SAP announced the release a new mobile portal flavor called Mobile Homepage. Mobile Homepage is a new entry point for mobile users, based on SAP NetWeaver Portal 7.30 and Enterprise Workspaces 1.1 SP3 infrastructure. You can now configure in minutes, a mobile entry point for your LOBs with content relevant for their daily work (e.g. Company News, Sales Homepage, Marketing Homepage, etc.) It is delivered as a workspace template with pre-defined and mobile ready modules. Sounds simple, however, customizing the UI styling to fit your Portal themes might look a bit confusing, and might take a lot of valuable time.
So, here I will try to simplify the customizing themes solution and demonstrate how easy we made it to fit your needs.
The branding solution solves all the enterprise workspaces HTML UIs, both for desktop and mobile, but here I will focus on the solution for the mobile UIs.
Let’s start:
When a system administrator wants to customize the theme, he first has to download the currently assigned styles which define the current UI and then to make his own modifications.
To download the currently assigned styles; open the portal and access ‘Workspace Administration’ --> ‘Themes’ (the Themes page allows the administrator to manage the enterprise workspaces themes, download, edit and assign).
Download a ZIP file that contains the assigned HTML styles files that define the styles used in enterprise workspaces, such as .CSS files, .LESS files, and image files.
In order to make this process a lot simpler we created a main less file (tc~ep.ext~ui.common\less\palette.less) which represents the main palette of colors that defines the colors used all over the product (the file is divided into sections and explanations are provided in the file to assist you in modifying the colors when branding your UI).
After extracting the ZIP file, you can modify the colors in the palette.less file according to your UI branding guidelines.
In this example I will focus on customizing the colors in the Mobile Home Page section (you can use the same process for branding Enterprise Workspaces for mobile).
Before we start, let’s see how the default UI looks like:
OK, now I am going to change the UI to be red. In order to do so I will have to change the following colors in the palette to red (#FF0000):
mhp-color1 - background of header
mhp-color2 - dividers in the content area
mhp-color3 - background of content area
Besides the colors, I want to change the SAP logo to a logo that will fit the new look of the UI, so let’s replace it with the following image:
To do that, open the folder: ‘\tc~spaces~mobile~pagebuilder\images\tablet’, and replace the file: logo.png with your desired image (image dimensions are 60*30 pixels).
After customizing the palette and replacing the images we need to compile the LESS files.
To make it easier to use we created a batch file that contains the right set of commands needed to compile all LESS files available in the package (the file supplied is LESSCompilerExecuter.txt, that in order to use it you will have to change its extension to .bat). Note: for the compilation you will have to use a third-party LESS compiler (many free/open sources LESS compilers can be found on the net, I am using this one: https://github.com/duncansmart/less.js-windows).
To finish the process, we have to rezip the files, upload the .zip file to the workspace theme administration screen, and assign it to a portal theme.
To see the result, refresh the page:
Go back to: A Deep Dive into SAP NetWeaver Portal,
Enterprise Workspaces (Main TOC blog)
- SAP Managed Tags:
