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.
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",
...
}
},
...
}
}