Give us feedback
sap-fiori-theme
Reactive icon

SAP Fiori Theme

Supported
Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded on 14 July 2022 by 
5.0
 (7 ratings)
sap-fiori-theme

SAP Fiori Theme

Documentation
1.0.0

The SAP Fiori Theme component enables you to build OutSystemsUI-based applications that have a similar look and feel to an SAP web app. Easily customize your patterns, widgets, and themes based on the SAP Fiori design system.

To view examples of UI and design elements developed with the SAP Fiori Theme component, go to the SAP Fiori Theme Live Style Guide. To view and analyze the code, download the style guide from Forge.

Prerequisite

Install OutSystemsUI version 2.9.0 or higher from Forge.

Installing the SAP Fiori Theme

To install the SAP Fiori Theme component, follow these steps:

  1. Log into Service Studio.

  2. In the app list, click Install From Forge to install the SAP Fiori Theme component. Alternatively, go to OutSystems Community > Forge to search for and install the SAP Fiori Theme.
  3. Open the module you want to apply the SAP Fiori Theme to.

  4. Click Manage Dependencies and follow these steps:

    1. Search for SAPFiori_Theme.

    2. Select all the elements of the component you want to use in your module.

  5. Click Apply to add SAPFiori_Theme as a dependency to your module.

Using the SAP Fiori Theme

After installing the component, follow these steps:

For demo purposes, we used a module called BuyMe and named the main theme BuyMeTheme. Your module may have a different name, so follow these steps for the module you applied the SAP Fiori Theme to.

  1. In the Elements tree, expand the Themes folder.

  2. Select BuyMeTheme and add QuartzLight as the Base Theme.

    If your app has multiple themes, such as Theme 1, Theme 2, Theme 3, you can set these themes to inherit all the properties of the Base Theme you previously set for BuyMeTheme.

  3. Click Publish and check the result.

    Simple widgets, such as checkboxes, buttons, and expressions, display the SAP Fiori design. For more complex patterns, you have to change the Elements tree.

Component description

The SAP Fiori Theme component has 1 module containing all themes, layouts, patterns, and static entities that enable you to create an application with the SAP Fiori look and feel.

Themes

Name

Definition

QuartzLight

Theme based on the SAP Fiori Quartz Light default theme.

QuartzDark

Theme based on the SAP Fiori Quartz Dark theme.

Page layouts

DynamicPage

This is a screen layout block based on the SAP Fiori Dynamic Page layout. You can use this adaptable layout on most of the pages in your application. It has an optional collapsible header that hosts additional data on the context of the page.

Input parameters


Name

Data Type

Definition

EnableAccessibilityFeatures

Boolean

Defines if OutSystems UI accessibility features display or not.

ExtendedClass

Text

Indicates custom style classes to add to the layout top container. 

You can also use CSS classes from the OutSystems UI and SAP Fiori Theme entities.

HasMainContentHeader

Boolean

Indicates if the page contains the collapsible header or not.


Launchpad

This is a screen layout block based on the SAP Fiori Launchpad layout. You can use it on the Home screen of your applications. It contain tiles directing users to the internal pages of the application.

Input parameters


Name

Data Type

Definition

EnableAccessibilityFeatures 

Boolean

Defines if OutSystems UI accessibility features display or not. 

ExtendedClass

Text

Indicates custom style classes to add to the layout top container. 

You can also use CSS classes from the OutSystems UI and SAP Fiori Theme entities.


Patterns

IconTabBarHeaderItemContent

This is a block used inside the OutSystemsUI TabsHeaderItem component to build an Icon Tab Bar

Input Parameters


Name

Data Type

Definition

Observations

ExtendedClass 

Text

Indicates the custom style classes to add to the pattern. 

You can also use CSS classes from the OutSystems UI and SAP Fiori Theme entities.

To see a preview of this pattern, go here.


IconTabBarHeaderItemInlineContent

This is a block used inside OutSystemsUI TabsHeaderItem component to build an Icon Tab Bar with inline layout.

Input Parameters


Name

Data Type

Definition

Observations

ExtendedClass 

Text

Indicates the custom style classes to add to the pattern.   

You can also use CSS classes from the OutSystems UI and SAP Fiori Theme entities.

 

To see a preview of this pattern, go here.

ShowIcon

Boolean

Indicates if the tab icon should be displayed. 

To see a preview of this pattern, go here.


TimelineContent

This is a block used inside OutSystemsUI Timeline Item component to build a Timeline.

To see a preview of this pattern, go here.

GenericTag

This is a component used to display additional data on the current context with informative highlight colors.

Input Parameters


Name

Data Type

Definition

Observations

ExtendedClass 

Text

Indicates the custom style classes to add to the pattern. 

You can also use CSS classes from the OutSystems UI and SAP Fiori Theme entities.

To see a preview of this pattern, go here.


Events


Name

Definition

TagClicked

User clicks the tag.


ProgressIndicatorContent

