Updated: March 19, 2021

Flag and Favorite

Intro

The flag icon is used to flag objects for later reference and follow-up. The favorite icon is used to mark frequently needed objects as favorites.

In order for a business object to be flagged and/or be marked as favorite, the properties markFlag and markFavorite should be set to true. To display both indicators, set the property ShowMarkers to true.

Usage

  • Use flag if you want to flag objects for later reference and follow-up.
  • Use favorite if you want to mark frequently used objects as favorites.

Responsiveness

Size S
Size S
Size M
Size M
Size L /XL
Size L /XL

Layout

A small flag indicates that the object is flagged. A small star indicates that the object is marked as a favorite.

Favorite and flag icons
Favorite and flag icons

Flags and Favorites in Object List Items

Flag and favorite icons should be placed in the reserved space in the first row of the status block, on the right-hand side.

The status line should be used for visualizing the flagged and favorite objects. The first status line remains empty if neither flags nor favorites are set.

If your app does not use flags or favorites, you can use both status lines for further information about the object status.

Flag and favorite - Object list item
Flag and favorite - Object list item

Flags and Favorites in the Object Header

Responsive Object Header

If you use the responsive object header, the favorite and flag icons will both be shown right next to the object title. The same applies to the smartphone size.

Flag and favorite - Responsive object header - Full screen
Flag and favorite - Responsive object header - Full screen
Flag and favorite - Responsive object header - Smartphone size
Flag and favorite - Responsive object header - Smartphone size

Standard Object Header

If you use the standard object header, the flag and favorite icons should be placed in the reserved space in the first row of the status block, on the right-hand side of the object header.

If no flag or favorite is set, the first row should remain empty as users can choose set these at a later point in time. This also avoids having inconsistently formatted status lines.

If your app does not use flags or favorites, you can use both status lines to include further information about the object status.

Flag and favorite - Standard object header
Flag and favorite - Standard object header
Flag and favorite - Standard object header - Smartphone size
Flag and favorite - Standard object header - Smartphone size

Behavior and Interaction

Set Flag/Mark as Favorite

In the full screen layout, the functions Mark as Favorite and Set Flag are available in the footer toolbar. Once the user has set a flag or favorite, the icon is highlighted (toggle button).

Flag and favorite - Set Flag/Mark as Favorite toggle (full screen layout)
Flag and favorite - Set Flag/Mark as Favorite toggle (full screen layout)

In the split-screen layout, the functions Mark as Favorite and Set Flag are available in the details footer, and if the master list is set to multiselection mode, the functions are available in the master list footer.

Flag and favorite - Set Flag/Mark as Favorite in master list (split-screen layout)
Flag and favorite - Set Flag/Mark as Favorite in master list (split-screen layout)

Remove Flag/Favorite Settings

To remove the settings, click on the Set Flag and/or Mark as Favorite icon again.

Message Handling

Once the user has set a flag/ favorite, a respective message toast appears. The same holds true for unflagging/unmarking an object.

Flag and favorite - Message toast
Flag and favorite - Message toast

Once the user has set a flag/ favorite, a respective message toast appears. The same holds true for unflagging/unmarking an object.

Flag and favorite - Message toast
Flag and favorite - Message toast

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation