Month: July 2016

Theming

, Updated:

The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and also Quartz Light, Quartz Dark and the accessibility themes High-Contrast Black (HCB) and High-Contrast White (HCW).

SAP Fiori Themes

Morning Horizon
Morning Horizon
Evening Horizon
Evening Horizon
Quartz Light
Quartz Light
Quartz Dark
Quartz Dark

SAP Fiori High Contrast Themes

High-Contrast Black theme
High-Contrast Black theme
High-Contrast White theme
High-Contrast White theme

All of the user interface components are specified using cross-technology design tokens that are mapped 1:1 with theming variables provided in multiple formats in the SAP theming base content. Theming variables come in the form of CSS variables, LESS, SASS, and JSON. This enables customers to apply their own brand identity to the user interface using the UI theme designer, which works across all SAP UI technologies. It allows customers to easily change a few basic colors (quick theming) as well as individual control colors (detailed theming).

Concept

Customers can apply their own branding by adapting the standard SAP Fiori theme. Some customers will simply replace the logo or change the main branding colors of the UI by replacing the default brand and base colors of the theme. Other customers want more control to change the colors of the UI controls. Some companies even create multiple themes to reflect the various sub-brands of their different divisions.

From Quick Theming to Detailed Control Theming

Theming is driven by customer requirements and works using a top down approach, from quick to detailed UI control adaptations:

  • Quick theming: replacing logo and main brand colors
  • Detailed theming: replacing detailed color values of specific UI controls


Quick Theming

Customers can easily change the logo and a few colors in the UI by replacing the colors in the UI theme designer. This automatically creates a recalculated tonal color palette that is applied to various UI elements, creating a harmonious look and feel.

One of the main parts of a corporate branding guide is a set of primary and secondary branding colors. When creating a custom theme, these colors can simply be added to the custom palette of the UI theme designer, making it easy to replace the default SAP Fiori colors.

The following example shows a combination of quick theming changes.

Example: Before and After Customer Branding

  • Quick Theming

Detailed Theming

All of the main brand colors used for quick theming are also interlinked within the controls. Quick theming variables (main/base tokens) like the brand color are connected to individual control parameters (component tokens), such as icons and emphasized buttons. They can even be connected to interaction states, such as the selected and active state colors. Other quick theming parameters (main/base tokens) like the base color are connected to cards, lists, and table backgrounds.

Example: Before and After Customer Branding

Detailed theming isn’t simply changing colors in the UI, but rather determining how specific colors are used. For example, all of the theme parameters for input controls (input field, radio button, checkbox, and so on) have been grouped together and contain the word “field“. Similarly, all the color parameters for all types of buttons, menus, and tokens (background, borders, and so on) have been grouped together and contain the word “button“. Theme parameters are set for each semantically named part of the control. These semantically named control parameters remain stable and do not change from theme to theme. Each theme has specific color values that are linked into these stable control parameters. For example, a parameter called sapButton_Background may have a gray color value in the Morning Horizon theme, a black value in the High Contrast Black theme, and a white value in the High Contrast White theme.

Accessibility

As well as the accessibility themes High Contrast Black (HCB) and High Contrast White (HCW), all SAP’s visual themes have been aligned with Web Content Accessibility Guidelines (WCAG) and follow the recommendations for the “Perceivable” principle.

 SAP visual themes follow the WCAG target version that was valid at the time of the theme release. See below for details.

Horizon

Theme Name WCAG Target Version
Morning Horizon WCAG 2.2 AA
Evening Horizon WCAG 2.2 AA
Horizon High Contrast Black WCAG 2.2 AAA
Horizon High Contrast White WCAG 2.2 AAA

Quartz

Theme Name WCAG Target Version
Quartz Light WCAG 2.1 AA
Quartz Dark WCAG 2.1 AA
Quartz High Contrast Black WCAG 2.1 AAA
Quartz High Contrast White WCAG 2.1 AAA

Belize

Theme Name WCAG Target Version
Belize WCAG 2.0 AA
Belize Plus WCAG 2.0 AA
Belize High Contrast Black WCAG 2.0 AAA
Belize High Contrast White WCAG 2.0 AAA

Guidelines
Please make sure you choose the appropriate theme if you need to support a specific WCAG policy in your company or organization.

