Show TOC

Quick View CardsLocate this document in the navigation structure

Quick view cards display detailed information about a single record, in greater depth than would be displayed in a table or list.

The information displayed in quick view cards configured in the com.sap.vocabularies.UI.v1.HeaderInfo and com.sap.vocabularies.UI.v1.Facets terms. The com.sap.vocabularies.UI.v1.HeaderInfo term is used to present the entity header information, and the com.sap.vocabularies.UI.v1.Facets term is used to present detailed information about the record. It supports the following properties:

  • TypeNamePlural

  • ImageUrl

  • Title

  • Description

The content area shows FieldGroup records from referenceFacet items that have been tagged using the IsSummary annotation in the com.sap.vocabularies.UI.v1.Facets annotation.

The com.sap.vocabularies.UI.v1.Facets term can be configured in the application manifest file by setting the annotationPath property with a qualifier, as shown in the example below. If the annotationPath property is not configured, the com.sap.vocabularies.UI.v1.Facets term, without a qualifier, is used.

Card Footer

You can assign actions to quick view cards that open in the object stream of the stack card. The actions are displayed as buttons in the card footer. For more information about configuring the actions, see the section on Card Footer in Cards Used in Overview Pages.

Interaction buttons in the footer area are now part of sap.m.OverflowToolbar. With this, the quick view cards can now display action buttons based on the width of the card and if more actions are necessary, the remaining actions are shown on the Overflow Toolbar.

Note

Since the height of each quick view card is aligned with the content of the card, this means cards can have different sizes. If there is more content than can be shown in the card then you'll be able to scroll vertically, but only within the content area itself. The header and footers stay fixed.

Sample Code
"sap.ovp": {
    ...
    "cards": {
        "card00": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.stack",
            "settings": {
                "category": "{{card01_category}}",
                "entitySet": "BusinessPartners",
                "objectStreamCardsSettings": {
                    "annotationPath": "com.sap.vocabularies.UI.v1.Facets#Qualifier2"
                }
            }
        },
        ...
    }
}