Show TOC

Cards Used in Overview PagesLocate this document in the navigation structure

A card is a smart component that uses UI annotation to render its content. Overview pages may contain transactional cards, such as table and list, stack, and quick view cards, and analytic chart cards such as line, bubble, donut, column, and bullet chart cards.

Card Header

Overview page cards contain header and footer information, such as KPIs and triggerable actions, respectively. All cards contain a header and footer.

All cards have a static header section that can be configured in the application manifest. The card header includes three optional properties: category, title, and subTitle

Sample Code
"sap.ovp": {
    "_version": "1.1.0",
    "globalFilterModel": "ZCD204_EPM_DEMO_SRV",
    "globalFilterEntityType": "SalesOrder",
    "cards": {
        "card00": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.stack",
            "settings": {
                ...
                "category": "{{card00_category}}",
                "title": "{{card00_title}}",
                "subTitle ": "{{card00_subTitle}}",
                ...
            }
        },
        "card01": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.table",
            "settings": {
                "title": "{{card01_category}}",
                ...
            }
        },
        ...
    }
}

KPI Headers

The generic card provides a dynamic section that can display in the header a key performance indicator (KPI), and related information. The KPI is an aggregated value, as defined in the annotation file. To display a KPI header in a card, make sure that your OData service supports aggregation of values. The KPI can display the following:
  • Title
  • KPI value, including its unit of measure, its trend and percentage of change
  • A list of the fields used to generate the aggregated value
  • The filters that were applied to the KPI
The KPI extension uses the following annotation terms:
  • com.sap.vocabularies.UI.v1.DataPoint: Is used to retrieve information about the title and the value of the KPI.
  • com.sap.vocabularies.UI.v1.PresentationVariant: Is used to retrieve information about the fields by which to group, and sorting information.
  • com.sap.vocabularies.UI.v1.SelectionVariant: Is used to retrieve information about the filters.
Note For more information about these annotations, see Annotations Used in Overview Pages.
These annotation terms can be configured in the application manifest file, as shown in the following example:
Sample Code
"sap.ovp": {
    ...
    "cards": {
        ...
        "card02": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.charts.bubble",
            "settings": {
                "entitySet": "SalesOrders",
                "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#bubble",
                "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"
            }
        },
        ...
    }
}
Card Footer

Cards can have two kinds of footers: a count footer or an action footer.

  • Count footer: Displays how many records are being presented in the card out of the total existing records, according to the current filter. The count footer is used in table and list cards.
  • Action footer: Displays all of the defined actions that can be performed on a single record. The actions are retrieved from the com.sap.vocabularies.UI.v1.Identification term, which can be configured in the manifest file by setting the identificationAnnotationPath property with a qualifier, as shown in the example below. If the identificationAnnotationPath property is not configured, the com.sap.vocabularies.UI.v1.Identification term, without a qualifier, is used.
    Note The action footer is only used in quick view cards. For more information, see Quick View Cards.

Card Actions

There are two kinds of actions that you can display in the card footer: com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation or com.sap.vocabularies.UI.v1.DataFieldForAction from com.sap.vocabularies.UI.v1.Identification.

Depending on the number of assigned actions, they are displayed in the footer as follows:
  • If there is only one action, the button is aligned to the right of the footer area.
  • If there are two actions, such as OK and Cancel, they are presented according to their importance and order of entry. We recommend to provide the annotation in a such a way that the positive action is on the left and the negative action is on the right.
  • If there are more than two actions, an Actions button is displayed. Clicking the Actions button opens an ActionSheet control with all of the defined actions in the order that they appear in the metadata.
  • If no actions are assigned to the card, the footer area is not displayed.
Each OData action is translated into a request according to the annotation. Clicking an action invokes the OData service request. Complex actions open a dialog box with the action parameters or a confirmation message.
Sample Code
"sap.ovp": {
    ...
    "cards": {
        ...
        "card01": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.table",
            "settings": {
                ...
                "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#Qualifier1",
                ...
            }
        },
        ...
    }
}