Apple widgets display key information in a glanceable format on user’s iPhones.
Widgets support three different sizes – small, medium, or large sizes. On iPhone, iPad, and Mac, 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.
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.
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 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.
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.
If your current app uses a different brand color other than the Shell color, prefer to use that branding color theme to make your widget look consistent with the app.