This is a block used inside a Progress Bar component to display data similarly to the Progress Indicator.

Input Parameters


Name

Data Type

Definition

Observations

Progress 

Integer

Indicates progress percentage. It must include a number from 0 to 100.

To see a preview of this pattern, go here.


BusyIndicator

This is a component used to display a loading animation.

Input Parameters


Name

Data Type

Definition

Observations

BusyIndicatorSize 

BusyIndicatorSize Identifier

Defines the size of the busy indicator.

To see a preview of this pattern, go here.


TableListHeader

This is a header block to use at the top of Lists and Tables to show a title and additional actions.

Input Parameters


Name

Data Type

Definition

Observations

ExtendedClass 

Text

Indicates the custom style classes to add to the pattern. 

You can also use CSS classes from the OutSystems UI and SAP Fiori Theme entities.

To see a preview of this pattern, go here.


TableListPagination

This is a pagination block to use at the bottom of lists and tables to load more results.

Input Parameters


Name

Data Type

Definition

Observations

CurrentRecordsCount

Integer

Indicates the count of records currently on display.

To see a preview of this pattern, go here.

IsLoading

Boolean

Indicates if the list is in the process of getting fetched. If True, a Busy Indicator block displays.

To see a preview of this pattern, go here.

RecordsIncrement

Integer

Defines the number of new records fetched on each click.

To see a preview of this pattern, go here.

TotalCount

Long Integer

Indicates the total records number of the related list/table.

To see a preview of this pattern, go here.

ExtendedClass 

Text

Indicates the custom style classes to add to the pattern. 

You can also use CSS classes from the OutSystems UI and SAP Fiori Theme entities.

To see a preview of this pattern, go here.


Events


Name

Definition

OnClick

User clicks the pagination block.


Static Entities


Avatar

The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, icons, or business-related images, such as product pictures.


Entity Name

Definition

AccentColor

Defines the avatar component colors. Contains helper classes for applying SAP Fiori accent colors to both the light and dark themes. 

AvatarSize

Contains all the helper classes names for changing the size of Avatar components, from XS to XL.


Busy Indicator

The busy indicator informs the user about an ongoing operation.


Entity Name

Definition

BusyIndicatorSize

Defines the size of the busy indicator, based on the SAP Fiori Design Guidelines.


Button

Buttons enable users to trigger an action.

Entity Name

Definition

ButtonColor

Provides all possible semantic colors a button can have, based on the SAP Fiori Design Guidelines.


Checkbox

A checkbox enables users to set a binary value (such as “true/false”). When the user clicks a checkbox, it toggles between checked and unchecked.


Entity Name

Definition

CheckboxColor

Provides all possible semantic colors a checkbox can have, based on the SAP Fiori Design Guidelines.


Date Picker

The date picker enables users to select a localized single or range date, as well as navigating directly from one month or year to another.


Entity Name

Definition

DatepickerColor

Provides all possible semantic colors a date picker can have, based on the SAP Fiori Design Guidelines.


Iconography

SAP icons have a friendly style that is consistent in terms of size, stroke, and balance. These icons enable simple and direct user interactions.


Entity Name

Definition

Icon

Contains a list of helper classes for adding SAP Fiori-based icons. To view all available options for the icon picker, go to the SAP Fiori Theme live style guide.


Input Field

A text input field enables users to enter and edit text or numeric values in 1 line.


Entity Name

Definition

InputColor

Provides all possible semantic colors inputs can have, based on the SAP Fiori Design Guidelines.


Message Box

The message box enables displaying messages to the user.


Entity Name

Definition

MessageBoxColor

Contains the CSS helper classes for creating the different types of message boxes available, based on SAP Fiori Design Guidelines


Progress Indicator

The progress indicator shows the progress status of a process or a degree of accomplishment.


Entity Name

Definition

ProgressIndicatorColor

Provides all possible semantic colors that the progress indicator can have, based on the SAP Fiori Design Guidelines.


Radio Button

Radio buttons provide users with a set of mutually exclusive options. They enable users to select only 1 option from 2 or more choices.


Entity Name

Definition

RadioGroupColor

Provides all possible semantic color classes for radio buttons, based on the SAP Fiori Design Guidelines.


Select Input

The select control (also known as a dropdown) enables users to select an item from a predefined list.


Entity Name

Definition

SelectColor

Provides the possible semantic colors for Select inputs, based on the SAP Fiori Design Guidelines.


Switch

The toggle switch mimics a physical switch. It enables users to set individual features (such as personalization or display settings) to either active or inactive.


Entity Name

Definition

SwitchColor

Contains the helper class to set up an SAP Fiori semantic switch component, based on the SAP Fiori Design Guidelines.


Generic Tag

The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.


Entity Name

Definition

TagColor

Provides the available color options for the Generic Tag component, based on the SAP Fiori Design Guidelines.





SAP Fiori is the trademark or registered trademark of SAP SE or its affiliates in Germany and in several other countries.