Developer Guide for UI Theme Designer 10

7/23/2019 Developer Guide for UI Theme Designer 10

http://slidepdf.com/reader/full/developer-guide-for-ui-theme-designer-10 1/20

CUSTOMER

UI Theme Designer 1.0

Document Version: 1.0 - 2013-06-03

Developer Guide for UI Theme Designer



Table of Contents

1 UI Theme Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.1 Architecture of the UI Theme Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.1.1 Basics of Theming. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

1.1.2 Structure of Theming Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.1.3 Theming Lifecycle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.2 Designing Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8

1.2.1 Prerequisites. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

1.2.2 Selecting the Starting Point for Your Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

1.2.3 Editing Modes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

1.2.4 Inserting Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131.2.5 Saving Themes as Draft. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

1.2.6 Publishing Themes to the Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

1.2.7 Running Applications with the New Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

1.3 Maintaining Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1.3.1 Transporting Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1.3.2 Exporting Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

1.3.3 Importing Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

1.3.4 Deleting Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

1.3.5 Invalidating the Server Cache. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.3.6 Regenerating Themes after Upgrades. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.4 Reference. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.4.1 SAP Standard Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

2C U S T O M E R© 2013 SAP AG or an SAP affiliate company. All rights reserved.


Table of Contents



1 UI Theme Designer

Using UI theme designer you can create your own themes to adapt the visual appearance of applications.

The UI theme designer is a browser-based tool which allows you to develop your themes by modifying one of the

theme templates provided by SAP. You can also edit existing custom themes. For example, you can change the

color scheme, the size and type of fonts, or add your company's logo. The tool provides a live preview of the

theme while you are designing it.

You can create themes for applications built in various SAP UI clients and technologies.

UI theme designer supports the following features:

● Quick theming based on SAP Gold Reflection is supported by the following SAP UI clients and

technologies:

○Web Dynpro ABAP

○ SAPUI5 (SAP Standard Libraries)

○ SAP NetWeaver Business Client (NWBC):

○ NWBC 4.0: You can theme NWBC overview pages (Index page, New Tab page, service map). The

shell cannot be themed.

○ NWBC for HTML: You can theme the service map. The shell cannot be themed.

● Expert theming is supported for Web Dynpro ABAP and NWBC.

● Adding CSS rules to the CSS files is supported for SAPUI5.

● You can create your themes on the basis of the following SAP standard themes:

Table 1:

UI technology Supported Themes

Unified Rendering SAP Gold Reflection, SAP Corbu, SAP

Tradeshow

SAPUI5 desktop SAP Blue Crystal, SAP Gold Reflection

SAPUI5 mobile SAP Blue Crystal, SAP Mobile Visual

Identity

NWBC SAP Gold Reflection, SAP Corbu

SAP Gold Reflection and SAP Corbu are supported as of SAP NetWeaver 7.3 EHP 1, SPS 05.

For more information, see SAP Note 1852401 .

1.1 Architecture of the UI Theme Designer

The UI theme designer tool consists of the following main components:


UI Theme Designer

C U S T O M E R© 2013 SAP AG or an SAP affiliate company. All rights reserved. 3

https://service.sap.com/sap/support/notes/1852401



Table 2:

Component Description

UI theme designerBrowser-based application that provides several waysto find parameters, change their values and apply

them to a preview application. It uses the API provided

by the theming engine to access the theming data

stored in the theme repository.

Theming engine Manages theming parameters, file structures, import/

export and persistency. It provides an API to the UI

theme designer.

Theme repository Repository to store the CSS files of custom themes

and themes delivered by SAP. It has a file-system-like

interface to the UI theme designer.

Theme generator Generates CCS files from LESS file sources.

Related Links

Basics of Theming [page 4]

The theming files are based on the dynamic stylesheet language LESS, which extends CSS with mechanisms such

as variables, mixins, operations, and functions.

Structure of Theming Files [page 6]

