Component Card

With this card type, card developers can display a whole UI5 Component as content for the card. The card will load the specified component and display it in the card content area. 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 Card Declaration

Like cards, UI5 Components are also described by manifest file. When making a card, the same manifest is shared by the card and the component. The following mandatory properties has to be set on top of the component manifest:

• "sap.app/type" has to be set to "card"
• "sap.card/type" property has to be "Component"
• "sap.card/header" should be provided

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 like oCard.getParameters(), oCard.getManifestEntry() and others. Here is the Card API reference.
• For working with SAP BTP Destinations, check the documentation about Destinations and also this Component Card Destinations Sample.
• For requesting data, use the card method card.request(...). Check the Request Data example.

Properties

The Component Card allows configuration of the content.

Component Preload

For production environments all the resources of the card should be packed into one single file called Component-preload.js. For instructions how to build it read Component Preload.

Example

Create the manifest file. It is the same for the card and the component

{
	"sap.app": {
		"id": "my.component.sample.cardContent",
		"type": "card",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.card": {
		"type": "Component",
		"header": {
			"title": "Visit our workshop"
		}
	},
	"sap.ui5": {
		"rootView": {
			"viewName": "my.component.sample.cardContent.View",
			"type": "XML",
			"async": true,
			"id": "app"
		}
	}
}

Create the Component.js file

sap.ui.define([
	"sap/ui/core/UIComponent"
], function (UIComponent) {
	"use strict";

	return UIComponent.extend("my.component.sample.cardContent.Component");
});

Create the root view

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
	<Image src="..."></Image>
</mvc:View>

Display the card in your application:

<mvc:View xmlns:w="sap.ui.integration.widgets">
	<w:Card manifest="./manifest.json" width="400px" height="auto" />
</mvc:View>

Try it Out