UI Theme Designer

Developer Guide PUBLIC

Document Version: 1.22.0 – 2016-11-17

UI Theme Designer

Content

1 UI Theme Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2 What's New in UI Theme Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.1 What's New in UI Theme Designer 1.22. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 What's New in UI Theme Designer 1.20. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62.3 What's New in UI Theme Designer 1.16. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72.4 What's New in UI Theme Designer 1.14. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72.5 What's New in UI Theme Designer 1.12. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82.6 What's New in UI Theme Designer 1.9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.7 What's New in UI Theme Designer 1.8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.8 What's New in UI Theme Designer 1.6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122.9 What's New in UI Theme Designer 1.4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132.10 What's New in UI Theme Designer 1.2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

3 Get Started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.1 Before You Start. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.2 Available Documentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.3 Launching the UI Theme Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.4 Supported Browsers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4 Theming Overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.1 UI Theme Designer Key Features and Benefits. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.2 Basics of Theming. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224.3 Structure of Theming Files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244.4 Keyboard Shortcuts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26

5 Design Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275.1 Creating a New Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

SAP Blue Crystal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29SAP Gold Reflection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

5.2 Editing an Existing Custom Theme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .315.3 Adding Target Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Adding Custom SAPUI5 Applications as Target Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .335.4 Working with Theme Parameters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Defining Color Parameters for Reuse. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Changing the Main Parameters Using Quick Theming. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Adjusting Individual Parameters Using Expert Theming. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Adding Custom LESS and CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

2 P U B L I CUI Theme Designer

Content

Inserting Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Typical LESS Functions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

5.5 Saving Themes as Draft. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425.6 Publishing Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Deploying Themes to SAP Cloud Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

6 Manage Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466.1 Ensuring Upgrade Compatibility for Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Manually Upgrade Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Setting a Fixed SAPUI5 Version for Custom Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

6.2 Setting Themes for SAPUI5 Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Accessing Custom Themes from an SAPUI5 Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Setting Themes Via URL Parameter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51Setting Themes Via the SAPUI5 Bootstrap Configuration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

6.3 Importing Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526.4 Exporting Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536.5 Deleting Themes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

7 Secure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .557.1 Protecting Access to UI Theme Designer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557.2 Clickjacking Framing Protection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

UI Theme DesignerContent P U B L I C 3

1 UI Theme Designer

Table 1:

page 6 What's New [page 6]

Learn about all new features for a particular release.

page 16 Get Started [page 16]

Learn how to set up and start UI theme designer.

page 21 Learn About [page 21]

Understand the basic concepts of theming and learn what the features and benefits of UI theme designer are.

page 27 Design [page 27]

See how easy it is to build themes with the UI theme designer.

page 46 Maintain [page 46]

Learn how to set themes and ensure compatibility after upgrades.

page 55 Secure [page 55]

Find out more about security aspects.


UI Theme Designer

2 What's New in UI Theme Designer

In the following sections, we list the main new features and enhancements in UI theme designer 1.22.

Related Information

What's New in UI Theme Designer 1.22 [page 5]What's New in UI Theme Designer 1.20 [page 6]What's New in UI Theme Designer 1.16 [page 7]What's New in UI Theme Designer 1.14 [page 7]What's New in UI Theme Designer 1.12 [page 8]What's New in UI Theme Designer 1.9 [page 9]What's New in UI Theme Designer 1.8 [page 11]What's New in UI Theme Designer 1.6 [page 12]What's New in UI Theme Designer 1.4 [page 13]What's New in UI Theme Designer 1.2 [page 14]

2.1 What's New in UI Theme Designer 1.22

In the following sections, we list the main new features and enhancements in UI Theme Designer for software component SAP_UI 751 SP01 (UI Theme Designer version 1.22).

New Welcome Screen

UI Theme Designer presents you with a new welcome screen that can be divided into the following sections:

● Top sectionThis section is for the display of action buttons, such as those for creating a new theme and importing a theme.

● Lower sectionThis section is divided into the following areas by a movable splitter bar:○ Left side

This side is for managing your own custom themes. Here, you can search for and edit your theme. Additionally, you can rebuild, duplicate and delete themes.

○ Right sideThis side is for viewing and editing the properties of your selected custom theme.

Note that only your custom themes, and no SAP themes, are displayed on the welcome screen.

UI Theme DesignerWhat's New in UI Theme Designer P U B L I C 5


Several new or changed features are available with UI theme designer 1.20.

Quick Theming (Changed)

The Quick tab has been redesigned to allow you to create themes even faster and easier. This tab now offers more parameters and the parameters are grouped more clearly guiding you through the theming process. For example, you can find the most important parameters that can be used to theme a specific control in one section.

See Changing the Main Parameters Using Quick Theming [page 36]

A new preview page QuickTheming is available for Unified Rendering. It shows the most important controls which are affected by changes in the Quick tab.

Automatic Theme Upgrade (New)

A theme only works for the SAPUI5 version for which the theme was built when it was exported from the UI theme designer. In SAP HANA Cloud Platform, SAPUI5 is automatically upgraded once a new version is available. To ensure that your theme is compatible with the current SAPUI5 version, you need to upgrade it.

If you run the UI theme designer on SAP Fiori launchpad on SAP HANA Cloud Portal, you can use the theming service to rebuild the theme automatically whenever the SAPUI5 version changes. To enable the theming service to upgrade a theme automatically, you need to configure this option in the Theme Manager.

For more information, see Ensuring Upgrade Compatibility for Themes [page 46].

UI Design (Changed)

As part of an enhancement to the UI theme designer appearance, you can now enjoy a new UI design.

Usability Improvements for the Start Screen (New)

The start screen has been redesigned to improve usability. The following changes are available:

● The Filter Themes pane was replaced by a search field. Simply enter search terms to filter the theme list.● The following information has been added to the table displaying the list of available themes:

○ Status○ Vendor○ Based On


What's New in UI Theme Designer

● The start screen now gives you an idea of what a selected theme looks like: When you select a theme in the list, its main colors are displayed as a preview.

● Responsiveness was improved. For example, the theme list and the area with theme properties are displayed as separate tabs when there is not enough space on the screen.

● The order in which buttons appear was changed.



Usability Improvements

The error messages for input fields on the Save and Properties dialog box and for parameter input fields on the Quick and Expert tab were improved.



Control Picker (Experimental, New)

Finding the relevant parameters for theming will now become easier. Choose in the Expert tab to switch on the control picker mode. Selecting elements in the preview page will filter the parameter list for parameters used to define this control.

See Adjusting Individual Parameters Using Expert Theming [page 37].

Theme Support (Changed)

SAP Corbu was removed from the theme list on the start screen. We recommend you choose SAP Blue Crystal as the starting point for your custom themes.


Browser Support (Changed)

The browser support matrix was updated.

See Supported Browsers [page 19].

Keyboard Support (Changed)

The support of keyboard navigation was improved.

See Keyboard Shortcuts [page 26].

UI Design (Changed)

As part of an enhancement to the UI theme designer appearance, you can now enjoy a new UI design.


● The Import option can now also be called from the Theme menu. Before, it was only available on the start screen.

● The About dialog box now displays additional information on the versions of repositories. This information can be used for problem analysis.



Importing Themes (Changed)

The behavior when you import a custom theme was changed:

● When you import a theme, it is opened for editing but it is no longer saved automatically. To save the theme to the browser's local storage, you select Theme Save Draft .

● When you save an imported theme, the UI theme designer checks if a theme with the same ID already exists in the repository. If yes, you have the option to either change the theme ID or overwrite the existing theme.



Integration with SAP Web IDE (New)

As of SAP Web IDE 1.11, you can directly access the UI theme designer from the Tools menu or from the Helpful Links section on the Welcome page of SAP Web IDE.

For more information on SAP Web IDE, see https://help.hana.ondemand.com/webide/frameset.htm.

Visual Design (Changed)

The visual design of the UI theme designer was changed. SAP Blue Crystal theme is now used. The visual design was adjusted to the SAP Web IDE design principles.

Header Bar (Changed)

The following new features are available in the header bar:

● Logout buttonUse the Logout button to end your session. To log back in, you reload the page.

● User nameThe name of the user who is currently logged on to the UI theme designer is displayed in the header bar.