The CSS files of custom themes and themes delivered by SAP are stored in the theme repository.

Theming Lifecycle [page 7]

Several components are involved when you create or edit a theme using the UI theme designer.

1.1.1 Basics of Theming

The theming files are based on the dynamic stylesheet language LESS, which extends CSS with mechanisms such

as variables, mixins, operations, and functions.

A theme defines the visual appearance of an application, including font size and type, colors of UI controls and

background images. It can be applied to applications built in various UI technologies to suit the purpose, topic, or

tastes of different users.

Themes are defined by Cascading Style Sheet (CSS) files containing theme parameters.

The UI theme designer uses the style sheet language LESS (version 1.3.1). With LESS, you use an @ sign to define

a variable and a colon to assign its value. During translation, the values of the variables are inserted into the output

CSS document.

In the following example, the variable @sapUiText is defined centrally and re-used throughout the style sheet. It

defines the text color as black. To define the button color, you do not need to repeat the value but you can specify

that buttons should have the text color. So when you change the value of the variable @sapUiText, you change

the button color as well as the text color:



UI Theme Designer



Source Code

@sapUiText: #000000;

button { color: @sapUiText; [...]}

In addition, LESS allows operations and functions. Operations allow addition, subtraction, division, and

multiplication of property values and colors, which can be used to create complex relationships between

properties. Functions map one-to-one with JavaScript code, allowing manipulation of values (e.g. defining a color

by desaturating another color).

Since variables are defined centrally, the UI theme designer allows you to change the color scheme of a theme

with just a few clicks.

Example

You want to create a new theme based on the SAP standard theme SAP Corbu. You want your new theme to

have buttons with red background color (instead of grey) and rounded borders.

SAP Corbu has the base color grey:

Source Code

@BaseColor: #ddd

The color for the button background is derived from this base color by the function darken:

Source Code

@ButtonBackground: darken(@BaseColor,10);.sapButton { background-color: @ButtonBackground; }

To change the button background from grey to red, you use the expert theming mode to change the value of

the variable ButtonBackground. The underlying LESS code looks as follows:

Source Code

@ButtonBackground: #ddf;

SAP Corbu does not support rounded borders for buttons. To create a theme with rounded button borders,

you add an additional variable border-radius:

Source Code

.sapButton { border-radius: 3px; }

In the theme generation process, the two changes to SAP Corbu are concatenated. The theme generator

substitutes all references to the CSS variable by the current value of this variable. Thus, the final CSS contains


UI Theme Designer




the redefined properties of the base color (red instead of grey) as well as additional CSS to enable features that

are not supported by the base theme (rounded button borders).

The generated CSS looks as follows:

Source Code

