Last week we started a blog series about a new add-on product on top of SAP NetWeaver Portal, called Enterprise Workspaces. This product allows end-users to set up their own working environment from existing corporate assets in an easy and intuitive self-service approach.
Today I would like to talk about adapting the look and feel of Enterprise Workspaces to the theme of the portal environment. How can you assign different styles to different user groups?
First of all, the look and feel of Enterprise Workspaces is defined in styles which are not part of a portal theme. That means that the settings you have made in the portal theme will not affect the layout of Enterprise Workspaces. However, you can assign one or more of these styles to a portal theme. That way, you can always make sure that the portal theme and the Enterprise Workspaces style fit perfectly together and by assigning different portal themes to different user groups, each user automatically also gets the corresponding Enterprise Workspaces style.
How to assign an Enterprise Workspaces style to a portal theme
Assigning styles to portal themes is a workspace system administrator’s task and can be quite easily understood by looking at the screen as the handling of the styles is really intuitive.
On the left hand side there is a list of available styles, which at the beginning just contains the SAP default style. Styles can be uploaded to enlarge the variety of possible workspaces layouts. To assign styles in this list to a portal theme, simply choose the portal theme from the drop down list on top and add the required styles from the available styles list to the assigned styles. That's it.
But keep in mind that the assigned styles take effect in the order in which they are listed, i.e. if two styles define the same UI element, the one that appears first in the list takes precedence.
How to create your own Enterprise Workspaces style
For creating your own style according to your corporate design, you start by downloading the sample project, which contains all settings of the SAP default style, and adapt it to your needs. Nearly all settings of an Enterprise Workspaces style can be changed by editing the css file of this flex project or by editing or exchanging the icons that are also part of the sample project. A few other settings are done in a separate HTML CSS file, but I will come to this exception later. You can edit the Flex CSS file using any Flex IDE that supports Flex CSS editing and compiling. Some experience in working with CSS files or Flex would be helpful.
The Flex CSS file is divided into many sections, each for a different component, e.g. the Workspace Directory, the Document List, or the Module Library. In each of these sections, you find only CSS definitions relevant for this component. For example, the following CSS definition controls the style of the Workspaces Directory’s title:
Change the definitions required, rename and compile the sample project and you only have to upload the resulting swf file as your new enterprise workspaces style.
Getting back to the exception mentioned before: Style changes to the module frame and title bar, like the background color, frame, or the icons used for the buttons in the module header, are not part of the Flex project, but are defined in a standard HTML CSS file. This file is also contained in the sample download. It can be edited with a simple text editor, zipped and then directly uploaded to your Portal system.
I hope this blog gave you an impression on how you can adapt the look and feel of your Enterprise Workspaces system to your needs. In the next blog of this series we will talk about implementing your own modules in Enterprise Workspaces.
2 Comments