The target pages panel on the left can now be resized using the cursor or by pressing SHIFT + ARROW.

For an overview of all new features and solved issues per patch, see http://scn.sap.com/docs/DOC-59573 .



UI Theme Designer for Productive Use

UI theme designer is now for the first time available for productive use on hana.ondemand.com (Europe), us1.hana.ondemand.com (United States) and ap1.hana.ondemand.com (Asia-Pacific).

The following list gives an overview of the major features that UI theme designer 1.9 provides:


https://help.hana.ondemand.com/webide/frameset.htm

http://help.sap.com/disclaimer?site=http://scn.sap.com/docs/DOC-59573

● Create custom themes based on SAP standard themes for SAPUI5 applications (for example, SAP Fiori or SAP Fiori launchpad)

● Import custom themes from your local hard disk to the UI theme designer● Export custom themes from the UI theme designer to your local hard disk or to SAP HANA Cloud Platform● Browser-based, graphical WYSIWYG editor:

Change the values of theming parameters and immediately see how it affects the visualization of the selected preview page.

● Build-in preview pages:Select built-in preview pages to see what your custom theme will look like when it is applied to an application:○ Application previews (for example, Purchase Order Approval, SAP Fiori launchpad)○ Control previews

● Color palette for reuse:Specify a set of parameters with the main color values defining your corporate branding

UI Theme Designer for Trial Use

Compared to version 1.8, UI theme designer 1.9 includes the following new or changed features for trial use on hanatrial.ondemand.com:

Helium Application (New)

The UI theme designer is now available as a Helium SAPUI5 application on the SAP HANA Cloud platform. The old URL https://themedesigner.hanatrial.ondemand.com/ will automatically redirect to the new one.

For more information on how to get started with the new UI theme designer application, see Launching the UI Theme Designer [page 18].

Custom CSS for NWBC (New)

You can now also add custom CSS for NWBC themes.

See Adding Custom LESS and CSS [page 39].

Preview Pages (New)

The following preview pages are now built-in:

● SAP Fiori launchpad● FPM Overview Page● FPM Search Page

Parameter Search (Changed)

The search for Expert parameters was simplified. You have the following additional options:

● UI element highlightingA visualisation of the Expert parameters is now available. If you select a parameter in the Expert view, the UI elements that are affected by this parameter are highlighted in the preview area.

● CSS searchWith the CSS search option in the Expert pane, you can search for parameters used in CSS rules.

See Finding the Relevant Expert Parameters (Experimental) [page 38].




https://themedesigner.hanatrial.ondemand.com/

● Properties Dialog (New)After you have saved a custom theme, it is now possible to edit its title or the name of the vendor. You can call the Properties dialog from the start screen or by choosing Theme Properties in the menu bar of the main screen.

● Persistence of Target Pages (New)The target pages (application previews and control previews) that you have added in your last UI theme designer session are now saved and loaded automatically when you open a new session.

● Help Menu on Start Screen (New)The Help menu providing a link to the online help and information on the current UI theme designer version can now also be opened from the start screen.

● Display of Target Pages List (Changed)The display of the target pages list was changed.

Performance Improvement (New)

The performance when you initially load the UI theme designer application was improved.




Palette (New)

In the new Palette tab, you can now define a set of palette parameters with colors for reuse. The palette colors appear in the Palette section of the color picker. The palette parameters are saved with the custom theme.

For more information, see Defining Color Parameters for Reuse [page 35].

SAP Blue Crystal Support for Unified Rendering (New)

The SAP standard theme Blue Crystal is now also supported for theming of Unified rendering applications.


● The panel on the right can now be resized using the cursor or by pressing SHIFT + ARROW .● You can now edit applications you added as target pages. Open the context menu for the target page and

choose Edit to open the Add Target Content dialog. You can edit URL and name of the target application.● The performance was improved.



Visualisation Changes

● The visualisation of the tabs in the right panel was changed. The tabs are now displayed by icons.




Delta Filter (New)

In the Expert tab, you can now choose to display changed parameters only.

Tag Filter (Changed)

The tag filter now uses an AND instead of an OR logic. Therefore, selecting additional tags restricts the list of parameters displayed rather than extending it.

Usability Improvements (New)

The following usability improvements are available for the parameter list:

● In the Quick tab, a checkbox is now displayed for boolean values.● The current color value is displayed as a tooltip of the color swatch.● The calculated value is displayed in the callout that appears when hovering over a parameter name.● The search in the Expert tab was changed to a live search. The list of displayed expert parameters is updated

once you enter a new character in the search field.

For an overview of all new features and solved issues, see http://scn.sap.com/docs/DOC-59573 .







Importing Themes (New)

An Import button is now available on the initial screen, allowing you to import themes as an archive file from your local hard disk to the UI theme designer.

Save as Draft (New)

The Theme menu now offers a Save Draft option.


The following usability improvements are available:

● The initial screen is now displayed as full screen rather than as a popup.● The Theme menu now offers a Close option, which allows you to navigate back to the initial screen. If you have

any unsaved changes, a dialog box will offer you to save or dicard your changes.● The info page in the right pane on the initial screen now displays information on the status of a theme:

Table 2:

Theme is a read-only SAP standard theme This status is used to separate SAP standard themes from custom themes.

If you select this theme and choose Open, a copy of the original SAP standard theme will be created and opened for editing.

Theme has not yet been built Only the LESS files defining this theme were saved. In order for this theme to be applied to an application, the CSS files have to be built from the LESS files.

● The usability of the parameter list was improved. Changed parameters are marked with bold font. The (Options) icon is now only displayed on hover.


Performance Improvements (New)

The performance of image uploads was improved.

For an overview of all new features and solved issues for each patch, see http://scn.sap.com/docs/DOC-59573.



Custom LESS and CSS Support (Changed)

The CSS tab, which allows manual CSS editing, is now also active for Unified Rendering.

Moreover, custom LESS is now supported in addition to native CSS. For example, you can reference base theme parameters and overwrite their value.

Note that you now have to select Apply to activate any changes you have made in the CSS tab.

RTL Support (New)

The UI theme designer is now able to generate style sheets for both left-to-right and right-to-left languages. Note that the support of RTL is dependent on the SAP theme you used as the base of your theme. For more information, see SAP Note 1852400 .


The following usability improvements are available:

● You can now reset the value of a theme parameter to the value last saved. Before, it was only possible to reset to the original value.

● Applications added for the preview can be removed.● A Reload button is now available to reload the application that is displayed in the preview area.● On the initial screen, an info page is now displayed for each SAP theme and for each custom theme including

the following information: SAP standard theme on which the theme is based (e.g. SAP Corbu), vendor (e.g. SAP), text direction (RTL, LTR, or both)





http://help.sap.com/disclaimer?site=https://launchpad.support.sap.com/#/notes/1852400

Performance improvements (New)

The performance of the UI theme designer was improved, for example by asynchronous file accesses.

For an overview of all new features and solved issues, see http://scn.sap.com/docs/DOC-59573 .



3 Get Started

Set up UI theme designer by subscribing to it in the cloud.

3.1 Before You Start

Consider the following important information before you start working with UI theme designer.

Custom Themes and UI Theme Designer

Table 3:

What is a custom theme? See Basics of Theming [page 22].

What kinds of changes can I make in a custom theme? The UI theme designer allows you to make changes at several technical levels.

See Working with Theme Parameters [page 34].

Which platforms and UI technologies are supported in a custom theme?

Which SAP standard themes can I use as the base of a custom theme?

Currently, you can only build themes that can be applied to SAPUI5 applications. Theming for other UI technologies is experimental.

See SAP Note 1852400 .

How compatible is a custom theme? Themes are designed to work with a variety of browsers, but a custom theme only works properly for the version and patch of the UI technology it was built for. If the UI technology has changed, for example via an upgrade, any custom theme will need to be rebuilt to ensure it works properly.

See SAP Note 2119552 and .

See Ensuring Upgrade Compatibility for Themes [page 46].

How can I apply my custom themes to an application? Due to security limitations (cross-site scripting vulnerabilities), it is currently not possible to use the UI theme designer to directly theme an application running on a different server, due to the different domain. Either the application needs to be installed on an instance running the UI theme designer or the UI theme designer needs to be installed on the instance running the application. It is possible to deploy custom themes on a server without the UI theme designer installed, but since you need to rebuild themes after an upgrade, this is not recommended.


