Layouts

Cards have responsive behavior and could be used in different layouts, homepages and dashboards.

Layout Requirements

The layout that the cards are placed in shouldn't limit their height growth, otherwise their content might be truncated. Use "min-height" or GridContainer's "minRows" options if a minimum height is needed in the layout.

Recommended Layouts

Although the cards can be placed in any container or layout control, we recommend sap.f.GridContainer as main layout container for cards.

sap.f.GridContainer is a layout container control used for aligning items with various sizes in a simple grid. It is usually used for a home page or a dashboard.

It represents a grid layout with specific row and column sizes, in which the items can take any number of rows and columns.

The number of columns and rows each item takes can be configured with the use of the sap.f.GridContainerItemLayoutData

Sample: sap.f.GridContainer

API Documentation: sap.f.GridContainer

Create a Dashboard

To create a home page or a dashboard, you can place your cards into the sap.f.GridContainer. You need to specify the number of columns, which the card will take. The card's height (number of rows) is automatically calculated, depending on the card content. An exception is the Analytical Card, where you can specify also the "minRows" property and the card will stretch to any given dimension. The sap.f.GridContainer will arrange the cards in the best possible way.

<mvc:View xmlns:w="sap.ui.integration.widgets" xmlns:f="sap.f">
	<f:GridContainer>
		<w:Card manifest="./manifest.json">
			<w:layoutData>
				<f:GridContainerItemLayoutData columns="4" />
			</w:layoutData>
		</w:Card>
		<w:Card manifest="./analyticalManifest.json">
			<w:layoutData>
				<f:GridContainerItemLayoutData columns="4" minRows="3" />
			</w:layoutData>
		</w:Card>
	</f:GridContainer>
</mvc:View>