Related Links

Follow the links below to find out more about theming and the UI theme designer.

Related Guidelines

Design Tokens

Morning Horizon Colors

Evening Horizon Colors

Quartz Light Colors

Quartz Dark Colors

Belize Colors

Using the UI Theme Designer

UI Theme Designer Documentation
Learn how to apply custom themes.

Walkthrough Process (video)
See how the UI theme designer can be used to adapt a corporate theme in this step-by-step example.

UI Theme Designer Community
Learn more about the UI theme designer and engage with the community.

Implementation

SAP Theming Base Content
GitHub repository of SAP themes.

App Finder

, Updated:

The app finder allows you to browse all SAP Fiori, SAP GUI, and Web Dynpro ABAP apps in one place. It is available in the edit mode of the SAP Fiori launchpad or in the SAP Fiori user actions menu.

The app finder serves two purposes:

  • Discover apps and add them to the home page
  • Launch less frequently-used apps directly

Depending on the launchpad implementation, the app finder may be divided into three content areas: Catalog, User Menu, and SAP Menu:

  • The Catalog area contains all the SAP Fiori apps. 
  • The User Menu and SAP Menu areas give users access to the SAP GUI and Web Dynpro ABAP applications that appear in the corresponding menus in the back end. Together, the two back-end menus are also known as the “SAP Easy Access menu”.
App finder
App finder

The app finder is provided by the SAP Fiori launchpad. Apps use this app finder and do not have their own individual designs.

Responsiveness

The app finder is fully responsive and adaptive.

On size S, the width of the app box adapts to fit the screen size.

The SAP Easy Access menu (User Menu and SAP Menu) is not available on smartphones and tablets.

App finder - Smartphone
App finder - Smartphone
App finder - Tablet
App finder - Tablet
App finder - Desktop
App finder - Desktop

On smaller screens, the left panel disappears and a menu icon appears instead. Clicking the menu icon brings back the panel and provides access to the catalogs and menu folders.

App finder - Responsiveness
App finder - Responsiveness

Components

Catalog

The content is organized into catalog groups.

User Menu / SAP Menu

The content is organized into hierarchical menu folders.

Side Panel

The side panel helps the user to see all the apps for a given catalog or menu folder.

App Boxes

The app finder contains all the apps the user is allowed to see. These are shown as app boxes. In addition, the SAP Menu provides access to all the functions offered by an SAP system. The content of the SAP Menu is independent of the user role, and is therefore the same for all users.

The interaction for adding apps from the app finder to the home page or page depends on the source of the app (Catalog, User Menu, or SAP Menu).

Behavior and Interaction

Each tile offers two actions:

1) Clicking the tile takes the user to the app or page connected to this tile, as on the home page.

2) The pin icon button (  ) allows the user to add a tile to a group on the home page. In the catalog, users can also remove tiles from the home page via the pin icon button.

Adding Apps to the Home Page

Information
The info in this section applies only if you use the SAP Fiori launchpad home page. If you use SAP Fiori launchpad spaces, see Adding Apps to a Page below.

Each app box offers two actions:

1) Clicking the tile takes the user to the app or page connected to this tile, as on the home page.

2) The pin icon button ( ) allows the user to add an app to one or several groups on the home page. In the catalog, users can also remove apps from the home page using the pin icon button.

Catalog

Clicking the pin icon button opens the Add to Groups popover, where the user can select one or more home page groups. The user can also remove the app from the home page by unchecking it in the popover, or add the app to a new group.

When the user selects or deselects a checkbox, the app is added to or removed from the respective group. When the user clicks Close or anywhere outside the popover, a toast message summarizes the changes. The pin behaves like a toggle: if the app is assigned to the home page, the pin is emphasized.

User Menu / SAP Menu

Clicking the pin icon button (  ) opens the Add to Groups popover, where the user can select one home page group and add the app. The user can repeat this process several times. However, for technical reasons, the app finder cannot be used to remove apps from the home page. Apps can only be removed by switching the home page itself to edit mode.

Adding Apps to a Page

Information
The info in this section applies only if you use SAP Fiori launchpad spaces. If you use the SAP Fiori launchpad home page, see Adding Apps to the Home Page above.

Each app box offers two actions:

1) Clicking the tile takes the user to the app or page connected to this tile, as on a page.