Get Started


http://help.sap.com/disclaimer?site=http://service.sap.com/sap/support/notes/2119552

Which browsers are supported for custom themes? Support for various browsers varies depending on which SAP standard theme the custom theme is based, as well as which UI technology is considered. Compatibility is also influenced by any custom CSS that is added to the custom theme.

See Product Availability Matrix (PAM):https://support.sap.com/release-upgrade-maintenance/pam.html

Which browsers are supported for the UI theme designer? See Supported Browsers [page 19].

For browser-specific restrictions, see SAP Note 2202642

SAP Support

Table 4:

Where can I find a history of all delivered UI theme designer versions?

See UI Theme Designer version history (SCN) .

Where can I find more information on the UI theme designer? See UI Theme Designer Developer Center (SCN) .

Where can I discuss issues with others or provide feedback on the UI theme designer?

UI Technology Community (SCN) provides a community for UI theme designer and related issues. Select the category “UI theme designer” when you create a post.

How can I create a support issue on themes or the UI theme designer?

If you are unable to find a solution on SCN, it is possible to create a support message on the SAP Support Portal using one of the following components:

● UI theme designer: CA-UI2-THD● SAPUI5 theme issues: CA-UI5● Unified Rendering theme issues: BC-WD-UR

Which features are covered by SAP support? The use of quick theming and expert theming is supported.

Restrictions may apply in the documentation or are displayed in the UI theme designer.

Support needs to be requested via the SAP Support Portal using the correct component (see above).

Which features are not covered by SAP support? Theme changes performed outside the UI theme designer are not supported.

The use of custom CSS is without any support. Applications using themes containing custom CSS are susceptible to breaking due to changes to the applications or the UI technologies used. After an upgrade, custom CSS must be checked and maintained by the customer.

UI Theme DesignerGet Started P U B L I C 17

http://help.sap.com/disclaimer?site=https://support.sap.com/release-upgrade-maintenance/pam.html






http://help.sap.com/disclaimer?site=http://scn.sap.com/community/ui-technology/content?filterID=contentstatus%5bpublished%5d~category%5bui-theme-designer

3.2 Available Documentation

List of links to the platform-specific documentation available for the UI theme designer.

The UI theme designer is delivered to a variety of platforms. For more information about functions that are specific to a particular platform, please refer to the following guides:

● SAP HANA Cloud PlatformThe current documentation refers to the UI theme designer on SAP HANA Cloud Platform.To access the platform-specific user guide, go to SAP HANA Cloud Platform.

● SAP NetWeaver Application Server for ABAPThe current documentation refers to the UI theme designer on SAP NetWeaver Application Server for ABAP.To access the platform-specific user guide:○ For User Interface Add-On for SAP NetWeaver:

Go to User Interface Add-On for SAP NetWeaver, select a release and choose Application Help: SAP Library UI Theme Designer .

○ For SAP NetWeaver with software component SAP_UI:Go to http://help.sap.com/netweaver, select a release (SAP NetWeaver 7.4 or higher) and choose

Application Help: SAP Library UI Technologies in SAP NetWeaver UI Theme Designer .● SAP Enterprise Portal

To access the platform-specific user guide, go to http://help.sap.com/netweaver, select a release (SAP NetWeaver 7.3 or higher) and choose SAP NetWeaver Portal Managing the Portal System Administration Working with Portal Themes Working with the UI Theme Designer .

For an overview of platform-specific features, see http://scn.sap.com/docs/DOC-64653 .

3.3 Launching the UI Theme Designer

Prerequisites

● You have signed up for an SAP Cloud Platform developer account.See Getting an Account.

● In the SAP Cloud Platform cockpit, your user is added as an account member.See Assigning Members to Accounts

● Your role is assigned to the UI theme designer permission.See Protecting Access to UI Theme Designer [page 55].


Get Started

https://help.hana.ondemand.com/theme_designer/frameset.htm

http://help.sap.com/nw-uiaddon/

http://help.sap.com/netweaver

http://help.sap.com/netweaver


https://help.hana.ondemand.com/help/frameset.htm?975c8fc61a384668a82e91c8448deb0b.html

https://help.hana.ondemand.com/help/frameset.htm?937c3cef72bb101490cf767db0e91070.html

Procedure

1. Log on with a user (who is an account member) to the SAP Cloud Platform cockpit, using the developer account at one of the following URLs:

Table 5:

Productive Use Trial Use

○ https://account.hana.ondemand.com/cockpit (Europe)

○ https://account.us1.hana.ondemand.com (United States)

○ https://account.ap1.hana.ondemand.com (Asia-Pacific)

https://account.hanatrial.ondemand.com/cockpit

2. Choose Subscriptions.3. In the Subscribed HTML5 Applications section, choose New Subscription.4. In the New HTML5 Subscription dialog box, choose the existing themedesigner subscription.

An application URL is displayed.5. In the Application column, select the new themedesigner entry.6. Under Active Version, click the URL or copy it into your browser.

For a list of browsers supported by the UI theme designer, see Supported Browsers [page 19].

NoteWe recommend you use Google Chrome since the local storage of other browsers is limited.

Please also note that private mode (e.g. InPrivate Browsing for Internet Explorer or Incognito Mode for Google Chrome) is not supported for launching the UI theme designer.

Related Information

Customize Theme in SAP Fiori, Trial Cloud Edition

3.4 Supported Browsers

Overview of the browser support for UI theme designer on Windows and Mac OS X platforms.

NoteThe UI theme designer currently only supports operating systems for desktop devices. iOS, Android and Black Berry are not supported. Windows and Mac OS X are not supported on phones and tablets.

Please note the browser-specific restrictions mentioned in SAP Note 2202642 .

UI Theme DesignerGet Started P U B L I C 19

https://faas-rds.dispatcher.hana.ondemand.com/style.html


The following tables give an overview of the platforms and browser versions supported by the UI theme designer.

Windows 7, 8.0 and 8.1

Table 6:

Browser Supported

Microsoft IE Version 11

Google Chrome Latest version

Mozilla Firefox Latest Rapid Release (RR) and Extended Support Release (ESR)

Windows 10

Table 7:

Browser Supported

Microsoft IE Version 11

Microsoft Edge Latest version


Mozilla Firefox Latest RR and ESR

MAC OS X 10.9, 10.10 and 10.11

Table 8:

Browser Supported

Apple Safari Latest version



Get Started

4 Theming Overview

Understand the basic concepts of theming and learn what the features and benefits of UI theme designer are.

4.1 UI Theme Designer Key Features and Benefits

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

One single tool for theming and branding SAP’s key user interfaces

Apply your corporate branding and look to applications built with SAP UI technologies. The UI theme designer is a browser-based tool for cross-theming scenarios. Use it to easily build your corporate identity themes by modifying one of the theme templates provided by SAP. For example, you can change the color scheme, or add your company's logo. The tool is targeted at different user groups, including developers, visual designers, and administrators.

To get an impression of how UI theme designer helps you provide a seamless and delightful experience for your users across different UI technologies, watch this video:

UI Theme Designer - Brighten Your BusinessInformation published on non-SAP site

Key Features and Benefits

● Browser-based, graphical WYSIWYG editor:Change the values of theming parameters and immediately see how it affects the visualization of the selected preview page.

● Build-in preview pages:Select built-in preview pages to see what your custom theme will look like when it is applied to an application:○ Application previews (for example, Purchase Order Approval, SAP Fiori launchpad)○ Control previews

● Different levels of theming:○ Quick theming (basic cross-technology theme settings)○ Expert theming (technology-specific theme settings)○ Manual LESS or CSS editing

● Color palette for reuse:Specify a set of parameters with the main color values defining your corporate branding

● Control picker:Simply select controls in the preview page to display a list of parameters that can be used to change its appearance.

● Cross-technology theming:

UI Theme DesignerTheming Overview P U B L I C 21

http://help.sap.com/disclaimer?site=https://www.youtube.com/watch%3Fv=R-dh5j6D7fk

