What’s New

Adaptive Layout

Updated Guideline Articles! The adaptive layout articles have been updated and enhanced to provide guidance on size classes and layout basics, as well as multi- column layouts and adaptive apps for large screens.

Three-column layout (left) and two-column layout with inspector (right)

Attachment Form Cell

Feature Enhancements! The attachment form cell is used to upload files, usually as part of the create or editing workflow.

It now includes an optional confirmation dialog when the user taps the “Delete” icon in the previewer.

Delete confirmation dialog in attachment form cell

Card Header

Feature & Structure Enhancements! The right accessory in the main header includes two slots for custom components. The right accessory in the extended header includes one custom component.

The card component setup is better aligned with Android.

Three custom slots in main and extended header

Filter Feedback

Feature Enhancements! The filter feedback now features the stepper, slider, and list picker as new form cells – giving you even more flexibility and control in your filtering experience.

Stepper form cell (left) and slider form cell in filter feedback pattern (right)

Feedback Patterns

Feature Enhancements! Visual enhancements have been made to feedback patterns such as banners, multi-message handling. Material effects and relative position have been applied to toast message. Offline and error handling can be found in the banners, and empty state is now a part of the illustrated message.

Banner (left) and toast message (right)

Progress Indicators

Structure Enhancements! Guideline structure enhancements have been made to the progress indicators category.

New component guidelines added: activity indicator and progress & processing indicators.

Activity indicator (left) and progress indicator (right)

New Updates via Branches

Updated Design Kit! We’ve transitioned from creating new versions as separate files to updating within the same file using branches. This change ensures a single source of truth, improves collaboration, and simplifies version control by keeping all updates centralized and organized in one place.

SAP Fiori for iOS Design Kit

Variables – Cell Style

New variable! Cell style has been added to the variable collection. All the table view cells and form cells can now be switched between a full-width style or an inset grouped style, including the header cell and footer cell. Hairline control has been added to this variable collection as well.

Full-width cells (left) and inset grouped cells (right)

Elevation

New! The Elevation article goes into the details, visual cues, examples, and usage of the elevation system.

Elevation techniques: materials and shadow effect styles

Chart Colors

Update! Chart ordered and semantic colors have been updated to align with new chart colors from web.

Updated chart ordered colors in light and dark modes

Avatar and Avatar Stack

Feature Enhancements! We have added a grouped layout as well as top and bottom labels for the avatar stack.

From left to right and top to bottom: leading label, above label, trailing label, and below label

Document Scanner

Feature Enhancements! The document scanner allows for automatic and manual mode scanning with border detection, can also do multiple page scanning and editing.

Document scanner views

Multi-Message Handling

Feature Enhancements! Multi-message handling has been added to the feedback patterns. When a screen contains multiple messages, the banner can show an overview of the type and number of messages with an action link to open a multi-message handling detail view.

Multi-message handling

Form Cells

Feature Enhancements! Attachment form cell, filter form cell, and segmented control form cell now have required field behavior available.

From top to bottom: filter form cell, segmented control form cell, attachments form cell

Object Cell

Feature Enhancements! The object cell has been enhanced to provide more flexibility, which mirrors the modular structure of the cards component including swappable nested elements such as the rating control.

Object cell with label button and rating control (top) and with avatar stack and overflow button (bottom)

Rating Control

Feature Enhancements! We have added half stars for read-only rating controls as well as optional leading and trailing text. The read-only star sizes have been enhanced and small sized editable and disabled rating controls have been removed for better accessibility.

From top to bottom: editable, read-only, disabled, and accented read-only rating controls. From left to right: large sized and small sized rating controls

Step Progress Indicator

Feature Enhancements! The step progress indicator has been enhanced with icon nodes as an alternative to numeric nodes.

Numeric nodes (left) and icon nodes (right)