The SAP Fiori user experience creates a consistent UI across SAP products. SAP Fiori 3 is SAP’s new target design system for all SAP products in the Intelligent Suite. The SAP Fiori 3 UI Resource module in the Mendix Marketplace allows you to create the same user experience in your Mendix apps.
The Mendix module gives you access to designing your pages with SAP Fiori-styled widgets and building blocks as part of your layout. You can also allow end-users to select a theme and apply it immediately. The module supports SAP Quartz Light and Dark themes.
More information on using SAP Fiori 3 design in your Mendix app is available in the following sections:
- Widgets – Mendix core widgets having SAP Fiori 3 styling
- Building Blocks – groups of widgets which can be used to quickly create SAP Fiori styled pages
- Layouts – different styles of page which can be used in your app — for example, Master/detail or Pop-Up
- Page Templates – readily-available page templates which are already styled ready for you to use in your Mendix app
- Theme Selector – switch between different theme — for example light and dark
The majority of Mendix widgets have been styled to match SAP Fiori 3 styles by default. Examples are shown below.
There are a couple of cases where you will need to apply some extra CSS classes manually to achieve the correct SAP Fiori look and feel. These are described in Applying CSS Classes Manually.
Some SAP Fiori components are not yet supported by Mendix core widgets. These are listed in Unsupported SAP Fiori Components, below.
2.1 Examples of Mendix Core Widget Styling
You can see examples of the Fiori 3 styling of the Mendix Core Widgets by going to the Mendix_Core_Elements page of the SAP Fiori 3 UI Resources Marketplace Module.
Most widgets work the same way as they do in other Mendix styles based on Atlas UI, but there are some changes which are listed in the sections below.
You can choose different types of button by setting the appropriate Button style. The SAP Fiori styles are mapped as follows:
|SAP Fiori Style||Mendix Button Style|
|Transparent||this can be added using a building block|
For the Link button, see Applying CSS Classes Manually, below*.
2.1.2 Container Count Badge
The container count badge allows you to add a count badge to containers on Mendix pages as shown in the following example.
You can create this style by adding the ContainerCountBadge widget inside a container.
The number which is displayed in the badge is supplied by a microflow which you can specify in the Data Source tab of the badge properties. The microflow must return an integer value.
You can specify the appearance of the count badge in the Appearance tab of the badge properties. If you want to maintain the correct SAP Fiori theme, you should choose the Color Source Bootstrap Color Schema.
2.1.3 List Views
Standard Mendix List view widgets can be used on your pages. However, these cannot be borderless. You can add a borderless list from a building block.
2.2 Applying CSS Classes Manually
Some SAP Fiori styling requires you to add some additional CSS classes manually for the styles to be implemented correctly. These cases are described in the following tables.
|SAP Component Style||Mendix Class(es)|
|Right Icon Link||link right icon|
|Left Icon Link||this is the default|
2.3 Unsupported SAP Fiori Components
- Avatar – you can mimic this using a List 3 building block
- Message Strip – we suggest you use one of the Notifications building blocks
- Message Toast/Short message on actions
In addition, there are some limitations on supporting other components:
- In Menus you cannot have:
- two icons
- a slider showing sub-menus
- In Calendars you cannot:
- highlight multiple dates such as holidays or other special days
- In Tables
- you cannot use icons on tables
- you cannot select rows using checkboxes, you can only select rows using the standard Mendix selection methods
- In Tabs you cannot have
- icons with a counter
- only icons
3 Building Blocks
You can see examples of the Fiori 3 building blocks by going to the Building Blocks page of the SAP Fiori 3 UI Resources Marketplace Module. The building blocks are categorized by type.
You can see examples of the Fiori 3 navigation layouts by going to the Layout page of the SAP Fiori 3 UI Resources Marketplace Module. These layouts are designed for use in Responsive (Web) applications, designed to run in any modern web browser, on any device.
The guidelines for the use of each layout are:
- Use the PopupLayout to create a page which appears in front of the existing page.
- Use the SAP_Launchpad layout when you want to create a SAP Fiori launchpad. See SAP Fiori Launchpad – Overview on the SAP Fiori Design Guidelines site for more information.
- Use a Default layout to display information in a single panel.
- Use a MasterDetail layout to display information in two panels side-by-side such as an Order with multiple Order Lines.
- Use a Sliding layout to display dynamic side content. See Dynamic Side Content on the SAP Fiori Design Guidelines site for more information.
- Use a Letterbox layout use Letterboxing display to restrict your layout to a certain width. See Letterboxing on the SAP Fiori Design Guidelines site for more information.
- Use an Embedded layout when you are using this page inside a page which already contains a Header.
Here is a list of the layouts you can use.
- PopupLayout (SAP_3_0_UI_Resources)
- SAP_MasterDetail_Embedded (SAP_3_0_UI_Resources)
- SAP_Launchpad (SAP_3_0_UI_Resources)
- SAP_Default_Letterbox (SAP_3_0_UI_Resources)
- SAP_MasterDetail_Sliding (SAP_3_0_UI_Resources)
- SAP_MasterDetail_Sliding_Letterbox (SAP_3_0_UI_Resources)
- SAP_Default_Embedded (SAP_3_0_UI_Resources)
- SAP_Default (SAP_3_0_UI_Resources)
- SAP_MasterDetail_Letterbox (SAP_3_0_UI_Resources)
- SAP_MasterDetail (SAP_3_0_UI_Resources)
5 Page Templates
You can use one of the available page templates to rapidly create a consistent UI for your app pages. The templates provide you with the building blocks and widgets already arranged to provide an SAP Fiori-style page.
Note that these pages work best when combined with the appropriate Navigation layout. For example, the Fiori Launchpad page template works best with the SAP_Launchpad (SAP_3_0_UI_Resources) Navigation Layout.
6 Theme Selector
You can give the end-use the option to choose their own theme. There is an example of this on the Home page of the SAP Fiori 3 UI Resources Marketplace Module. The end-user can click a button to switch between a Dark Theme or a Light Theme.
The themes available are:
- light (default) – equivalent to the SAP Quartz Light theme
- dark – equivalent to the SAP Quartz Dark theme
7 Demo Apps
The SAP Fiori 3 Demo app Marketplace module contains a number of different skeleton apps which you can review or copy to use as the basis for your own apps.
The demo apps are:
- Shopping Cart – a demo app which allows you to display products by category and view product details
- Browse Orders – a searchable list of orders with the ability to switch from the searchable list to a master/detail view
- Manage Products – a list of products which demonstrates the use of the count badge and navigation to see the product details
- Bulletin Board – a list of items with navigation to see the details of each item
- Shopping Cart Master Slider – the same as the Shopping Cart demo but using dynamic side content