2) The plus icon button ( ) allows the user to add an app to one or several pages. In the catalog, users can also remove apps from a page using the checkmark icon button ( ).

From the Catalog

Clicking the plus icon button opens the Add to… popover, where the user can select one or more pages. An app can be removed from a page again by unchecking it in the popover.

When the user selects a checkbox, the app is added to that page and appears at the top of the page in a dedicated Recently Added Apps section. When the user deselects a checkbox, the app is removed from the respective page. When the user clicks OK, a toast message summarizes the changes. The icon button behaves like a toggle: if the app is assigned to a page, the plus turns into a checkmark.

From the User Menu / SAP Menu

Clicking the plus icon button opens the Add to… popover, where the user can select a page and add the app. The user can repeat this process several times. However, for technical reasons, the app finder cannot be used to remove apps from a page. Apps can only be removed by switching the page itself to edit mode.

Related Links

Elements and Controls

Implementation

  • No links.

Date/Time Picker

, Updated:

The date/time picker allows users to select date and time values in a combined input.

Usage

Use the date/time picker if:

  • You need a combined date and time input control.

Do not use the date time picker if:

  • You want to use either a date or a time value. In this case, use the date picker or the time picker instead.

Responsiveness

The date/time picker runs on all form factors and fully adapts to all devices.

Date/time picker - Compact mode
Date/time picker - Compact mode
Date/time picker - Cozy mode
Date/time picker - Cozy mode

Behavior and Interaction

Selecting Date and Time Values

Sizes M and L/XL

The date/time picker appears as a popover when the user clicks the date/time icon in the input field. The user can then select the desired date from the calendar and the time from the rotating wheel. For the time, it’s possible to select hours, minutes, and seconds.

When the user clicks the OK button, the popover closes and the selected date and time appear in the input field. When the user selects Cancel, the action is aborted and the input field remains unchanged.

If there is no value in the input field, no date is selected in the calendar. The user needs to explicitly select a date. If a date is already selected and the user changes the year or the month, they need to explicitly select the date again to confirm the change.

Date/time picker – Entering data with input and picker
Date/time picker – Entering data with input and picker

Size S and Mobile Size

On smaller devices, the user can choose the date and time value in arbitrary order by tapping the segmented button on top of the screen. Be aware that the popover is superimposed on the input field during the selection process for mobile/S sizes.

The user can select the desired date from the calendar, and the time from the rotating time wheel. For the time, it’s possible to select hours, minutes, and even seconds. Clicking a date in the calendar automatically takes the user to the time selection screen.

When the user selects OK, the popover closes and the selected date and time appear in the input field. When the user selects Cancel, the action is aborted and the input field remains unchanged.

Date/time picker - Smartphone view
Date/time picker - Smartphone view

“Today” Button

You can offer a shortcut for navigating to the current date (sap.m.DateTimePicker, property: showCurrentDateButton). This displays an additional Today icon button ( ) in the navigation part of the calendar. Pressing this button sets the focus to the current date.

This feature is available for pickers that enable selection of individual days. For the others, the property has no effect.

'Today' button for selecting the current date
'Today' button for selecting the current date

Styles

Value States

The Date/Time picker supports the following value states:

  1. Regular
  2. Success
  3. Warning
  4. Error
  5. Information

For the Warning, Error and Information states, there are additional messages available to provide hints for the user.

For more information, see How to Use Semantic Colors.

Date/time picker - Value states
Date/time picker - Value states

Guidelines

Date Picker and Time Picker

In general, we recommend separating the date/time picker controls as the time picker supports the mask input function and the date picker allows the user to enter date in different formats. This makes it easier and more convenient for the user to enter the desired values. For additional guidelines and information on the individual controls, see the resources section below.

Default Values

Independently of the chosen control, set the default values of the date/time picker carefully to avoid unnecessary scrolling. It often makes sense to set the default for the time to the full or half hour, setting the minutes to 00 or 30. Sometimes, it may also make sense to use the current time and date.

Date Input Field

It is possible to add additional “description” texts to the input field (a unit of measurement, for example) by using a new association in the sap.m.InputBase control called ariaDescribedBy. The association is responsible for referencing the elements that describe the control.

Formatting Dates and Times