Create one consistent theme that applies to various SAP UI clients and technologies:○ SAPUI5 standard libraries (including SAP Fiori applications and SAP Fiori launchpad)○ (Experimental): Unified Rendering technologies (such as Web Dynpro ABAP and Floorplan Manager)○ (Experimental): SAP Business Client

NoteThe supported features are dependent on the platform used to run the UI theme designer. For an overview of platform-specific features, see http://scn.sap.com/docs/DOC-64653 .

Table 9:

SAP UI client or technology UI parts that can be themed

Web Dynpro ABAP You can theme applications that do not use the following UI elements:

HTMLIsland

HTMLContainer

Chart

FlashIsland

SilverlightIsland

BusinessGraphics

You can only consume themes created with the UI theme designer for Web Dynpro ABAP applications as of SAP NetWeaver 7.0 EHP2.

Floorplan Manager for Web Dynpro ABAP (FPM) You can theme applications that do not use HTMLIslands or Chart UIBBs.

SAPUI5 You can theme SAP standard libraries. Custom SAPUI5 libraries cannot be themed.

SAP Business Client (NWBC) ● NWBC for Desktop (4.0 or higher): You can theme NWBC shell and overview pages (index page, new tab page, service map).

● NWBC for HTML (3.6): You can theme the service map. The shell cannot be themed.

4.2 Basics of Theming

Here you find information about the basic concepts that are involved when creating themes with the UI theme designer.

What is a Custom Theme?

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 an application to suit the purpose, topic, or tastes of different users.


Theming Overview


A custom theme is a new theme adapted from an SAP standard theme that includes changes desired by a customer. A custom theme is typically created using the UI theme designer to change theme parameter values, images, and other resources. The UI theme designer generates the CSS for the custom theme which can then be deployed to the target server along with any uploaded images or other resources. The degree of support for the custom theme depends on the features used. Themes may support one or more UI technologies.

The Source Language LESS

The UI theme designer uses the style sheet language LESS (Leaner CSS) as the source file format for theming data. LESS extends CSS with dynamic behavior such as variables, mixins, operations, and functions. These techniques allow you to make CSS that is more maintainable, themable and extendable.

With LESS, you can define variables centrally and reuse them throughout the style sheet. You simply use an @ sign to define a variable and a colon to assign its value:

@myColor:value

Rather than repeating the value, you can reference the variable. During the CSS build process, the values of the variables are inserted into the output CSS file.

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 relationships between properties. Functions allow the manipulation of values. For example, you can define a color by desaturating another color:

@myColor:desaturate(@color1, 10%);

How the UI Theme Designer Uses LESS

The UI theme designer exposes a set of LESS-based theming parameters in the Quick and Expert tab. Theming parameters can be color values, text sizes, icons, background images, etc. For example, the Quick tab offers the theming parameter @sapHighlightColor.

Changed parameters are stored in the custom theme. In the theme build process, the changes to the SAP standard theme are concatenated. The theme generator substitutes all references to the CSS variable by the current value of this variable. Thus, the final CSS contains the redefined properties (for example a different highlight color).

Since custom themes only store the custom changes, future updates to the base themes will propagate to the custom theme parameters that have not been changed.


Related Information

http://lesscss.org/http://less2css.org/Typical LESS Functions [page 41]

4.3 Structure of Theming Files

The files defining custom themes and SAP standard themes are stored in the theme repository.

The folders containing these files have the following structure:

● FrameworkAt the top level, you can find a folder for each framework (for example SAPUI5, Unified Rendering, NWBC).Unified Rendering is a rendering technology that is generally supported and used by Web Dynpro ABAP, Floorplan Manager, and other UI technologies. It has two versions: Unified Rendering Classic and Unified Rendering Light Speed.


Theming Overview

http://help.sap.com/disclaimer?site=http://lesscss.org/

http://help.sap.com/disclaimer?site=http://less2css.org/

The Base folder contains data that is shared by all frameworks (e.g. the SAP main colors and sets of web application icons).

● LibraryEach framework folder contains folders for the libraries. A library defines a set of controls and their rendering.Unified Rendering contains, for example, Unified Rendering Light Speed ("ls") and Unified Rendering Classic ("ur").SAPUI5 contains, for example, sap.ui.commons (controls like TextField and Button) and sap.m (controls for mobile devices).The baseLib folder provides the possibility to store data which is common for all libraries.

● ThemeEach library folder contains folders for the themes with the corresponding LESS files. The folders for the themes delivered by SAP have the prefix "sap_". The title of the custom folders is the ID that was entered when saving the theme.The base theme is the theme from which each theme inherits directly or indirectly.

The following graphic illustrates the structure of theming files:

NoteYou can use the theme repository browser to display the theming data.

For more information, see .


4.4 Keyboard Shortcuts

You can use keyboard shortcuts to perform actions in UI theme designer.

The following shortcuts are available:

Table 10:

Microsoft Windows Keyboard Shortcut Action

TABSHIFT + TAB

Move forwards or backwards in the tab chain to select the elements (e.g. navigate to the Help menu on the start screen).

LEFT ARROWRIGHT ARROW

Navigate between elements on the same hierarchy level.

UP ARROWDOWN ARROW

Navigate up and down to an element in the hierarchy.

ENTER Execute menu items or buttons.

CTRL + W Close a browser window.

ESCAPE Close a dialog box.

CTRL + SHIFT + A Apply custom CSS.


Theming Overview

5 Design 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.

● Creating a New Theme [page 27]● Adding Target Content [page 31]● Defining Color Parameters for Reuse [page 35]● Working with Theme Parameters [page 34]● Publishing Themes [page 43]●

You perform the following major steps to create or edit a theme using the UI theme designer:

1. Launch the UI theme designer.2. Select an SAP theme as the base for your custom theme using the Create Theme wizard.3. Add target content for the preview.4. (Optional) Define palette parameters for reuse.5. Adjust the theme you selected in step 2.

1. Change basic theme parameters.2. (Optional) Change technology-specific parameters.3. (Optional) Add custom LESS or CSS.

6. Save your theme.7. Make your theme ready to be applied to an application.

5.1 Creating a New Theme

You can create a custom theme using the Create New Theme wizard.

Prerequisites

Start the UI theme designer.

UI Theme DesignerDesign Themes P U B L I C 27

Use transaction /UI5/THEME_DESIGNER in your ABAP backend system.

For supported browsers, see Before You Start [page 16].

Procedure

1. On the welcome screen, choose Create Theme to start the wizard. The first step is displayed: Step 1: Choose base theme.

Select an SAP standard theme as your base theme. Note that you will not edit the SAP standard theme itself; rather, you will adjust a copy of it and save it under a new name.

Table 11:

Theme name UI technologies or clients supporting the theme

SAP Blue Crystal ○ SAPUI5

NoteFrom SAPUI5 1.40 onwards, SAP Blue Crystal is not supported for SAPUI5.

For restrictions, see SAP note 2339406 .

For the migration of custom themes from SAP Blue Crystal to SAP Belize, see SAP note

2329884 .

○ Unified Rendering technologiesSee SAP Note 2000125

SAP Gold Reflection ○ SAPUI5 (desktop applications)○ Unified Rendering technologies○ NWBC

Check the dependencies between the SAP theme and the UI technologies that support it. For more information, see .

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

2. Step 2: Name your theme

Enter a title and an ID for your theme. You can skip this step and enter this information later if you wish.3. Step 3: Set Options

You can enter the following optional information:○ Vendor

Here, you could enter the name of the organization who creates the theme.

NoteDo not start the name of this field with the letters SAP.


Design Themes




○ Support RTLShould your theme support Right-to-Left languages? Note that if you select this field, additional style sheets are created by the system and this could incur performance issues.

4. Choose Create Theme.

The wizard is closed and you are directed to the Add Target Content screen.

Related Information

Adding Target Content [page 31]

5.1.1 SAP Blue Crystal

SAP Blue Crystal provides a consistent, responsive design that allows users to seamlessly experience SAPUI5 apps across the interaction channels desktop, tablet, and mobile.

The following image shows an example of the visual design:


5.1.2 SAP Gold Reflection

SAP Gold Reflection is a fresh, modern, and unique visual identity. The shell header has a dark background with a gold line at the top. The visual design of the content area is identical with SAP Corbu: the predefined colors are grey and white backgrounds with black headers and orange and blue highlights.

