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.
Install OutSystemsUI version 2.9.0 or higher from Forge.
To install the SAP Fiori Theme component, follow these steps:
Log into Service Studio.
Open the module you want to apply the SAP Fiori Theme to.
Click Manage Dependencies and follow these steps:
Search for SAPFiori_Theme.
Select all the elements of the component you want to use in your module.
Click Apply to add SAPFiori_Theme as a dependency to your module.
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.
In the Elements tree, expand the Themes folder.
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.
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.
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.
Name
Definition
QuartzLight
Theme based on the SAP Fiori Quartz Light default theme.
QuartzDark
Theme based on the SAP Fiori Quartz Dark theme.
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.
Data Type
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
Indicates if the page contains the collapsible header or not.
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.
This is a block used inside the OutSystemsUI TabsHeaderItem component to build an Icon Tab Bar.
Input Parameters
Observations
Indicates the custom style classes to add to the pattern.
To see a preview of this pattern, go here.
This is a block used inside OutSystemsUI TabsHeaderItem component to build an Icon Tab Bar with inline layout.
ShowIcon
Indicates if the tab icon should be displayed.
This is a block used inside OutSystemsUI Timeline Item component to build a Timeline.
This is a component used to display additional data on the current context with informative highlight colors.
Events
TagClicked
User clicks the tag.
This is a block used inside a Progress Bar component to display data similarly to the Progress Indicator.
Progress
Integer
Indicates progress percentage. It must include a number from 0 to 100.
This is a component used to display a loading animation.
BusyIndicatorSize
BusyIndicatorSize Identifier
Defines the size of the busy indicator.
This is a header block to use at the top of Lists and Tables to show a title and additional actions.
This is a pagination block to use at the bottom of lists and tables to load more results.
CurrentRecordsCount
Indicates the count of records currently on display.
IsLoading
Indicates if the list is in the process of getting fetched. If True, a Busy Indicator block displays.
RecordsIncrement
Defines the number of new records fetched on each click.
TotalCount
Long Integer
Indicates the total records number of the related list/table.
OnClick
User clicks the pagination block.
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
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.
The busy indicator informs the user about an ongoing operation.
Defines the size of the busy indicator, based on the SAP Fiori Design Guidelines.
Buttons enable users to trigger an action.
ButtonColor
Provides all possible semantic colors a button can have, based on the SAP Fiori Design Guidelines.
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.
CheckboxColor
Provides all possible semantic colors a checkbox can have, based on the SAP Fiori Design Guidelines.
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.
DatepickerColor
Provides all possible semantic colors a date picker can have, based on the SAP Fiori Design Guidelines.
SAP icons have a friendly style that is consistent in terms of size, stroke, and balance. These icons enable simple and direct user interactions.
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.
A text input field enables users to enter and edit text or numeric values in 1 line.
InputColor
Provides all possible semantic colors inputs can have, based on the SAP Fiori Design Guidelines.
The message box enables displaying messages to the user.
MessageBoxColor
Contains the CSS helper classes for creating the different types of message boxes available, based on SAP Fiori Design Guidelines.
The progress indicator shows the progress status of a process or a degree of accomplishment.
ProgressIndicatorColor
Provides all possible semantic colors that the progress indicator can have, based on the SAP Fiori Design Guidelines.
Radio buttons provide users with a set of mutually exclusive options. They enable users to select only 1 option from 2 or more choices.
RadioGroupColor
Provides all possible semantic color classes for radio buttons, based on the SAP Fiori Design Guidelines.
The select control (also known as a dropdown) enables users to select an item from a predefined list.
SelectColor
Provides the possible semantic colors for Select inputs, based on the SAP Fiori Design Guidelines.
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.
SwitchColor
Contains the helper class to set up an SAP Fiori semantic switch component, based on the SAP Fiori Design Guidelines.
The generic tag control displays complementary information that relates to the current page, such as key performance indicators (KPI) and situations.
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.