.sapButton { background: #ddf; }

.sapButton { border-radius: 3px; }

Related Links

http://lesscss.org/

http://less2css.org/Use this page to enter LESS code and display the corresponding CSS code.

Use this page to enter LESS code and display the corresponding CSS code.

1.1.2 Structure of Theming Files

The CSS files of custom themes and themes delivered by SAP are stored in the theme repository.

The folders containing these CSS files have the following structure:

● Framework

○ The Base framework contains all data that is shared by all HTML frameworks (e.g. the SAP main colors

and sets of web application icons).

○ All frameworks (e.g. SAPUI5, Unified Rendering) are stored as siblings in a folder.

● Library

○ The baseLib provides the possibility to store data which is common for all libraries.

○ Each framework contains libraries for the several control sets (e.g. libraries for Unified Rendering Light

Speed ("ls") or Unified Rendering classic ("ur")).

● Theme

○ The baseTheme is the theme from which each theme has to inherit directly or indirectly.

○ Each theme folder contains the less files with the actual theming data. The folders for the themes

delivered by SAP have the prefix "sap_".

For the Unified Rendering framework, the files reflect the device name. They describe the delta for each

device and inherit all data from the base.less file which in turn describes the data which all devices have in

common. Each theme folder can also include image folders for LTR and RTL.

The following graphic illustrates the structure of theming files:



UI Theme Designer

http://less2css.org/

http://lesscss.org/



1.1.3 Theming Lifecycle

Several components are involved when you create or edit a theme using the UI theme designer.

The following scenario illustrates the UI theme designer lifecycle:


UI Theme Designer




Table 3:

User ction ctions Performed by the UI Theme Designer

You start the UI theme designer. The tool accesses the theme repository through an

API provided by the theming engine and loads all

available themes (SAP themes and, if available,

custom themes).

You select a theme as the base of your theme (e.g. SAP

Corbu).

The CSS files defining this theme are loaded from the

theme repository.

You select an application as the sample content for the

preview (e.g. a Web Dynpro ABAP application).

The UI theme designer finds out which library is used

and needs to be styled. In our example, the library

theme SAP Corbu for Unified Rendering is loaded.

The application is displayed in the preview area and its

theming parameters are offered for editing.

You make adjustments to the theme you selected by

changing the values of theming parameters or entering

additional CSS rules.

The new theming data is stored in the browser's

cache.

You publish your theme to the server. The theme generator is triggered and generates the

corresponding CSS from the LESS files. A new theme

folder is created in the theme repository. The

generated CSS files are stored in this folder along with

the LESS files.

1.2 Designing Themes

Using the UI theme designer, you create your own themes by changing the values of individual style parameters of

an SAP standard theme and saving it under a new name. You can also edit existing custom themes.

Related Links

Selecting the Starting Point for Your Theme [page 10]

To create a theme, you first need to select a theme as the base of your theme and an application for the preview.

Changing the Main Parameters Using Quick Theming [page 12]

Using the quick theming mode, you can easily change the color scheme, font type, or background image of the

theme you selected as the base of your theme.

Adjusting Individual Parameters Using Expert Theming [page 12]

Using expert theming, you can make fine-tuned adjustments to the theme you selected as the base of your theme.

Adding Custom CSS to Your Theme [page 13]

If you want to make further adjustments to your theme that are not possible by changing the values of the

theming parameters provided in the Quick or Expert tab, you can add CSS rules.

Inserting Images [page 13]

You can add your own icons and images to your theme using drag and drop upload.

Saving Themes as Draft [page 14]

You can save your theme draft in the local browser's persistent storage.



UI Theme Designer



Publishing Themes to the Server [page 15]

Once you have finished editing your theme, you have to publish it to the server to make it available to other users.

Running Applications with the New Theme [page 15]

After you have published your theme to a server, you can run applications with your theme by referencing its ID.

1.2.1 Prerequisites

To be able to use the UI theme designer, several prerequisites must be met.

● Implement SAP Note 1856782 .

● To enable runtime usage of your theme, activate Internet Communication Framework (ICF) service

node /sap/public/bc/themes.

● To enable editing of themes, activate Internet Communication Framework (ICF) service node /sap/bc/

theming.

● For write access to the UI theme designer (create, update, delete themes), you must be assigned the relevant

authorization objects.

For more information, see Authorizations [page 9].

● Since themes are client-specific, the client you use to start the UI theme designer must be the same as the

client of the theme repository. In addition, both need to run on the same server.

● Use one of the following browsers to run the UI theme designer:

○ Google Chrome

○Mozilla Firefox

○ Microsoft Internet Explorer 9

1.2.1.1 Authorizations

You can enable specific user groups to design or to maintain themes.

You assign the relevant authorization objects to specific users using transaction Role Maintanance (PFCG.

The following authorization objects are relevant for the UI theme designer:

● /UI5/THEME_TOOL is required for maintenance tasks (e.g. transporting and deleting themes).

● /UI5/THEME_DESIGNER is required for creating new themes and updating custom themes.

Table 4:

uthorization Object Field Value

/UI5/THEME_TOOL ACTVT Display (03)

ACTVT Change (02)

/UI5/THEME_DESIGNER ACTVT Display (03)

ACTVT Change (02)


UI Theme Designer


https://service.sap.com/sap/support/notes/1856782



1.2.2 Selecting the Starting Point for Your Theme

To create a theme, you first need to select a theme as the base of your theme and an application for the preview.

The UI theme designer only offers the theming options available for the application that you selected for the

preview.

1 Start the UI theme designer using transaction/UI5/THEME_DESIGNER.

2 The New Theme dialog box appears. You have the following options:

○ Select an SAP theme as a template to create a new theme.

Choose the theme which is closest to the design you want to achieve.

We recommend you use SAP Gold Reflection to create themes that should apply to Unified Rendering,

NWBC and SAPUI5.

For more information on the themes delivered by SAP, see SAP Standard Themes [page 18].

○ Select a custom theme and make further adjustments to it, provided you or another user has publishedthemes to the server.

Note that there is currently no mechanism to notify you when a custom theme is edited by several users

at once. To avoid changes to a theme being overwritten, you need to make sure that no other user is

editing the theme you want to work on.

3 Choose Edit.

4 In the Add Target Content dialog box, choose sample content for the preview.

You can add the following content:

○ Your own applications

○ Application preview pages

○ Control preview pages

For Web Dynpro ABAP, application preview pages are only supported as of SAP NetWeaver 7.0 EHP 1.

To add more than one application, choose . The Add Target Content dialog box appears again and you can

choose the application you want to add.

The applications you have added appear in the Target Pages pane and can be selected to be displayed in the

preview area.

Choose to expand the preview to full width.

Use the Original/Preview toggle button to switch between the display of the theme you used as a starting

point and a preview of the current version of your theme.You can now change the values of theming parameters or add CSS rules. The application preview is automatically

adjusted once you have made a change.

Related Links

Editing Modes [page 10]

Depending on the adaptations required to create your theme, you can switch between different editing modes.

1.2.3 Editing Modes

Depending on the adaptations required to create your theme, you can switch between different editing modes.



UI Theme Designer



The UI theme designer offers the following modes of editing themes:

Table 5:

Quick Theming Expert Theming Custom CSS

Allows you to adapt themes in just a

few steps. Only the main theming

parameters affecting all UI

technologies are offered for editing.

A greater number of parameters is

offered for editing, which gives you

advanced options of adapting

themes.

Theming is not based on changing

the values of theming parameters.

Rather, you can add your CSS rules

using a text editor.

For example, you may want to hide

UI controls, change their spacing

and alignment or decrease opacity

to make underlying controls

become visible.

The parameter set is independent of

the theme you selected as the base

of your theme and of the application

you selected for the preview.

Which parameters are available for

editing is dependent on the

following:

● the theme you have selected as

a template

●the application you haveselected for the preview

There are no dependencies between

the parameters. All parameters

have fixed values (e.g. #000000 for

the color black)

There are dependencies between the

parameters, i.e. the value of a

parameter may be derived from the

value of another parameter.

For example, the parameterLink

Color does not have a fixed value.

Rather, it is derived from the

parameter that defines the highlight

color:

Code Syntax

darken(@sapHighlightColor,7)

So when you change the value of the

parameter defining the highlight

color, the value of the parameter

defining the link color is

automatically adjusted.

Related Links

Changing the Main Parameters Using Quick Theming [page 12]



Adjusting Individual Parameters Using Expert Theming [page 12]


Adding Custom CSS to Your Theme [page 13]




UI Theme Designer




1.2.3.1 Changing the Main Parameters Using Quick Theming



You have selected a theme as the base of your theme and an application for the preview.

For more information, see Selecting the Starting Point for Your Theme [page 10].

1 In the side panel on the right, open the Quick tab.

The following types of parameters are displayed along with the current value:

○ parameters defining colors (e.g. highlight or background color)

○ parameters defining the font (e.g. link or text color)

○ parameters defining images (e.g. company logo or background image)

2 Change the parameter values according to your needs.

To change the value of a color parameter, use the value help.

For more information on inserting images, see Inserting Images [page 13].

The preview is automatically adjusted once you have selected a new value.

1.2.3.2 Adjusting Individual Parameters Using ExpertTheming




1 In the side panel on the right, open the Expert tab.

2 Search for the parameters you need to change.

You have the following filter and search options:

○ Filter for parameters that have the same type. The following categories are available:

Table 6:

Category Icon Description

Shows parameters with color value.

Shows parameters related to font.

Shows parameters with dimension value (em, px,

pt, % etc).

Shows parameters representing an image.

Select additional categories to further restrict the list of parameters. For example, select the categories

font and color to filter for all parameters that define the font color.



UI Theme Designer



○ Choose to switch to the tag view.

A list of toggle links with filter categories is displayed. Select a link to add all available parameters with

that tag to the parameter list. Selecting additional links extends the list of parameters displayed.

○ Use the search input field to search for a string in the parameter name.

For example, enter the search string button to filter for all parameters that define the visual appearance

of buttons.

3 Change the parameter values according to your needs.

Use the value help to change color values.

For more information on inserting images, see Inserting Images [page 13].

1.2.3.3 Adding Custom CSS to Your Theme





1 In the side panel on the right, open the CSS tab.

2 Enter your CSS code in the input field.

The CSS you have entered is reflected in the application preview in real time.

1.2.4 Inserting Images

You can add your own icons and images to your theme using drag and drop upload.

You run the UI theme designer using a browser that supports drag and drop upload.

For more information on how to proceed if you are using a browser that does not support drag and drop upload,

see Uploading Images Manually [page 14].

1 Decide which type of image you want to insert:

○ To insert a background image or a company logo, open the Quick tab. The relevant parameters are

displayed in the Image section.

○ To insert other types of images, open the Expert tab.

Choose to display parameters referring to images only.

2 Select the button to the right of the input field with the value for the relevant parameter.

3 Drag and drop an image file from your local files to the Assign Image dialog box. A preview of the image is

displayed.

4 Select the image you want to insert and confirm the dialog box.


UI Theme Designer




1.2.4.1 Uploading Images Manually

If you run the UI theme designer using a browser that does not support drag and drop file upload (for exampleInternet Explorer 9), you must manually upload the images to the server and download them to the UI theme

designer tool.

You have published your theme to the server.

For more information, see Publishing Themes to the Server [page 15].

1 Start the UI theme designer file directory.

To add images using the quick theming mode, use the following path:

https://<hostname>:<port>/sap/bc/theming/themes/Base/baseLib/<themeID>?sap-

client=<client>

To add images for Unified Rendering, use the following path:

https://<hostname>:<port>/sap/bc/theming/themes/UR/baseLib/<themeID>?sap-

client=<client>

2 Navigate to the folder in which the CSS files for your theme are stored.

3 Create a subfolder for images.

a) Enter a folder name in the Dir input field (e.g. "img").

b) Choose Make Dir.

