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

Component lifecycle and API

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