For guidelines and information on the SAPUI5 date formatters, see formatting dates.

For guidelines and information on the SAPUI5 time formatters, see formatting times.

Setting Steps

You can set intervals for the minutes and seconds on the slider (properties: minutesStep and/or secondsStep). For example, if you set the seconds step to “5”, the slider offers “00”, “05”, “10”, “15”, and so on.

Time Zone

If the user has to set a time that is time zone-sensitive, offer a select control next to the date/time picker control to choose the appropriate time zone.

Properties

AM and PM are locale-dependent. The locale can be set using the property localeId.

You can set the display format (property: displayFormat) to define the format in which the time input field and the time picker dropdown display the time.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Step Input

, Updated:

The step input control allows the user to change the input values in predefined increments (steps).

Usage

Use the step input if:

  • The user needs to adjust amounts, quantities, or other values quickly.
  • The user needs to adjust values for a specific step (for example, in a shopping cart).

Do not use the step input if:

  • The user needs to enter a static number (for example, postal code, phone number, or ID). In this case, use the regular input field control instead.
  • You want to display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use the regular input field control instead.
  • You want the user to enter dates and times. In this case, use the date picker, date range selection, time picker, or date/time picker instead.

Responsiveness

Size S and M (Smartphone and Tablet)

On smartphones and tablets, the step input is shown in cozy mode. When the focus is in the input field, the keyboard layout for numeric input is displayed.

Size L (Desktop)

On desktop devices, the step input is shown in compact mode.

For more information on the cozy and compact modes, see content density.

Step input - size S/M
Step input - size S/M
Step input - size L
Step input - size L

Components

The step input consists of:

(A) Input field
(B) Button to decrease the value
(C) Button to increase the value

Step input areas
Step input areas

You can show a descriptive reference or unit of measurement after the field (property: description). Depending on your use case, you may need to adjust how the space is distributed between the input field and the descriptive text (property: fieldWidth).

Step input with description
Step input with description

Behavior and Interaction

Default Value

The step input always contains a value. When no value is set, the default value is generally 0. However, app developers can set a different default value (property: value).

If the minimum value is larger than 0, the generic value is the minimum value set by the app team.

Changing the Value

The user changes the value:

  • By pressing the increase/decrease buttons
  • By typing a number
  • With keyboard shortcuts (up/down, page up/down)
  • With the mouse scroll wheel

On desktop devices, clicking the input field places the cursor in the input field. On mobile devices, tapping the input field displays the numeric keyboard.

Clicking the buttons changes the value by a step and does not place the caret in the input field.

When the user clears the value and leaves the input field, the value in the field becomes 0 or the minimum if the minimum is larger than 0.

If the user enters an invalid value, the invalid value remains in the input field. An error state is displayed.

Increasing the Step

To allow the user to change values by a larger step with keyboard shortcuts, app developers can set a multiple of the step (property: largerStep). The default value is two times the set step.

If your use case requires more complex step increments (for example, if you want the step increment to be the closest number that is divisible by the defined step) you can use the stepMode property. For details, please refer to the API reference.

Maximum and Minimum Values

App developers can set a maximum and minimum value for the step input.

When the maximum/minimum values are reached, the Increase/Decrease button and up/down keyboard navigation are disabled.

Display Value

The step input control allows decimal values and can control the number of digits shown after the decimal point (property: displayValuePrecision). When the property is set to a specific value – from 0 (default) to 20 – the control restricts users accordingly as they type or paste a value. Trying to type more digits triggers an error state.

Step input at maximum value (max = 100)
Step input at maximum value (max = 100)
Step input at minimum value (min = -100)
Step input at minimum value (min = -100)

Styles

Editable and Enabled States

Editable

Property settings: editable = true, enabled = true

The step input control is enabled and editable by default. Set the control to editable to allow the user to enter a value.

Not Editable

Property settings: editable = false, enabled = true

Use this state, for example, to display data only.

Disabled

Property settings: editable = not relevant, enabled = false

Set the control to disabled in an edit scenario to indicate that the user cannot change the control, for example, due to missing access rights or previous conditions not having been fulfilled or selected.

Read-only state
Read-only state
Disabled state
Disabled state

Value States

