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

Usage

Along with Apple Widget Guidelines here’s are some of the SAP SDK recommended guidelines. 

• 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 sizes. On iPhone 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 Widget uses current iOS SDK KPI and KPI Header components. KPI widgets 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 widget uses 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.

Note: SDK will not support the icon action button for the upcoming release, individual apps teams can consider developing it.

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.

Note: SDK will not support the shape action button for the upcoming release, individual apps teams can consider developing it.

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 various chart cards to display any graphical information. Limit to using line and donut charts in the widgets to avoid overcrowding and making easier to glance information for the users.
Examples: Line chart graph showing quarterly updates in Sales Revenue app.

Specifications

Resources

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

Human Interface Guidelines: Widgets