Last Update: Jan 15, 2024

Platform: Web

Designer: Matthias Stenzl

Intro

The popover displays additional information for an object in a compact way and without leaving the page. This popover is described here in a specific form. It uses list entries and thus carries out in-place navigation on the actual popover.

Screenshot 2024-01-15 185851

Usage

You want to show UI elements that are not available with the basic quick view.
The quick view is more appropriate for your use case.
The objects are in the list in a list-detail layout (in this case, the details are shown in the details area).

Types

Structure & Components

The popover has three main areas:

Header (optional) - with a back button and a title
Content - holds all the controls
Footer (optional) - with additional action buttons

Behavior & Interaction

Users can navigate from a popover to different users/objects. In this case, a back button is placed on the top left of the quick view box to allow the user to navigate back to the first or previous quick view. All other links lead

to new pages and close the quick view.

Responsiveness & Adaptiveness

The popover is closed when the user clicks or taps outside the popover or selects an action within the popover, which calls the popover's close() method. You can prevent this with the modal property. The popover can be resized when the resizable property is enabled.

When using the sap.m.Popover in Horizon theme, the breakpoints and layout paddings could be determined by the container's width. To enable this concept and add responsive paddings to an element of the Popover
control, you may add the following classes depending on your use case: sapUiResponsivePadding--header, sapUiResponsivePadding--subHeader, sapUiResponsivePadding--content, sapUiResponsivePadding--footer.

sap.m.Popover is not responsive on mobile devices - it will always be rendered as a popover and you have to take care of its size and position.
sap.m.ResponsivePopover is adaptive and responsive. It renders as a dialog with a close button in the header on phones, and as a popover on tablets.

Application-specific examples

UX Writing Guidance

When creating a button label:

Keep the button label short and crisp, it can´t exceed one line in length.
Don´t use abbreviations.
Don't use synonyms.
Use active formulation.
Exception: the OK button, where users are simply being asked to confirm they've read or seen something.

The following links point to:

a chapters in the Frontify UX Guideline for additional information: About UX Writing
the page: SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite

For questions to the UA Team, please use the following DL:

mailto:DL_6463A20EA1D4B3D3F6DA72BB@global.corp.sap

Accessibility

The sap.m.sample.PopoverNavCon was developed in accordance with the product standards assessability standards and is therefore 100% assessable as a component.

Resources

https://sapui5.hana.ondemand.com/#/entity/sap.m.Popover/sample/sap.m.sample.PopoverNavCon

https://experience.sap.com/fiori-design-web/popover/