4

Upload your image to the server.

a) Open the folder you have just created.

b) Choose Browse.

c) Select the image file from your local file directory.

d) Enter a name.

e) Choose Upload.

5 Download the image from the server to the UI theme designer tool.

a) Search for the parameter that defines the image you want to replace.

b) In the input field for the parameter value, enter the image path as follows:

./img/<image>.<ext>

1.2.5 Saving Themes as Draft

You can save your theme draft in the local browser's persistent storage.

1 Choose Theme Save Draft .

2 Enter a name and an ID for your theme.

If you reload the UI theme designer application, you can open the theme you have saved as draft in the side panel

on the left and continue to work on it. Note that your theme data might be lost if you delete the browser's cache.



UI Theme Designer



1.2.6 Publishing Themes to the Server

Once you have finished editing your theme, you have to publish it to the server to make it available to other users.

1 Choose Theme Publish .

2 In the Publish dialog box, provide the following:

○ Theme name

○ Theme ID

○ Vendor

Theme name, theme ID, and vendor must not start with "SAP".

3 Choose OK.

Applications can now be run using your theme.

When you restart the UI theme designer, your theme appears in the Select Theme dialog box. You or other users

can select the theme to make further adjustments.

1.2.7 Running Applications with the New Theme

After you have published your theme to a server, you can run applications with your theme by referencing its ID.

Users can run an application with your theme using the URL parameterSAP-THEME. This works for applicationsbuilt in the following UI technologies:

● Web Dynpro ABAP

● SAPUI5 (local URLs)

1 Enter the URL of your application in the address field of your browser.

2 Add the parameter SAP-THEME to the URL.

The value of this parameter contains the ID of your theme and the theme root:

sap-theme=<theme ID>@<theme root>).

The theme root is the URL of the theme repository that contains the theming files.

The relevant theme root is displayed as the value of the parameter sap-webdav-themeroot in the URL of

the UI theme designer application.

The theme root path looks as follows:

https://<hostname>:<port>/sap/public/bc/themes

For NWBC, you can also set your theme for the whole client. To do so, start transaction /UI2/NWBC_CFG_CUST

and enter the ID of your theme as the value of configuration parameterTHEME.

Related Links

#unique_20


UI Theme Designer


http://-/?-

http://-/?-



1.3 Maintaining Themes

The Tool for Customer Theme Maintanance (transaction /UI5/THEME_TOOL) offers several options to maintain

your themes.

Related Links

Transporting Themes [page 16]

You can transport themes from one system to another (e.g. from a test to a production system) using the Tool for

Customer Themes Maintenance.

Exporting Themes [page 17]

You can export your themes as compressed files from the SAP system to your local hard disk using the Tool for


