Apple widgets display key information in a glanceable format on user’s iPhones.

Usage

• Limit to using SAP icons and SDK components, the widget should look consistent with the app. 
• For legibility, consider displaying widget content with a 16pt margin for texts and 8pt tight margins for images and glyphs.
• Consider using SAP icons or SF Symbols on the header instead of the app logo.

• Avoid using the logo on the header, according to apple guidelines show the logo only if your app curates content. 
• Avoid forcefully repeating information or expanding the widget’s content size to fill more space for medium or large widgets.

Anatomy

Widgets support three different sizes – small, medium, or large. On iPhones, users can find widgets in the widget gallery, where they can also choose a widget’s size.

Each widget consists of a header and content area.

A. Header

The header should not duplicate the name listed beneath the widget.

It should only be included in the widget that corresponds to a subset of functionality within the app, and the title should correspond to such.

B. Content Area

The content area is comprised of one or multiple SAP iOS SDK components of a single type:

• Table View
• Timeline Preview
• Chart Card
• KPI Header

Some components are slightly modified to conform to the widget dimensions.

Variations

KPI View

KPI widgets usescurrent iOS SDK KPI and KPI header components. They can be used to represent numerical values such as dates, amounts, etc.
Examples: Pending deals in Deal Manager, calorie count FIT@SAP

Table View

Table view widgets use current SDK object cell components. Table widgets can be used to display information with an object image, headline, and subtitle. Examples: Trending news articles/videos in the News app, upcoming events in the Celebrate app, food menu in the Campus app.

Timeline Preview

Timeline view widgets use the current SDK timeline and calendar components to display timeline elements with dates. For timeline widgets, consider displaying dynamic information that changes throughout the day. For instance, at the beginning of the day display all events, refresh the data right before the data to display content about the specific event.
Examples: Upcoming meetings/ events in Easy Connect.

Collection View

Collection view widgets use the current SDK collection view components to display content with profile images and titles.
Examples: Contacts

Chart View

Chart view widgets use the current SDK chart cards to display any graphical information. Use line and donut charts in the widgets to avoid overcrowding and allow users to get information at a glance.
Examples: Line chart graph showing quarterly updates in Sales Revenue app.

Resources

Development: FUIKPIView, FUIKPIUnitItem,  FUIKPIProgressView, FUITimelinePreviewView,  FUIObjectCell, FUIObjectCollectionViewCell

Human Interface Guidelines: Widgets