Show TOC

Configuring CardsLocate this document in the navigation structure

A card is a smart component that uses UI annotation to render its content. Each card is bound to a single entity set in a data source. The cards object contains the list of cards to display in the application.

Overview pages may contain the following types of cards:
  • Table cards

  • List cards

  • Stack cards

  • Analytic chart cards

Card configuration is provided in the "sap.ovp"..."cards" object. The card ID is the property name and the card configuration is provided in an object as the value. At runtime, cards are displayed in the order that they appear in the application descriptor.

Navigation from the card to the application uses intent-based navigation. For more information, see SAP Help Portal at http://help.sap.com/nw-uiaddon20. From Application Help, open SAP Library and choose Start of the navigation path SAP Fiori Launchpad Next navigation step Configuring Navigation End of the navigation path.

There are two card configuration sections: Configuration for the overview page application that will render the card, and internal card configuration for the card instance. The following configuration items are relevant for all cards:

  • model: the name of the model to provide to the card instance

  • template: the card type (card component package) to instantiate

  • settings: internal card configuration passed to the card instance
    • entitySet: the entity set to use in the card

All cards extend the generic card and inherit generic capabilities that are shared across all cards, such as a card header, card footer, navigation support, and more. The generic card uses the following annotations terms:
  • com.sap.vocabularies.UI.v1.Identification: used to retrieve information about card actions. Overview pages support the following actions:
    • com.sap.vocabularies.UI.v1.DataFieldForAction: OData model actions

    • com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation: intent based navigation actions

    • com.sap.vocabularies.UI.v1.DataFieldWithUrl: URL navigation actions

  • com.sap.vocabularies.UI.v1.SelectionVariant: used to support requests to the entity set with input parameters, and the required filters to be applied on the entity set

  • com.sap.vocabularies.UI.v1.PresentationVariant: provides information about the sorting and grouping criteria applied on the entity set that affects the content area.

Sample Code
"sap.ovp": {
    ...
    "cards": {
        "card00": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.stack",
            "settings": {
                "sortBy": "Price",
                "sortOrder": "descending",
                "listType": "extended",
                "annotationPath": "com.sap.vocabularies.UI.v1.LineItem",
                "category": "{{card00_category}}",
                "entitySet": "Products"
            }
        },
        "card01": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.stack",
            "settings": {
                "category": "{{card01_category}}",
                "entitySet": "BusinessPartners"
            }
        },
        "card02": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.charts.bubble",
            "settings": {
                "entitySet": "SalesOrders",
                "selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#bubble",
                "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#bubble",
                "presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#bubble",
                "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#bubble"
            }
        },
        ...
    }
}