UI Package for SAP Fiori themed apps

Category: UI Resources
Subcategory: All

Overview

This UI Package allow you to build a Mendix Application within the Fiori Look and Feel. It includes the key page layouts and building blocks. It also supports both Embedded, meaning running within Fiori launchpad or standalone, also letterbox called. In the documentation you can find a list of all the class names with their function.

Documentation

Demo url

The UI Package for SAP Fiori themed apps is based on the same principles as Mendix ATLAS UI. It will provide full responsive page templates, page layouts and building block to build a full functional SAP Fiori UI experience. 

 

Fiori Class Names

When not using the building blocks the following class names can be used to style your individual widgets. These classes are an extension on top of the existing Bootstrap and Atlas UI classes available. 

https://atlas.mendix.com/p/helpers/7881299347899271

  1. flexcontainerWrapper for items which will be horizontal aligned.
    1. FlexitemItem which will only take the space that it needs.
    2. Flexitem-mainItem which will take all the remaining space.
  2. flexitem-center[Needs to be placed on flexcontainer]Vertically aligns (content of) items.
  3. sap-containerCreate spacing(padding) around the content of this element.
  4. dashboardgroupUsed to create groups of tiles. Gives spacing around and between tiles.
  5. dashboardgroup-titleThe title of a dashboard group.
  6. sap-footerCreates a footer (container).
  7. sap-formCreate a form (container).
  8. sap-form-compact[Needs to be placed on sap-form]Removes spacing around form content / form inputs.
  9. sap-form-titleThe title of a form.
  10. sap-form-title-linedThe title of a form with a bottom line.
  11. sap-form-subtitleThe subtitle of a form. Used when you have multiple columns for example.
  12. sap-listWrapper around a listview and optional header.
  13. sap-listview-categories[Needs to be placed on a layout grid]Creates a header on top of the listview. Caution: Layoutgrid with this class needs to be placed outside listview, but inside sap-list. (Building Block examples available).
  14. sap-pageheaderUsed above the main content of a page.
  15. sap-pageheader-titleThe title mostly used in the pageheader.
  16. sap-pageheader-subtitleA subtitle mostly used in the pageheader.
  17. sap-pageheader-itemAn item mostly used in the pageheader. Multiple items will render as columns.
  18. sap-pageheader-border-bottomAdds a border at the bottom of the pageheader.
  19. sap-mainheaderUsed as a header inside a sidebar.
    1. sap-mainheader-left, Sap-mainheader-center, Sap-mainheader-rightOptional containers to space content as desired.
    2. sap-mainheader-textUsed to hide text overflow and end with ‘…’ when necessary.
  20. object-statusWrapper for two text values shown next to each other.
    1. object-status-titleThe left value.
    2. object-status-textThe right value.
  21. sap-tile A tile(card) mostly used in the Launchpad layout.
  22. sap-tile-headerThe header of a tile.
    1. sap-tile-header-titleThe title of a tile placed in the tile header.
    2. sap-tile-header-subtitleThe subtitle of a tile placed in the tile header.
  23. sap-tile-contentThe content of a tile.
    1. sap-tile-content-iconA representative icon of the tile which functions as a clickable button.
    2. sap-tile-content-textDescription field of the tile.
  24. sap-wizardUsed for creating a wizard.
  25. sap-wizard-stepPlaced on each step of the wizard.
    1. sap-wizard-step-icontextwrapperwrapper for grouping the icon and text.
      1. sap-wizard-step-iconUsed for the icon of a wizard step.
      2. sap-wizard-step-textUsed for the name of a wizard step.
  26. sap-wizard-step-activeGives a wizard step an active state (The step the user is currently doing).
  27. sap-wizard-step-visitedGives a wizard step an visited state.  

 

Fiori Building Blocks

Each page template of the UI Package for SAP Fiori themed apps is build up using building blocks. When starting a blank page, you can use the building blocks to come to the same result and keep your page SAP Fiori consistent. 

The following building blocks are available:

https://docs.mendix.com/refguide/sap/sap-fiori-building-blocks

Releases

Version: 3.0.1
Framework Version: 8.16.0
Release Notes: Upgraded Mendix Studio Pro version 8.15.1
Version: 3.0.0
Framework Version: 8.11.1
Release Notes: SAP Fiori UI theme package is updated with Mendix Atlas UI version 2.5.0. CSS fixes to Building blocks and layouts.
Version: 2.1.0
Framework Version: 8.7.0
Release Notes: Updated theme based on Atlas UI Framework version to v2.5.3
Version: 2.0.0
Framework Version: 8.0.0
Release Notes: - Support for Mendix 8.0.0
Version: 1.0.0
Framework Version: 7.18.1
Release Notes: New Fiori Web modeler compatible UI Package