Importing Themes [page 17]

You can import your themes as compressed files from your local hard disk to an SAP system using the Tool forCustomer Themes Maintenance.

Deleting Themes [page 17]

You can delete themes using the Tool for Customer Themes Maintenance.

Invalidating the Server Cache [page 18]

You can invalidate the server cache using the Tool for Customer Themes Maintenance.

Regenerating Themes after Upgrades [page 18]

You may have to regenerate the stylesheet definitions of your theme after you have upgraded your ABAP system

to a higher support package (SP) or implemented a patch for the rendering of one of the supported UI

technologies.

1.3.1 Transporting Themes

You can transport themes from one system to another (e.g. from a test to a production system) using the Tool for


You have administrator rights.

1 Start the Tool for Customer Themes Maintenance using transaction /UI5/THEME_TOOL.

2

Navigate to the theme you want to transport.

3 Select Transport and choose .

Related Links

Exporting Themes [page 17]

You can export your themes as compressed files from the SAP system to your local hard disk using the Tool for




UI Theme Designer



1.3.2 Exporting Themes

You can export your themes as compressed files from the SAP system to your local hard disk using the Tool forCustomer Themes Maintenance.

1 Log on to the system in which the data for your theme is stored.


3 Navigate to the theme you want to export.

4 Select Download and choose .

5 In the Save as dialog box, navigate to the location on your local hard disk where you want to store the theme

files.

6

Enter a file name and choose Save.

A Zip file is created. Its content corresponds to the file structure for theme libraries created by SAP. If you haveadded any custom CSS, it is included in the Zip container.

Related Links

Importing Themes [page 17]

You can import your themes as compressed files from your local hard disk to an SAP system using the Tool for


1.3.3 Importing Themes

You can import your themes as compressed files from your local hard disk to an SAP system using the Tool for


1 Log on to the system to which you want to upload the theme data.

2 Start transaction /UI5/THEME_TOOL.

3

Select Upload and choose .

4 In the Open dialog box, navigate to the file location on your local hard disk where your theme files are stored

and choose Open.

Related Links