Gold Reflection and Corbu have a very similar visual design language. Apart from some conceptual and framework related differences, the visualization of UI controls is identical. The main visual difference is the usage of icons, and the appearance of the application shell.

The following image shows an example of the visual design:


Design Themes

5.2 Editing an Existing Custom Theme

You can select an existing custom theme to make further adjustments to it.

Context

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.

To edit an existing custom theme, complete the following steps:

Procedure

1. Start the UI theme designer.2. In the Themes section in the lower half of the welcome screen, select your existing custom theme. If you have

several custom themes, you can use the search field to locate one.

Custom themes are only available in this section if users have made them available in the UI theme designer.

See Importing Themes [page 52].

You can copy a custom theme and use it as the base to create another theme.3. Choose Edit

You are redirected from the welcome screen to the editor. Here, you can change the values of theming parameters and add CSS rules.

5.3 Adding Target Content

Once you have selected a theme, you need to be able to preview any changes you make to it. You add target content (pages and applications) that allow you to see how the changes you make look in different UI technologies (e.g. SAP Fiori launchpad).

Prerequisites

You have selected a theme as the base of your theme.

See Creating a New Theme [page 27].


Context

The previews available in the Add Target Content section depend on the base theme that you selected. Only preview pages for UI technologies that support the selected base theme are displayed.

Procedure

1. Choose sample content for the preview.

You can add the following content:

○ SAP application preview pages:Here you can find sample applications based on different UI technologies (e.g. SAP Fiori launchpad).

○ SAP control preview pages:Here you can find sample pages related to a specific control.

○ Custom applications:Here you can enter the URL of an application that runs in the same domain as the UI theme designer.Here you can add custom SAPUI5 applications as target content for the preview. For more information, see Adding Custom SAPUI5 Applications as Target Content [page 33].

2. 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.

Next Steps

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.


Design Themes

5.3.1 Adding Custom SAPUI5 Applications as Target Content

To use custom SAPUI5 applications as target content for the preview, you need to start the UI theme designer via the host of the custom application.

Prerequisites

In SAP Cloud Platform Cockpit, you have subscribed the UI theme designer application using the subscription name themedesigner. For more information, see Launching the UI Theme Designer [page 18].

Context

Applications you want to use as target content need to run on the same host as the UI theme designer application. To ensure this, you map an application path to the UI theme designer application in the application descriptor file (neo-app.json.) of the custom SAPUI5 application. This way, you can start the UI theme designer via the host of the custom application. For more information about the application descriptor file, see Accessing Application Resources.

Procedure

1. Open the application which you want to add as target content in an IDE (for example, the SAP Web IDE).2. Open the file neo-app.json..

3. Provide the following:

..."routes": [ { "path": "<application path to be mapped>", "target": { "type": "application", "name": "<name of the application or subscription>" }, "description": "<description>" } ]...

ExampleThis configuration example maps all URL paths starting with /themedesignerPath to the active version of the application named themedesigner.

..."routes": [ { "path": "/themedesignerPath",


https://help.hana.ondemand.com/help/frameset.htm?152cb759db2842db9851d404167d40bc.html


"target": { "type": "application", "name": "themedesigner" }, "description": "Route for UI theme designer" } ]...

4. Load the UI theme designer using the following path:

http(s)://<customApplicationName>-<accountName>.<HCPlandscape>.com/<applicationPath>

Example:

https://myCustomApp-myUserID123trial.dispatcher.hanatrial.ondemand.com/themedesignerPath/5. In the Link to Application field, enter the application URL with the following syntax:

http(s)://<customApplicationName>-<accountName>.<HCPlandscape>.com

Example:

https://myCustomApp-myUser123trial.dispatcher.hanatrial.ondemand.com

5.4 Working with Theme Parameters

The UI theme designer allows you to make changes at several technical levels.

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

Table 12:

Quick Theming Expert Theming

Allows some sweeping high-level changes that are very robust across UI technologies and versions thereof. Only a selected number of parameters is offered for editing.

Allows a finer grain of changes than Quick theming. A greater number of parameters is offered for editing, which gives you advanced options for adapting themes.

Quick theming parameters apply to all supported UI technologies.

Both cross UI technology parameters and UI technology specific parameters are supported.

The parameter set is independent 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 the base of your theme● the application you have selected for the preview

There are no dependencies between quick theming parameters unless you create them.

There are dependencies between the parameters, i.e. the value of a parameter may be derived from the value of other parameters. So when you change the value of a parameter, this might change the value of other parameters as well.

Changing the value of a quick theming parameter affects many controls at once.

Changing the value of an expert theming parameter only affects a specific control or groups of controls.

Quick theming parameters are displayed with a label rather than a technical name (e.g Highlight Color).

All parameters, including the quick theming parameters, are displayed with their technical name (e.g. sapHighlightColor).


Design Themes

Quick Theming Expert Theming

Upgrade safety is guaranteed. Expert parameters may evolve over time, potentially requiring maintenance after upgrades.

Custom LESS and CSS

In addition to quick and expert theming, SAPUI5 and Unified Rendering support custom LESS or CSS. You can add LESS and CSS rules in the text editor that is available in the CSS tab. This allows you to make further adjustments to your theme that are not possible by changing the values of the theming parameters. Custom CSS allows a lot of control, but is difficult to support since the standard CSS evolves with every release.

NoteUpgrade safety is not provided for any changes made in the CSS tab.

5.4.1 Defining Color Parameters for Reuse

Use the palette to define a set of color parameters for reuse.

Procedure

1. In the side panel on the right, choose to open the Palette tab.2. Enter a parameter name in the first input field.

You cannot rename the parameter once it is added. If you want to change the name, remove the entry and create a new one.

3. Choose the color value.4. Repeat steps 2 and 3 for the other color values that you would like to reuse.

Results

The palette parameters you defined are displayed in the Palette section in the color picker.

The palette parameters are saved with the custom theme files.


5.4.2 Changing the Main Parameters Using Quick Theming

Using the quick theming mode, you can easily change color scheme, background image or logo.

Prerequisites

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

Context

Quick theming allows some sweeping high-level changes that are very robust across UI technologies and versions thereof.

Procedure

1. In the panel on the right, choose to open the Quick tab.

The parameters available for quick theming are grouped according to different categories starting with more generic changes to the control-specific ones:○ Background and company logo:

Change the main background color of the screen or insert your own background image or company logo.○ Highlights:

Select the colors defining your brand to highlight specific elements on the screen.○ Semantic colors:

Semantic colors can be used to convey status to specific elements.○ Control-specific colors:

Change the colors defining specific controls on the screen, e.g. the main theming parameters related to buttons.

2. Change the parameter values according to your needs.The preview is automatically adjusted once you have selected a new value.


Design Themes

5.4.3 Adjusting Individual Parameters Using Expert Theming

If you want to change more than the Quick panel could offer, you can use expert theming to make fine-tuned adjustments to your theme.

Prerequisites


See Creating a New Theme [page 27] and Adding Target Content [page 31].

Context

Expert theming allows a finer grain of changes than Quick theming, supporting both cross UI technology parameters and UI technology specific parameters. Expert parameters may evolve over time, potentially requiring maintenance after upgrades.

Procedure

1. In the side panel on the right, choose to 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 13:

Category Icon Description

Shows parameters with color value.

Shows parameters related to typography.

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.

○ Choose to show changed parameters only.


○ Choose to switch on the control picker mode.When you hover over an element in the preview area, it will be highlighted. When you select the element, only parameters that are related to the selected element are displayed.

NoteThis feature is experimental. Experimental features are not part of the officially delivered scope that SAP guarantees for future releases – this means that experimental features may be changed by SAP at any time for any reason without notice. Experimental features are NOT FOR PRODUCTIVE USE. You may not demonstrate, test, examine, evaluate or otherwise use the experimental features in a live operating environment or with data that has not been sufficiently backed up.

The purpose of experimental features is to get feedback at an early point of time allowing customers/partners to influence the future product accordingly. Please use the UI Technology Community (SCN) to provide feedback, accepting that Intellectual Property rights of the contributions or derivative works shall remain the exclusive property of SAP.

○ 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 restricts 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 disabled to filter for all parameters that define the visual appearance of disabled controls.

