Show TOC

Branding Enterprise Workspaces - Flex StylesLocate this document in the navigation structure

Use

This topic describes how to brand the appearance of your enterprise workspaces by customizing enterprise workspaces Flex styles. You start by downloading the default Flex project file named DefaultFlexStylesProject.zip, which contains the .css files that define the Flex styles used in enterprise workspaces. You then modify the styles in one of the .css files in the default project, compile it to an .swf file, and upload the .swf file using the Web Resource Repository.

You can edit the Default theme or any other theme; however, you need to know the ID of the theme that you intend to brand. You can upload only a single .swf file for each theme. The chosen theme is referred in these instructions as <theme ID>.

The .css files are divided into several sections. The first section contains styles of basic enterprise workspaces controls, such as texts, buttons, and input fields. There are additional sections for generic styles, such as tooltips, and for specific UI elements, such as the Member List module.

Note

To view the name of the specific Flex style that is associated with a UI element of an enterprise workspaces application, use the Flex Styles Inspector. For more information, see Inspecting Flex Styles.

The default project file, DefaultFlexStylesProject.zip, contains the following .css files that define the Flex styles used in enterprise workspaces:

File Name

Framework Page

Location in ZIP

SAPEnterpriseWorkspaces.css

Classic

src\

SAPEnterpriseWorkspacesForAjaxFrameworkPage.css

Ajax

src\

The default project also contains all the Flex resource files, such as images and skins, used by the .css files.

Prerequisites

  • You are assigned the portal Content Admin role.

  • You are assigned the Workspace System Administration role.

  • You have a good understanding of Flex and .css files and formats.

  • You are using Adobe Flash Builder 4 or 4.1.

Procedure

The procedure for branding enterprise workspaces Flex styles depends on the version of SAP NetWeaver that you are have installed.

Enterprise Workspaces on SAP NetWeaver Portal 7.3x and Higher

  1. In SAP NetWeaver Portal, navigate to Start of the navigation path Content Administration Next navigation step Web Resource Repository End of the navigation path.

  2. In the Portal Catalog, navigate to Start of the navigation path Web Resources Next navigation step Application Branding Next navigation step Enterprise Workspaces Next navigation step tc~ep.ext~flexintegration  Next navigation step <latest version> Next navigation step <theme ID> Next navigation step DefaultFlexProject Next navigation step DefaultFlexStylesProject.zip End of the navigation path.

  3. From the context menu of the DefaultFlexStylesProject.zip file, choose Download Resource.

  4. Save the downloaded file to a location of your choice.

  5. Extract the .zip file. The extracted folder contains an Eclipse project.

  6. In Adobe Flash Builder 4 or 4.1, import the project folder of the sample Flex project.

    Verify that the sample project was imported successfully by making sure that you can view a project named DefaultFlexStylesProject.

    Note

    If Adobe Flash Builder is not installed, you can compile .swf files to .css files using the standalone Flex SDK in a command line.

  7. Edit the .css files as required.

  8. Replace any required images, keeping the same file names, in the location /DefaultFlexStylesProject/src/assets.

  9. Make sure that the Compile CSS to SWF option is selected for the .css file that you are modifying.

    This option ensures that the .css file is compiled to an .swf file each time you build the project.

  10. Compile the .css to .swf.

  11. Save the .swf file and rename it to defaultFlexStyle.swf.

  12. In SAP NetWeaver Portal, navigate to Start of the navigation path Content Administration Next navigation step Web Resource Repository End of the navigation path.

  13. In the Portal Catalog, navigate to Start of the navigation path Web Resources Next navigation step Application Branding Next navigation step Enterprise Workspaces Next navigation step tc~ep.ext~flexintegration  Next navigation step <latest version> Next navigation step <theme ID> Next navigation step swf End of the navigation path.

  14. From the context menu of the swf folder, choose Upload Resources.

  15. Browse to the defaultFlexStyle.swf file on your file system and choose Add to Upload Table.

  16. Select Overwrite existing resources and choose Start Upload.

  17. After the upload is complete, clear the client browser cache for the branding changes to take effect.

Enterprise Workspaces on SAP NetWeaver Portal 7.0x

  1. In enterprise workspaces, navigate to Start of the navigation path Workspace Administration Next navigation step Themes End of the navigation path.

  2. Choose Download Flex styles. The Select location for download dialog box appears.

  3. Save the downloaded .zip file to a location of your choice.

  4. Extract the .zip file. The extracted folder contains an Eclipse project.

  5. In Adobe Flash Builder 4 or 4.1, import the project folder of the sample Flex project.

  6. Verify that the sample project was imported successfully by making sure that you can view a project named SampleFlexStylesProject.

  7. Create a file to contain the Flex styles you are going to change.

    These instructions refer to a file named MyStyles.css.

  8. Make sure that the Compile CSS to SWF option is selected for MyStyles.css.

    This option ensures that the CSS file is compiled to an .swf file each time you build the project.

  9. In MyStyles.css, define your custom styles.

  10. Save your changes.

  11. Build the project.

    In your project, you can see the MyStyles.swf file under the bin-debug folder.

    Note

    View the file properties to obtain the location of the .swf file.

    If Adobe Flash Builder is not installed, you can compile .swf files to .css files using the standalone Flex SDK in a command line.

  12. In the portal, navigate to Start of the navigation path Workspace Administration Next navigation step Themes End of the navigation path.

  13. Choose Upload.

  14. In the Select file(s) to upload dialog box, locate and select the .swf file to upload. The file is added to the Available Styles table.

  15. In the Portal Theme dropdown list, select the theme to which to assign custom styles.

    Note

    Assigning styles to the Default Theme affects all themes that have no specific styles assigned.

  16. Select the style and choose Add. The style is added to the Assigned Styles table.

  17. You can assign multiple Flex styles ( .swf files). Use the Move Up and Move Down buttons to order the styles in the list.

    Note

    Styles are used in the order in which they are listed, top-down. This means that when two Flex ( .swf) style assignments overlap, the one that appears first in the list takes precedence.

    We recommend placing SAP Flex CSS files ( SAPEnterpriseWorkspaces or SAPEnterpriseWorkspacesForAjaxFrameworkPage) below your custom Flex CSS files.

  18. Choose Save. The next time a user accesses enterprise workspaces, or refreshes the current display, the branding changes are displayed.

Example

The following defines a heading text style, which is part of the basic styles:

/* Heading text - style 3 - small size - light colored text */ .sapHeading3Light { color: #ffffff; fontWeight:bold; fontSize: 11; }

To change the color of the sapHeading3Light heading text from white to yellow, change the value of the color attribute from #ffffff to #ffff00, as follows:

 color: #ffff00;
More Information

For more information about working with the Web Resource Repository, navigate to http://help.sap.com/nw73 and choose Start of the navigation path Application Help Next navigation step  SAP Library End of the navigation path. In SAP Library, choose Start of the navigation path SAP NetWeaver Next navigation step SAP NetWeaver Portal Next navigation step Portal Next navigation step Managing the Portal Next navigation step Content Administration Next navigation step Working with the Web Resource Repository End of the navigation path.