Exporting Themes [page 17]You can export your themes as compressed files from the SAP system to your local hard disk using the Tool for


1.3.4 Deleting Themes

You can delete themes using the Tool for Customer Themes Maintenance.


2 Navigate to the theme you want to delete.


UI Theme Designer




3 Select Delete and choose .

4 Confirm the Delete Theme dialog box.

1.3.5 Invalidating the Server Cache

You can invalidate the server cache using the Tool for Customer Themes Maintenance.

1

Start the Tool for Customer Themes Maintenance using transaction /UI5/THEME_TOOL.

2 Select Invalidate Cache and choose .

1.3.6 Regenerating Themes after Upgrades

You may have to regenerate the stylesheet definitions of your theme after you have upgraded your ABAP system

to a higher support package (SP) or implemented a patch for the rendering of one of the supported UI

technologies.

Your themes are always based on SAP themes. If the SAP theme on which your theme is based was upgraded to a

new version with a higher SP stack or patch, rendering issues may occur. To avoid them, you need to regenerate

the CSS files of your theme.

1 Start the UI theme designer using transaction/UI5/THEME_DESIGNER.

2 Select your theme in the New Theme dialog box.

3 Choose Theme Publish .

4 Confirm the dialog box.

The CSS files are generated.

1.4 Reference

1.4.1 SAP Standard Themes

A custom theme is always based on the theme template provided by SAP.

You can use one of the following SAP standard themes as the base of your theme:



UI Theme Designer



Table 7:

Theme name Description UI technologies supporting the

theme

SAP Blue Crystal Platform-independent design. SAPUI5

SAP Corbu Light, neutral theme with

particularly good readability. The

predefined colors are grey and

white backgrounds with black

headers and orange and blue

highlights.

Unified Rendering, NWBC

SAP Gold Reflection Visually matches SAP Corbu.

This theme supports the quick

theming mode.

Unified Rendering, NWBC, SAPUI5

SAP Mobile Visual Identity Visually matches SAP Corbu. SAPUI5 Mobile

The following themes are only available to allow backwards compatibility:

Table 8:

Theme name Description

SAP High Contrast Black An accessibility theme for visually impaired users. The

background is black, text and user interface controls

are white, providing maximum contrast.

SAP StreamlineUses light blue backgrounds that look good on

monitors and newer presentation media, but tend to

fade out when displayed through older beamers or

LCD screens. It also uses a range of harmonic, similar

color tones (mainly shades of blue with different dark-

light values) in most elements.

SAP Tradeshow The primary choice for sales and presentation

situations. It offers a stronger light-dark contrast than

the SAP Streamline theme by using darker border

and background colors that stand out against the light

background. It uses stronger shades of blue that

display well on all beamers and LCD screens.

SAP Tradeshow Plus Theme that enhances the Tradeshow with color

gradients.


UI Theme Designer




www.sap.com/contactsap

© 2013 SAP AG or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any

form or for any purpose without the express permission of SAP AG.

The information contained herein may be changed without prior

notice.

Some software products marketed by SAP AG and its distributors

contain proprietary software components of other software

vendors. National product specifications may vary.

These materials are provided by SAP AG and its affiliated

companies ("SAP Group") for informational purposes only, without

representation or warranty of any kind, and SAP Group shall not be

liable for errors or omissions with respect to the materials. The only

warranties for SAP Group products and services are those that are

set forth in the express warranty statements accompanying such

products and services, if any. Nothing herein should be construed asconstituting an additional warranty.

SAP and other SAP products and services mentioned herein as well

as their respective logos are trademarks or registered trademarks

of SAP AG in Germany and other countries.

Please see http://www.sap.com/corporate-en/legal/copyright/

http://www.sap.com/corporate-en/legal/copyright/index.epx

http://www.sap.com/contactsap

Developer Guide for UI Theme Designer 10

Documents

Transcript of Developer Guide for UI Theme Designer 10