The Fiori Component¶
The SAP BTP SDK for Android includes a library of user interface components that let developers easily create applications that follow Android Material Design as well as SAP's Fiori Design Language.
Attachment¶
The attachment form cell lets the app user select files or capture images and video, enabling an application to access them for post-processing, such as uploading to a server. The attachment form cell has two modes of operation: edit mode and view mode.
Contact Cell¶
A contact cell gives quick access to the various methods of communicating with a contact. It is commonly found in an object and object details floor plan.
A contact cell consists of an image, labels (headline, and subheadline), description, and contact actions. Unlike an object cell, the contact cell does not have a footnote, icon stack, or statuses.
The secondary action becomes multiple contact actions and the image border becomes a circle. A common rule for image shape is that the object images are shown as rectangles, while person images are shown as circles.
Grid Table Row¶
Generally, a grid table is a grid layout of labeled columns and rows that presents numbers, text, or even images. Grid tables are available only on regular screen sizes. On compact screen sizes, data appears as object cells.
A grid table row consists of a collection of columns, either image or text. When it is used as the table header, columns can use only text.
Indicator¶
An indicator indicates the progress of an operation. Like the traditional Android progress bar, the Fiori progress indicator also supports the following modes:
-
Determinate: Lets you indicate how much progress has occurred.
For example, you can indicate the percent remaining for a file retrieval, the number of records in a batch being written to a database, or the percent remaining of an audio file that is playing.
You can create either a circular determinate or horizontal determinate progress indicator to demonstrate the progress made so far.
-
Indeterminate: Lest you show progress when you don't know how long an operation will take. "Indeterminate" is the default mode for a progress indicator, and shows a cyclic animation without a specific amount of progress indicated.
Key Value Cell¶
A key value cell is a simple key/value pair cell), which can, for example, show data sets and their labels. Key value cells are typically found in the object and object details floor plans.
A key value cell consists of key and value labels. Optionally, you can associate a value label with a specific action (for example, a phone number or email address).
Object Cell¶
The object cell is a list item view that can represent a business object. An Object Cell consists of icon stack, image, labels (headline, subheadline, footnote), description, statuses, and a secondary action.
Object Header¶
The object header provides a quick view of the most important or most frequently used information about one instance of an object. It is visually separated from the content area below it. The information in a header should be clear and concise.
An object header consists of an image, object name, (headline, subheadline), additional information (tags, footnote, body), description, and KPI.
Profile Header¶
The profile header helps an app user recognize and learn more about a contact, and even get in touch with that person, via email or phone (or other contact action), without having to drill down into the detailed contact information.
A profile header consists of a profile image, name (headline, and subheadline), description, and contact actions. A profile header is structurally similar to a contact cell, but is rendered in a different way that is appropriate to show as a header in a profile detail floor plan.
Search UI¶
The Fiori Search View component provides an interface that an app user can use to enter a search query and submit a request to a search provider. This component is an extension (a subtype of SearchView) of the Android SearchView widget.
The component returns a list of suggestions or results based on the search criteria, from which the user can select.
Fiori Search View provides an out-of-the box implementation of a Search UI with an optional bar code reader that can read numerical bar codes (representing, for example, product IDs) and perform search queries using them.
It can be used either as a persistent search view or as search dialog within a toolbar.
QRCode View¶
The QRCode view provides a convenient interface to scan various types of barcodes (for example, QR code, barcode, etc.) and get the result. It's very easy for developers to integrate the control into their application.
Onboarding¶
The onboarding UI components support the registration process of your app and the initialization and administration of your data vault.
The main entry point of the registration process is the welcome, or launch screen from which the app user navigates to the activation screen. The welcome screen introduces the application features. The activation screen supports multiple onboarding or registration scenarios, including onboarding based on the discovery service, or on QR codes. If your app allows app users to select a specific onboarding method, the activation screen can show the options and allow each app user to choose his or her preferred scenario. If the app offers QR code onboarding, the QR code reader screen also shows the camera preview.
After successful user registration, you can use the create passcode and confirm passcode screens to allow app users to specify their passcode, which can be used for data encryption purposes.
For registered apps, you can use the enter passcode screen to ask the user to enter the passcode that he or she provided at registration time.
You can also enable fingerprint authentication, which is supported by an enter fingerprint screen.
An End User License Agreement (EULA) screen shows any legal disclaimers, and requests the app user to accept or reject them.