Posted by & filed under SAP Fiori Development.

SAP Fiori

SAP Fiori User Interface speaks a consistent design language and makes use of a common technical infrastructure. Types of the UI Components are categorized into

  • Action

    • Action Sheet

      provides a list of actions and lets a user select any one. It is completely responsive. Actions are arranged in the top to bottom order according to its importance, left-aligned. A User can trigger an action or close the sheet by tapping anywhere on the screen.  Avoid placing too many buttons in one sheet for fewer scrolls.

    • Button

      allows users to trigger actions by either tapping the button or by pressing a corresponding key like SPACE. Types of buttons are :

      • Standard Button: on click, triggers an action
      • Toggle Button: on click, changes state to “pressed” and toggles back to the original state on the successive click (similar to a check-box control).
      • Segmented Button: shows multiple options. On click of one of the options, it changes to “pressed” state (similar to a radio button group control).
    • Link

      is a clickable text element that is used for navigation and sometimes to trigger an event. For triggering an action, however, a button is more preferable. One drawback of links is while wrapping, the link gets separated by spaces in between. When the mouse pointer is positioned over a link, there is an additional visual highlight (an underline or color change). This is kept for emphasizing that the link is clickable.

    • Upload Collection

      allows users to upload single or multiple files from a device into the SAP Fiori App. Uploaded files appear on an Attachments tab. File types can be easily recognized by their generic icons (such as Word documents, Excel, Images, PDF files).

  • Container

    • Carousel

      is a control for browsing through set of items displaying one at a time. Navigation between items is similar to browsing through the pages of a book. Carousel is best for image browsing where the size of content area is automatically adjusted according to space available.

    • Form

      used to allow users to enter data systematically. It normally contains other UI elements like labels, input fields, buttons or check-boxes.

    • Panel

      a container for grouping and displaying information, collapsible for space saving. For responsive screen, the width of the panel is set to 100% which resizes its child elements according to the width of screen. Panel contains a header, an information bar (optional) and the content (consisting of all the controls).

  • Toolbar

    provides users the possibility to modify the UI or change the action. Table and chart toolbars appear above the table while the footer bar has a dark background placed at the bottom. Footer toolbar does not get affected by scroll.

  • Data Visualization 

    • Chart

      is visual representation of quantitative data. A well-designed visual draws attention to key information and patterns in the record. Mini charts can be used for displaying data in small sizes by embedding data within tiles.

    • Process Flow

      used to depict flow of objects. Two kinds of object flows:

      • Document flow: split into number of branches
      • Approval flow: mostly linear

Process flow consists of a filter bar, a toolbar, the process flow header and a flow map.

  • Timeline

    control displays events and posts in a reverse chronological order. Latest entries are always on top. Two distinct variants:

    • Basic timeline

      : read-only

    • Social

      : offers high level of interaction and collaboration

This control contains a header (optional), a chronological axis (timeline can be scrolled along the axis) and entries (posts).

  • Display

    • Image

      communicate messages and captures attention. The size of the image is adjusted according to the resolution (Size S – phone; Size M – tablet; Size L – Desktops).

    • Label

      a name or title given to a control or an object. A label is always recommended for form controls.

    • Message Page

      provides feedback or response to user regarding an error or a warning.

    • Text

      is a control that holds text displayed on Front UI for content areas like forms. The resizing behavior of Text control makes it easily compatible with diverse screens.

  • User Input

    consists of elements mainly used in forms or for user defined actions. Some elements included are checkbox, date picker, select, input field, search, slider, text area, etc.

  • Filter

    • Contextual Filter

      is useful when simplified view is required from a complex list. Also focuses on performance improvement when handling large lists.

  • List

    • Action List Item

      allows user to trigger actions directly from a list. It’s mainly used on phones inside dialog boxes and charts.

    • Display List Item

      is the simplest list item that offers navigation and displays text.

    • Standard List Item

      is best suited for homogeneous data representation. It provides a standardized format of listing.

  • Table

    • Analytical table

      holds a set of data, structured in rows and columns. Grouping and aggregation are few techniques supported for working with data.

    • Grid table

      contains data listed in rows and columns that are scrollable in both directions. They can handle a large number of data.

    • Tree table

      provides a hierarchical view set of data that can be grouped into nodes. Additional details can be provided horizontally for each line item.

Atul Gupta is a Director of SmartPhone Biz Apps Ltd, a UK based company that provides business solutions and services in enterprise mobility area.