Design Templates for Web Interfaces 

Use

The visual appearance of a Web interface is determined by the design template used by the Web Interface Builder. Exactly how this is produced depends on whether you use the new design or the old design.

Features

New Design (BW-BPS)

With the new design concept, the visual appearance of a Web interface is determined by the Theme.  Each theme is defined by a MIME files record for rendering HTML (CSS files (Cascading Style Sheet), images, JavaScript files). These are stored in the MIME Repository.

For more information on the Theme concept, see the Business Server Pages documentation under Setting Style Sheets for HTMLB, XHTMLB and PHTMLB. 

SAP delivers several predefined SAP Themes:

●     sap_standard

●     sap_tradeshow (default setting)

●     sap_chrome

●     sap_highcont

●     sap_hcb

You can select one of these SAP Themes using the input help for the Theme Path field.

If you want to adapt the visual appearance to your own requirements, you can create your own Theme on the basis of the SAP Theme. You change the style classes in your Theme to suit your requirements.

The most simple way to change the visual appearance of a Web interface is as follows: If you are using the Web interface in SAP Enterprise Portal, call the Theme Editor by choosing System Administration → Portal Display. You have to adapt the component-specific styles. A Web interface uses the following styles: Application, Button, Cursor, Label and Field, Link, Text, Group, List, Table, Tree. The visual appearance of the planning layout is determined by the “BI Web Reports 3.0” styles.

If you are using a Web interface in SAP Enterprise Portal and have an absolute font size in particular classes of the BW style sheet 3.0, the combination of the BW style sheet 3.0 and the other component-specific styles may mean that the font size in the planning layout of your Web interface is very small.   

Therefore you must not specify the font size in these classes of the BW style sheet 3.0, or you must only specify a relative font size (for the parent element font sizes).

Font sizes can have the following values: larger, smaller, <number>%, <number>em.

The definitions are based on the following classes of the BW style sheet 3.0:

SAPBEXTableGrid

SAPBEXCellspacing

SAPBEXchaText

SAPBEXaggItem

SAPBEXstdItem

SAPBEXHLevel0

SAPBEXHLevel1

SAPBEXHLevel2

SAPBEXHLevel3

SAPBEXaggData

SAPBEXstdDataOdd

SAPBEXstdData

SAPBEXDataErr

If you want to change the visual appearance of your Web interface but you are not using it in SAP Enterprise Portal, you have to create your own Theme manually in the BI system and modify it.

For more information and a simple example of this procedure, see Using Your Own Style Sheet (New Design).

Old Design (SEM-BPS: Old and New SEM-BPS Design)

With the old design concept, the visual appearance of a Web interface is defined by a predefined style sheet delivered by SAP. If you want to adapt this format template to your own requirements, you can create an additional CSS file and use that. You can define a format file of this type for each page of your Web interface.

If you have integrated your Web interface (based on the old design) into the portal and have changed the portal format template, you have to modify the format template of the Web interface separately.

For more information, see:

CSS Classes for Web Interfaces (Old Design)

Modifying CSS Classes for Web Interfaces (Old Design)

Activities

●     When you create a Web interface, you are automatically using the new design.

●     When you edit a Web interface that was created using the old design, you can continue to work with the old design or you can switch to the new design.

In the Old Design property of the Web interface, choose value false if you want to use the new design. 

●     You cannot switch back to the old design from the new design.