The step input control offers the four value states listed below. For the error, warning, and information states, you can show an additional value state text when the focus is on the input field. If the text gets too long, it wraps.

  • Warning
  • Error
  • Success: No value state message is shown
  • Information: Value state message can show additional information, such as recommendations.

For more information on how to use the different semantic states, see How to Use Semantic Colors.

For more information on showing value states in a form, see Form Field Validation.

Error state
Error state
Warning state
Warning state
Success state
Success state
Information state
Information state
Error state – With value state text
Error state – With value state text
Warning state – With value state text
Warning state – With value state text
Success state – No value state text
Success state – No value state text
Information state – With value state text
Information state – With value state text

Guidelines

Always provide a meaningful label for the step input.

Width

By default the width of the step input is set to 100% of the container. Avoid setting a fixed width, but rather embed the control in a proper layout such as a form, simple form, or grid layout, and use the layout data property where the width is defined by the 12-column approach to define the responsive behavior for sizes S, M, and L.

When used in forms, the width of the step input control comes from the label:field ratio of the form. The app development team should be able to restrict the width to a proper number of columns (12-grid responsive layout) so that the step input is not too wide.

Ensure an appropriate width for the range of values to be entered for all the sizes S, M, and L. Avoid a larger width than necessary.

Keep in mind the varying lengths of decimals. Limit the number of digits after the floating point if possible in your use case. For more information, have a look at the article on formatting numbers.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation

Using Tooltips

, Updated:

Tooltips appear next to the mouse pointer when it hovers over an element that offers a tooltip. Tooltips are shown only for elements that do not have a label or, in rare cases, to display additional information.

Since tooltips are handled by the browser, the form of tooltips depends on the platform, the browser, and the respective platform and browser versions.

Tooltip for 'Notifications' button
Tooltip for 'Notifications' button

Usage

Use a tooltip if:

  • You have an element without a label.
  • You are showing an icon-only button.
  • You want to show in-place information within a map.
  • You are showing a button that contains only an icon and a number.

Do not use a tooltip if:

  • You want to show the full text for a truncated item. Instead, make more space for the item.
  • Text is truncated on a control that doesn’t support wrapping. Instead, show the full content with one click in a popup. See Wrapping and Truncating Text.
  • You don’t want to use a label. You should always use a label.
  • You want to offer an explanation or provide help. Instead, use SAP Companion.
  • The content of the tooltip would be redundant.
  • The corresponding UI element is static, such as layout containers, labels or inactive toolbars. Only add tooltips to interactive elements, such as buttons on toolbars.
  • On column headers of tables.
    SAP S/4HANA Only:
    You can opt to offer tooltips for the column headers of tables. This allows users to read the full column header text without resizing.
  • To display a shortcut for a button. Use the corresponding options instead.
Developer Hint
Short cuts for buttons are added via sap.ui.core.CommandExecution.
Don't
Don't duplicate text in a tooltip.
Don't duplicate text in a tooltip.
Don't

Responsiveness

Tooltips are usually invoked by a mouseover event, which is why they are limited to desktop devices. Most touch-only devices have no way of showing tooltips.

Because tooltips cannot be displayed on all devices, they should never contain critical information. They should also not contain redundant information.

Types

Icon-Only Buttons

Icon-only buttons must have a tooltip to indicate the action the button will trigger.

Sort button with tooltip
Sort button with tooltip

Icon-Only Buttons with Amounts

Icon-only buttons that contain numbers, but no text, must also have a tooltip.

Button with icon and number
Button with icon and number
Button with icon and badge
Button with icon and badge

Maps

Within maps, different areas and hotspots can show different tooltips to elaborate the current position.

Tooltips on a map
Tooltips on a map

Guidelines

Overwriting standard icon tooltips

The icon within an icon-only button usually comes with a standard tooltip. However, this default tooltip contains the technical icon name, which may not be the right term for the icon in your context. Always check all icons and overwrite the default tooltip texts with suitable texts for your specific use case.

Do
Icon with app-specific tooltip (default overwritten)
Icon with app-specific tooltip (default overwritten)
Don't
Icon with standard tooltip (default)
Icon with standard tooltip (default)
Warning
Ensure that your tooltips are maintained properly at all times, since they are also invoked for disabled items. Some browsers even invoke tooltips for keyboard actions, such as tabbing through the links.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation