You can generate integration and adaptive cards in SAP Fiori elements.
For information about SAP Fiori elements for OData V4, see Using the Application Preview Generator.
You can use cards to provide a preview of the data of the object page. Cards can be shared using SAP Collaboration Manager, Microsoft Teams, or any other platform where the integration card or the adaptive card can be hosted.
Application preview cards can only be generated for object pages.
The application preview generator is only available for ABAP-based projects.
The integration card is displayed by default on the UI, but the adaptive card is always generated at the same time, and you can choose to display it instead.
To use the application preview generator, the following requirements must be met:
-
You must have cloned your project in SAP Business Application Studio.
-
After cloning the project, you must ensure that it is compatible with UI5 CLI v3. If it is not, you must migrate it so that it can work within SAP Business Application Studio.
-
For more information about UI5 CLI v3, see Migrate to v3.
-
For more information about migrating your project, see Migrate SAP Fiori projects from SAP Web IDE to SAP Business Application Studio.
-
Ensure that you are using the latest version of SAP UI5. To do that, open the ui5.yaml file and ensure that the url is set to https://ui5.sap.com.
specVersion: "3.1"
metadata:
name: sales-order.wd.sample
type: application
resources:
configuration:
paths:
webapp: webapp
server:
customMiddleware:
- name: fiori-tools-proxy
afterMiddleware: compression
configuration:
ignoreCertError: false
ui5:
path:
- /resources
- /test-resources
url: https://ui5.sap.com
- name: sap-fe-mockserver
mountPath: /
afterMiddleware: compression
configuration:
annotations:
- localPath: './mockserver/sap/opu/odata/sap/salesorder/annotations.xml'
urlPath: '/sap/opu/odata/sap/salesorder;v=2/Annotations*'
services:
- urlPath: '/sap/opu/odata/sap/salesorder'
metadataPath: './mockserver/sap/opu/odata/sap/salesorder/metadata.xml'
mockdataPath: './mockserver/sap/opu/odata/sap/salesorder/data/'Next, open a new terminal at a desired project location and run one of the following commands:
-
npx @sap-ux/create@latest add cards-editor -
npm init @sap-ux@latest add cards-editor
After enabling the application preview generator as described, launch the project by using the npm run start-cards-generator command.
If the landing page of the application is a list report page, use the necessary filters or search to navigate to the object page for which the card will be created. After the object page is launched, open the user menu and choose Generate Card.
The following dialog appears:
Enter the data for the relevant fields in the dialog. For more information about the supported features, see the Features of the Card Generator Dialog section in this topic.
A live preview of the integration card and its corresponding adaptive card is displayed on the right side, as shown in the following screenshots:
Preview of the Integration Card
Preview of the Adaptive Card
When you have created the desired application preview, choose Save to make the cards available within the application repository.
A new cards folder is created under webapp.
The manifest.json file is automatically updated with a new sap.cards.ap section that links the cards with the cards folder.
"sap.cards.ap": {
"embeds": {
"ObjectPage": {
"default": "C_STTA_SalesOrder_WD_20",
"manifests": {
"C_STTA_SalesOrder_WD_20": [
{
"localUri": "cards/op/C_STTA_SalesOrder_WD_20"
}
]
}
}
}
}If you repeat the card generation process, the previously generated card is overwritten with the latest version.
After adding the cards, you must update the project repository. To do that, merge all the changed files of the project in the repository.
You can use the following features of the card generator dialog:
Features of the Card Generator Dialog
|
Label |
Description |
Screenshot |
|---|---|---|
|
Card Header |
You can add a title, a subtitle, and a main indicator as part of the card header. |
Card Header
|
|
Card Content |
You can add properties to groups, change labels, and format the properties to be displayed in the card content. |
Card Content
|
|
Card Actions |
You can add import-based actions as footer actions of the adaptive card. The recipient of the card can execute these actions from within the Microsoft Teams chat. |
Card Actions
|
|
Advanced Panel |
You can apply criticality assignments, units of measure, and text arrangements to properties. The options configured in this panel apply to the specified properties wherever they are used in the card. |
Advanced Panel
|
|
(More) |
You can apply additional options to any property that has this control displayed next to it. The following additional options are available:
|
Additional Options
Apply Units of Measure
Apply Formatter: Date Type
Apply Formatter: Number Type
Apply Criticality
Apply Trend
Apply Indicators
|