3. Change the parameter values according to your needs.

5.4.3.1 Finding the Relevant Expert Parameters (Experimental)

The UI theme designer tools help you to find the Expert parameters that are relevant for the styling of specific UI elements.

NoteThe tools for finding parameters are experimental. Experimental features are not part of the officially delivered scope that SAP guarantees for future releases – this means that experimental features may be changed by SAP at any time for any reason without notice. Experimental features are NOT FOR PRODUCTIVE USE. You may not demonstrate, test, examine, evaluate or otherwise use the experimental features in a live operating environment or with data that has not been sufficiently backed up.

The purpose of experimental features is to get feedback at an early point of time allowing customers/partners to influence the future product accordingly. Please use the UI Technology Community (SCN) to provide feedback, accepting that Intellectual Property rights of the contributions or derivative works shall remain the exclusive property of SAP.


Design Themes



CSS Search

With the CSS search option in the Expert tab, you can search for parameters used in CSS rules.

1. Select a preview page (for example the button control preview for UR) and open the Expert tab.2. Select a UI element in the preview area.3. Open the context menu and choose Inspect Element.

The developer tools open and display the CSS rules that apply to the selected UI element.4. Copy a CSS rule from the developer tools window (for example, .urBtnStd).5. In the search field of the Expert tab, enter the search operator css: followed by the CSS rule you just copied

(for example, css: .urBtnStd).All parameters assigned to CSS rules which contain .urBtnStd are displayed in the parameter list.

NoteTo perform an exact search, you enclose the search term in quotes (for example, css: ".urBtnStd"). In this case, all parameters assigned to the specified CSS rule are displayed in the parameter list.

UI Element Highlighting

If you select a parameter in the Expert view, the UI elements that are affected by this parameter are highlighted in the preview area.

5.4.4 Adding Custom LESS and CSS

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 custom LESS or CSS.

Prerequisites


NoteSelect the preview application for the UI technology for which you want to add custom CSS or LESS.

Context

The following UI technologies support custom LESS and CSS:


● SAPUI5● Unified Rendering technologies (Web Dynpro ABAP, FPM)● NWBC

NoteSAP does not take responsibility for changes you make using the CSS tab.

Note the following when you create custom CSS:

● Do not use custom CSS for changes that can be made using the parameters available in the Quick or Expert tab.

● CSS or HTML structures of applications and UI technologies might change after upgrades or patches. If you use custom CSS for your theme, you should be prepared to make manual adjustments after an upgrade or patch.

Procedure

1. In the side panel on the right, choose to open the CSS tab.2. Choose Add Custom CSS.3. Enter your LESS or CSS code in the editor.

You want to define that the color of the whole page of an SAPUI5 application is the same as the brand color but with an opacity of 10%. To do so, you can use the SAPUI5 CSS class sapUiBody and reference the theming parameter sapBrandColor.

.sapUiBody{ background-color:fade(@sapBrandColor,10); }

If you now change the brand color using the Quick tab, the color of the whole page adjusts automatically.You can also define your own LESS variables and reuse them within your coding.

4. Choose Apply.

Results

The code you have entered is reflected in the application preview immediately afterwards.


Design Themes

5.4.5 Inserting Images

You can add your own icons and images to your theme by uploading them or specifying a URL.

Context

Procedure

1. Decide which image you want to change:

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

○ To change other images, open the Expert tab.

Choose to display parameters referring only to images.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 or choose to call up a file browser. If you know the URL of the image you want to use, you can also specify this as the value of the input field.

4. Confirm the dialog box.

5.4.6 Typical LESS Functions

The following is a list of typical LESS functions for colors:

Table 14:

LESS Function Description

saturate(@color, 10%); Returns a color 10% points more saturated

desaturate(@color, 10%); Returns a color 10% points less saturated

lighten(@color, 10%); Returns a color 10% points lighter

darken(@color, 10%); Returns a color 10% points darker

fade(@color, 50%); Returns @color with 50% transparency

spin(@color, 10); Returns a color with a 10 degree larger in hue

mix(@color1, @color2, [@weight: 50%]); Returns a mix of @color1 and @color2

greyscale(@color); Returns a grey, 100% desaturated color


LESS Function Description

contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);

Returns @darkcolor if @color1 is > 43% luma (perceptual brightness), otherwise returns @lightcolor

5.5 Saving Themes as Draft

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

Prerequisites

● You have not enabled the private mode of your browser (InPrivate Browsing for Internet Explorer, Incognito Mode for Google Chrome).

● For Google Chrome users: You allow persistent storage.

Context

Note that the storage of Microsoft Internet Explorer and Mozilla Firefox is limited. Therefore, we recommend you use Google Chrome.

Procedure

1. Choose Theme Save Draft .2. In the Save Draft dialog box, provide the following:

Parameter Description Values

Theme ID The ID which applications can reference to invoke the theme.

○ Only alphanumeric characters are allowed.

○ Must not start with SAP.○ Must not start with a number○ No special characters○ Must not contain dashes

Title (Optional)

The theme name that will be displayed in the theme list on the start screen.

Must not start with "SAP".

Vendor (Optional) Must not start with "SAP".


Design Themes


The name of the company that acts as the vendor of the theme.

Results

If you navigate to the initial screen, the theme you have saved as draft will be displayed in the theme list. You can open it and continue to work on it at a later point in time.

NoteNote that your theme data will be lost if you delete the browser's persistent storage.

5.6 Publishing Themes

To make your theme ready to be applied to a custom SAPUI5 application, you need to deploy it to SAP Cloud Platform and map an application path to the application storing your theme data.

NoteYou need to be prepared to rebuild your themes after an automated SAPUI5 upgrade in SAP Cloud Platform. Alternatively, you can configure a specific SAPUI5 version in your SAPUI5 application and make the upgrade at a later point in time.

See Setting a Fixed SAPUI5 Version for Custom Applications [page 48].

SAP Fiori, trial cloud edition offers a specific function to publish themes. For a step-by-step description, see the Import Theme section of the SAP Best Practice Documentation.

Related Information

Setting Themes for SAPUI5 Applications [page 49]


https://faas-rds.dispatcher.hana.ondemand.com/style.html

5.6.1 Deploying Themes to SAP Cloud Platform

You need to deploy your themes to SAP Cloud Platform to make them available for an SAPUI5 application.

Prerequisites

You have exported your theme to your local hard drive.

See Exporting Themes [page 53].

Context

To deploy your themes to SAP Cloud Platform, you first import the compressed (.zip) file of your custom theme into a new project. This allows reuse if you want to apply your theme to several SAPUI5 applications and ensures compatibilty for future enhancements. In addition, we do not recommend to import the theming files to an existing SAPUI5 application because the neo-app.json. file contained in the theme folder would overwrite the existing neo-app.json..

Procedure

1. Launch the SAP Web IDE. See Opening SAP Web IDE .2. Import the theming files for your custom theme from the local file system into the SAP Web IDE workspace.

See Importing Projects from an Archive.a. From the workspace, select the top-level Local folder.

b. Choose File Import From File System .

The Import dialog box is displayed.c. In the File field, browse to the location of the archived theming file, select it, and choose Open.

A new folder under the top-level local folder with the same name as the archive file is automatically entered as the destination in the Import to field (for example /mybluecrystal).

d. Choose OK.

A folder with the name you defined in step 3 and the content of the imported zip file is created.3. Deploy the folder with the theming files to SAP HANA Cloud platform. See Deploying Applications to SAP

HANA Cloud Platform.

a. In the workspace, select your folder, then choose Deploy Deploy to SAP Cloud Platform .b. In the SAP Cloud Platform Credentials dialog box, enter your log-in credentials.c. Select the Create version checkbox and enter the relevant version.d. Select the Activate checkbox to activate the new version.e. Choose Deploy.


Design Themes

https://help.hana.ondemand.com/SAP_RDE/frameset.htm?51321a804b1a4935b0ab7255447f5f84.html

https://help.hana.ondemand.com/SAP_RDE/frameset.htm?344e8c91e33b4ae8b4032709c45776a3.html

https://help.hana.ondemand.com/SAP_RDE/frameset.htm?463b52bd34de4549ad05f6282ada02d6.html

