Component Card
With this card type, card developers can display a whole UI5 Component as content for the card. The card itself will load the specified component and display it. This allows great flexibility and as such, the developer is responsible to follow the guidelines to achieve consistent user experience.
Usage
- Use this card type only if there is no other card type which can fulfill your requirements.
- The component in the card must be simple. The card should be used only to navigate to an application where the actual work can be done.
Component lifecycle and API
- Inside the Component.js file of your Component card, you can use the lifecycle method
onCardReady(oCard)
to access the card itself. Check this Advanced component example. - Inside
onCardReady(oCard)
you can access public methods of the card likeoCard.getParameters()
,oCard.getManifestEntry()
and others. Here is the Card API reference. - For working with SAP Cloud Platform Destinations, check the documentation about Destinations and also this Component Card Destinations Sample.
Properties
The Component Card allows configuration of the content.
Content properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
minHeight | sap.ui.core.CSSSize | No | Defines the minimum height of the content. | 1.29.0 | 1.85 |
Example
Create a card manifest and include the manifest for the component in the same file:
{ "sap.card": { "type": "Component", "header": { "title": "Buy bus ticket on-line", "subTitle": "Buy a single drive ticket for a date" } }, "sap.app": { "id": "sap.myapp.bookingComponent", "applicationVersion": { "version": "1.0.0" } }, "sap.ui5": { "rootView": { "viewName": "sap.myapp.bookingComponent.Main", "type": "XML", "async": true } } }
Create the view to display the card:
<mvc:View xmlns:w="sap.ui.integration.widgets"> <w:Card manifest="./manifest.json" width="400px" height="auto" /> </mvc:View>Try it Out