What the Badge is?
The badge is a tiny new feature to make your UI more interactive and informative. Badges display very short and important information that attracts the user’s attention. In this post I’m sharing with you more about the essence of the badge feature and optional use case scenarios.
Currently the following UI5 controls support it:
Badge feature implemented in sap.m.Button
Screenshots from UI5 Demokit: Button with Badge (SAPUI5 1.82)
The badge acts both as a visual eye-catcher and as a counter. You can apply it to any button type, but we recommend that you only use it on the Default, Ghost, Transparent, and Emphasized button types.
When to use the badge with button:
- You can use the badge for example when the user collects different items from various pages into a basket such as a shopping basket.
Do not use the badge on buttons if:
- The user must trigger an action.
More details:
If the displayed value is 0 the badge is hidden and appears only when the value is greater than 0. The badge can display a maximum of 4 digits. That’s why if the value of the badge is greater than 9999, it displays “999+” instead of the real value. Furthermore, the application developer can control the number of displayed digits (up to 4) and appearance of the badge.
The value and the visibility of the badge are set via the BadgeCustomData object (sap.m.BadgeCustomData) added to the Button’s customData aggregation. Its key property must be “badge”.
| API documentation: | link |
| Example: | link |
sap.m.Avatar
Screenshots from UI5 Demokit: Avatar with Visual Affordance (SAPUI5 1.82)
This feature gives users visual affordance of the available action and is particularly useful for images. When you use a badge icon with the Avatar, always provide a corresponding tooltip to indicate the action using the badgeTooltip property.
Usage:
There are three recommended options for the icon: “zoom-in”, “edit” and “camera” and they automatically assign the relative tooltips to it. If none of them is suitable, a custom icon can be chosen from the SAP Icon Pool and a custom tooltip should be set.
| API documentation: | link |
| Example: | link |
sap.m.IconTabBar
Screenshots from UI5 Demokit: Icon Tab Bar (SAPUI5 1.84)
The badge is a small circle, placed on the top right corner of a tab or an overflow button. Its purpose is to indicate that something new is added within this tab and to attract the user’s attention. The badge indicators are aslo displayed in nested tabs or in the tab filters in the overflow menu and automatically disappear 3 seconds after the user activates the tab filter.
When to use the badge with Icon Tab Bar:
- Use it to direct the user’s attention to a tab when there are new items added to this tab.
Do not use attention badge if:
- There are no new items
- The new items are added by the user.
More details:
The badge is represented with BadgeCustomData and you can add it on an Icon Tab Filter using the customData aggregation. Its visibility is controlled by the visible property.
| API documentation: | link |
| Example: | link |
Integration cards
As of version 1.81, the sap.ui.integration.widgets.Card supports text badge feature. Typical usage of the badge is to show a new card on the user’s home page. The badge automatically disappears when the user activates (e.g. clicks, tabs) the card or when the focus is on the card for more than 3 seconds.
Use a text badge if:
- There is a new card on the user’s home page
Do not use a text badge if:
- To display a message.
- To display a message text “temporary unavailable”. Use the disabled state instead.
- The card should not be used by the user. Do not display the card in this case.
- To display a counter. Use the numeric header of the card instead.
More details:
The badge is also available in the <ui-integration-card> HTML custom element as an HTM attribute.
Screenshot from UI5 Demokit: Card Explorer-Text Badge (SAPUI5 1.82)
| API documentation: | see it in the Card Explorer |
| Example: | link |
| <ui-integration-card> HTML custom element example: | link |
- SAP Managed Tags:
2 Comments