https://help.hana.ondemand.com/SAP_RDE/frameset.htm?463b52bd34de4549ad05f6282ada02d6.html

The new application is pushed to the Git repository on SAP Cloud Platform. The new version is created and activated.

Note that this application simply acts as a container for the theming files and cannot be launched.

You can now set the theme for your SAPUI5 application. See Setting Themes for SAPUI5 Applications [page 49].


6 Manage Themes

The UI theme designer offers several options to maintain your themes.

Since themes are client-specific, you need to use the same client to edit and maintain themes.

If you run the UI theme designer in SAP Fiori launchpad onSAP Cloud Platform Portal or on SAP Fiori, cloud edition, specific theme maintenance functions are offered in the Theme Manager. For more information, see:

● SAP Cloud Platform Portal documentation at https://help.hana.ondemand.com/cloud_portal_cpv2/frameset.htm and choose Services Managing Site Themes .

● SAP Fiori, cloud edition documentation at http://help.sap.com/fiori_cloudedition and choose General Implementation SAP Fiori, Cloud Edition - Landscape Configuration Guide Theming of SAP Fiori Apps and SAP Fiori Launchpad

6.1 Ensuring Upgrade Compatibility for Themes

To ensure compatibility, themes must be upgraded when the technology version changes.

The CSS files of a given custom theme only work for the SAPUI5 version for which the theme was built when it was exported from the UI theme designer. In SAP Cloud Platform, SAPUI5 is automatically upgraded once a new version is available. This might result in unexpected display of your theme. Therefore, if the version of a UI technology has changed, for example via an upgrade, any custom theme will need to be rebuilt to ensure it works properly.

See SAP Notes 2140280 and 2119552 .

You can do one of the following to ensure upgrade compatiblity for themes created with the UI theme designer:

● Automatic SAPUI5 upgradesIn SAP Cloud Platform, SAPUI5 is automatically upgraded once a new version is available. Whenever this happens, you manually rebuilt your theme to adjust it to the new SAPUI5 version.

NoteIf you run the UI theme designer in SAP Fiori launchpad on SAP Cloud Platform Portal or on SAP Fiori, cloud edition, you can use the theming service to rebuild the theme automatically whenever the SAPUI5 version changes. To enable the theming service to upgrade a theme automatically, you need to configure this option in the Theme Manager.

For more information, see:○ SAP Cloud Platform Portal documentation at https://help.hana.ondemand.com/cloud_portal_cpv2/

frameset.htm and choose Services Managing Themes Maintaining Compatibility Between the Site Theme and the SAPUI5 Version .


Manage Themes

https://help.hana.ondemand.com/cloud_portal_cpv2/frameset.htm


http://help.sap.com/fiori_cloudedition





○ SAP Fiori, cloud edition documentation at http://help.sap.com/fiori_cloudedition and choose General Implementation SAP Fiori, Cloud Edition - Landscape Configuration Guide Theming of

SAP Fiori Apps and SAP Fiori Launchpad

● Manual SAPUI5 upgradesYou configure a specific SAPUI5 version in the application descriptor file of your SAPUI5 application and make the upgrade at a later point in time. When you upgrade your SAPUI5 version, you also manually rebuild your theme.

6.1.1 Manually Upgrade Themes

After a new SAPUI5 version was activated in SAP Cloud Platform, you need to rebuild all custom themes created for SAPUI5 applications.

Context

The CSS (Cascading Style Sheet) files of a given custom theme only work for the SAPUI5 version for which the theme was built when it was exported from the UI theme designer.

If you are using a custom theme for SAPUI5 applications in SAP Cloud Platform that was created with the UI theme designer, you need to be prepared to rebuild your themes after an SAPUI5 upgrade.

See SAP Note 2140280 .

NoteTo prevent that applications get broken by the automated SAPUI5 upgrade within SAP Cloud Platform, you can configure a specific SAPUI5 version in the application descriptor file neo-app.json. of your SAPUI5 application and make the upgrade at a later point in time.


Procedure

1. Start the UI theme designer.2. If you do not have your theme in your browser's storage any longer, import your theme. See Importing

Themes [page 52].3. In the start screen, select your custom theme.4. Select Open.5. Check if the theme still works as expected for the new version and make corrections if neccessary.6. Export the theme. See Exporting Themes [page 53].7. Import the theme to your SAP Cloud Platform account. See Publishing Themes [page 43].

UI Theme DesignerManage Themes P U B L I C 47



6.1.2 Setting a Fixed SAPUI5 Version for Custom Applications

To prevent that applications get broken by the automated SAPUI5 upgrade within SAP Cloud Platform, you configure a specific SAPUI5 version in the application descriptor file of your SAPUI5 application and make the upgrade at a later point in time.

Context

The CSS (Cascading Style Sheet) files of a given custom theme only work for the SAPUI5 version for which the theme was built when it was exported from the UI theme designer.

In SAP Cloud Platform, SAPUI5 is automatically upgraded once a new version is available. This might result in unexpected display of your theme, which can be fixed by rebuilding the theme. See Manually Upgrade Themes [page 47].

Therefore, we recommend you to specify a specific SAPUI5 distribution for the SAPUI5 application to which you want to apply your theme. See Accessing SAPUI5 Resources. In this case, you need to make the upgrade to a higher SAPUI5 version at a later point in time.

Procedure

1. Once you have exported your theme, choose Help Info2. In the dialog box, copy the version number from the SAPUI5 Dist.Layer field (e.g. 1.28.10).3. Open the application to which your custom theme should be applied in an IDE (for example, the SAP Web

IDE).4. Open the file neo-app.json..

5. Add the SAPUI5 Distribution version number you copied in step 2 as the value of the version parameter.

ExampleThis configuration example shows how to reference the SAPUI5 version 1.28.10 using the neo-app.json file.

... "routes": [ { "path": "/resources", "target": { "type": "service", "name": "sapui5", "version": "1.28.10", "entryPath": "/resources" }, "description": "SAPUI5" }] ...


Manage Themes

https://help.hana.ondemand.com/help/frameset.htm?d18a9b0739264a4dbd0acbbc0232d614.html

6.2 Setting Themes for SAPUI5 Applications

You can apply a custom theme to an SAPUI5 application using a URL parameter or by hardcoding the initial theme in the SAPUI5 application.

NoteYou need to be prepared to rebuild your themes after an automated SAPUI5 upgrade in SAP Cloud Platform. Alternatively, you can configure a specific SAPUI5 version in your SAPUI5 application and make the upgrade at a later point in time.


If you run the UI theme designer on SAP Fiori launchpad on SAP Cloud Portal or on SAP Fiori, cloud edition, you use the corresponding option in the Theme Manager.

For more information, see:

● SAP Cloud Portal documentation at https://help.hana.ondemand.com/cloud_portal_cpv2/frameset.htm and choose Services Managing Site Themes .

● SAP Fiori, cloud edition documentation at http://help.sap.com/fiori_cloudedition and choose General Implementation SAP Fiori, Cloud Edition - Landscape Configuration Guide Theming of SAP Fiori Apps and SAP Fiori Launchpad

6.2.1 Accessing Custom Themes from an SAPUI5 Application

To access your custom theme from an SAPUI5 application, you map an application path to the application storing your theme data.

Prerequisites

You have deployed your theme to SAP Cloud Platform.

See Deploying Themes to SAP Cloud Platform [page 44].

Context

Using the application descriptor file neo-app.json. you can configure the behavior of your SAPUI5 application.

See Accessing Application Resources.

In the application descriptor file, you map a path to the application storing your theme data.





Procedure

1. Open the application to which your custom theme should be applied in an IDE (for example, the SAP Web IDE).

2. Open the file neo-app.json..

3. Provide the following:

Option Description

path parameter Enter an application path to be mapped.

This path can then be referenced in a URL parameter or in the SAPUI5 bootstrap configuration. See Setting Themes for SAPUI5 Applications [page 49].

name parameter Enter the name of the application storing your theme data. See Deploying Themes to SAP Cloud Platform [page 44].

ExampleThis configuration example maps all paths starting with /mybluecrystalpath to the active version of the application named mybluecrystal.

..."routes": [ { "path": "/mybluecrystalpath", "target": { "type": "application", "name": "mybluecrystal" }, "description": "Route for custom theme" } ]...

Results

You can now apply your custom theme to an SAPUI5 application using a URL parameter or by hardcoding the initial theme in the SAPUI5 application.

Related Information

Setting Themes Via URL Parameter [page 51]Setting Themes Via the SAPUI5 Bootstrap Configuration [page 51]


Manage Themes

6.2.2 Setting Themes Via URL Parameter

To run SAPUI5 applications with a custom theme, you can use the URL parameter sap-theme to set or override the initial theme.

Prerequisites

● You have exported your theme to your local hard drive.See Exporting Themes [page 53].

● You have deployed your theme to SAP HANA Cloud platform.See Deploying Themes to SAP Cloud Platform [page 44].

● You have mapped an application path to the application storing your theme data.See Accessing Custom Themes from an SAPUI5 Application [page 49].

Procedure

1. Launch your SAPUI5 application.2. In the address field of your browser, add the following to the application URL:

sap-theme=<themeID>@<path>

○ <themeID>: Enter the ID you have provided when you exported your theme from the UI theme designer to your local hard disk.

○ <path>: Enter the application path you used for your mapping.See Accessing Custom Themes from an SAPUI5 Application [page 49].

6.2.3 Setting Themes Via the SAPUI5 Bootstrap Configuration

You can hardcode your custom theme as initial theme in the HTML script tag of an SAPUI5 application.

Prerequisites

● You have exported your theme to your local hard drive.See Exporting Themes [page 53].

● You have deployed your theme to SAP Cloud Platform.See Deploying Themes to SAP Cloud Platform [page 44].

● You have mapped an application path to the application storing your theme data.See Accessing Custom Themes from an SAPUI5 Application [page 49].


Procedure

1. Open the code for the target SAPUI5 application to which you want to assign your theme.2. Insert the following in the SAPUI5 bootstrap script tag:

○ data-sap-ui-theme: Enter the theme ID you have provided when you exported your theme from the UI theme designer to your local hard disk.

○ data-sap-ui-theme-roots: Enter the following:{"<themeId>" : "/<applicationPath>/<themeName>/UI5/"}○ <themeID>: The ID you have provided when you exported your theme from the UI theme designer to

your local hard disk.○ <path>: The application path you used for your mapping in the application descriptor file of the

application to which your custom theme should be applied . See Accessing Custom Themes from an SAPUI5 Application [page 49].

○ <theme name>: The name of the application carrying your theming files. See Deploying Themes to SAP Cloud Platform [page 44].

Sample Code

<script id="sap-ui-bootstrap" src="resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="mybluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{"customTheme2": "./"}' data-sap-ui-theme-roots='{"mybluecrystal" : "/mybluecrystalpath/UI5/"}'> </script>

6.3 Importing Themes

You can import themes as an archive file from your local hard disk to the UI theme designer.

Context

Note that the storage of Microsoft Internet Explorer and Mozilla Firefox is limited. Therefore, we recommend you use Google Chrome.


Manage Themes

Procedure

1. In the welcome screen, choose Import.The Import Theme dialog box appears.

2. Drag and drop a zip file archive from your local files to the Import Theme dialog box or choose to call up a file browser.

3. Choose Import.The theme will be opened for editing.

4. Select content for the preview.

5. Choose Theme Save Draft and confirm the dialog box that appears.

Results

If you now navigate back to the initial screen, the theme you imported will be displayed in the theme list and can be opened for editing.

6.4 Exporting Themes

You can export your themes as compressed files from the UI theme designer to your local hard disk.

Procedure

1. Choose Theme Export .2. In the Export dialog box that appears, provide the following:


Theme ID The ID which applications can reference to invoke the theme.

○ Only alphanumeric characters are allowed.

○ Must not start with SAP.○ Must not start with a number○ No special characters○ Must not contain dashes

Title (Optional)

The theme name that will be displayed in the theme list on the start screen.

Must not start with "SAP".

Vendor (Optional) Must not start with "SAP".



The name of the company that acts as the vendor of the theme.

3. Decide whether you require a Right-to-Left (RTL) version of your theme.Right-to-left languages, such as Hebrew and Arabic, require different stylesheets and images than left-to-right (LTR) languages.

Mark the Create RTL theme checkbox to create stylesheets for both LTR and RTL languages.4. Choose OK.

A Zip folder containing the theming files is created.

6.5 Deleting Themes

You can delete custom themes that are displayed in the theme list on the welcome screen.

Procedure

1. Start the UI theme designer.2. In the welcome screen in the Available Themessection, select the custom theme you want to delete. If you

have several custom themes, you can use the search field to locate one.3. Select Delete.4. Confirm the dialog box.


Manage Themes

7 Secure

The UI theme designer offers options to permit access only for specific users.

7.1 Protecting Access to UI Theme Designer

Add a role and assign it to the UI theme designer permission to restrict access to UI theme designer.

Prerequisites

You are subscribed to the UI theme designer application.

See Launching the UI Theme Designer [page 18].

Context

In the SAP Cloud Platform cockpit, you can create custom roles and assign them to the defined permissions. If a user accesses an application path that starts with a path defined for a permission, the system checks whether the current user is a member of the assigned role. If no role is assigned to a defined permission, all authenticated users have access to the corresponding application path.

The corresponding permission for UI theme designer is UIThemeDesignerPermission. When the account administrator adds a role and assigns it to the permission, only users assigned to that role get access.

Procedure

1. Open the SAP Cloud Platform cockpit.2. Create a new role subscribed to the HTML5 application themedesigner.3. Assign users or groups to the new role.4. Assign the new role to the application permission UIThemeDesignerPermission.

Related Information

Using the Subscriptions Panel

UI Theme DesignerSecure P U B L I C 55

https://help.hana.ondemand.com/help/frameset.htm?f4737cf108ab4247b7876513c5751a02.html

7.2 Clickjacking Framing Protection

Clickjacking is an attempt to trick users into clicking hidden or masked user interface elements without the user realizing it. The user thinks he or she is clicking on the underlying element in the presented context, but is actually clicking on an action chosen by the attacker.

To prevent malicious applications from using the UI theme designer UI for clickjacking attacks, clickjacking framing protection is enabled by default.

Clickjacking framing protection prevents the UI theme designer from being loaded in a frame when the parent runs on a different host.


Secure

Important Disclaimers and Legal Information

Coding SamplesAny software coding and/or code lines / strings ("Code") included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended to better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, unless damages were caused by SAP intentionally or by SAP's gross negligence.

AccessibilityThe information contained in the SAP documentation represents SAP's current view of accessibility criteria as of the date of publication; it is in no way intended to be a binding guideline on how to ensure accessibility of software products. SAP in particular disclaims any liability in relation to this document. This disclaimer, however, does not apply in cases of willful misconduct or gross negligence of SAP. Furthermore, this document does not result in any direct or indirect contractual obligations of SAP.

Gender-Neutral LanguageAs far as possible, SAP documentation is gender neutral. Depending on the context, the reader is addressed directly with "you", or a gender-neutral noun (such as "sales person" or "working days") is used. If when referring to members of both sexes, however, the third-person singular cannot be avoided or a gender-neutral noun does not exist, SAP reserves the right to use the masculine form of the noun and pronoun. This is to ensure that the documentation remains comprehensible.

Internet HyperlinksThe SAP documentation may contain hyperlinks to the Internet. These hyperlinks are intended to serve as a hint about where to find related information. SAP does not warrant the availability and correctness of this related information or the ability of this information to serve a particular purpose. SAP shall not be liable for any damages caused by the use of related information unless damages have been caused by SAP's gross negligence or willful misconduct. All links are categorized for transparency (see: http://help.sap.com/disclaimer).

UI Theme DesignerImportant Disclaimers and Legal Information P U B L I C 57

http://help.sap.com/disclaimer/

go.sap.com/registration/contact.html

© 2017 SAP SE 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 SE or an SAP affiliate company. The information contained herein may be changed without prior notice.Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary.These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company 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 as constituting 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 SE (or an SAP affiliate company) in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies.Please see http://www.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

https://go.sap.com/registration/contact.html

https://go.sap.com/registration/contact.html

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

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

UI Theme Designer

Documents

Transcript of UI Theme Designer