I got a requirement to create overview page (https://sapui5.hana.ondemand.com/#/topic/c64ef8c6c65d4effbfd512e9c9aa5044) in one of my UI5 application. While exploring I found out that overview page consist of Dynamic page and Cards controls (https://experience.sap.com/fiori-design-web/overview-page/). So I started development with those controls and encounter one strange scenario.
When I run below code with 1 card, it worked. I can see card with some data.
<mvc:View
controllerName="xx.view.controller.Overview"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.m.semantic"
xmlns:commons="sap.suite.ui.commons"
xmlns:core="sap.ui.core"
xmlns:f="sap.f"
xmlns:card="sap.f.cards"
xmlns:form="sap.ui.layout.form"
xmlns:l="sap.ui.layout"
xmlns:table="sap.ui.table">
<f:DynamicPage
toggleHeaderOnTitleClick="false"
class="sapUiNoContentPadding">
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title text="{i18n>title.page}"/>
</f:heading>
<f:actions>
<OverflowToolbarButton
id="idRefreshBtn"
type="Transparent"
icon="sap-icon://refresh"
press="handleRefresh"
tooltip="{i18n>tooltip.refresh}" />
<OverflowToolbarButton
id="idFullScreenBtn"
type="Transparent"
icon="sap-icon://full-screen"
press="handleFullScreen"
tooltip="{i18n>tooltip.fullScreen}" />
<OverflowToolbarButton
id="idExitFullScreenBtn"
type="Transparent"
icon="sap-icon://exit-full-screen"
press="handleExitFullScreen"
tooltip="{i18n>tooltip.exitFullScreen}" />
<OverflowToolbarButton
id="idCloseScreenBtn"
type="Transparent"
icon="sap-icon://decline"
press="handleCloseScreen"
tooltip="{i18n>tooltip.exitFullScreen}" />
</f:actions>
</f:DynamicPageTitle>
</f:title>
<f:content>
<f:Card class="sapUiTinyMargin" width="300px">
<f:header>
<card:Header
title="{i18n>lbl.MyFavourites}" />
</f:header>
<f:content>
<List
growing="true"
growingThreshold="100"
growingScrollToLoad="false"
items="{baseModel>/aFavouritesList}">
<items>
<CustomListItem type="Navigation" press="fnNavDetails">
<HBox>
<core:Icon
src="{
path: 'baseModel>Type',
formatter: '.formatter.formatProcessIcons'
}"
class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"/>
<Text
text="{baseModel>Description}"
class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" />
</HBox>
</CustomListItem>
</items>
</List>
</f:content>
</f:Card>
</f:content>
</f:DynamicPage>
</mvc:View>
I got result
But when I run below code I see weird card representation. Instead of 2 cards I see only one card. In console I am getting below message.
multiple aggregates defined for aggregation with cardinality 0..1 error message
I took the example from SAPUI5 explored webpage (https://sapui5.hana.ondemand.com/#/entity/sap.f.Card/sample/sap.f.sample.Card/code) to see how 2 tile look without considering data.
<f:Card class="sapUiMediumMargin" width="300px">
<f:header>
<card:Header
title="Buy bus ticket on-line"
subtitle="Buy a single-ride ticket for a date"
iconSrc="sap-icon://bus-public-transport" />
</f:header>
<f:content>
<VBox
height="110px"
class="sapUiSmallMargin"
justifyContent="SpaceBetween">
<HBox justifyContent="SpaceBetween">
<ComboBox
width="120px"
placeholder="From City"
items="{
path: 'cities>/cities',
sorter: { path: 'text' }
}">
<core:Item key="{cities>key}" text="{cities>text}" />
</ComboBox>
<ComboBox
width="120px"
placeholder="To City"
items="{
path: 'cities>/cities',
sorter: { path: 'text' }
}">
<core:Item key="{cities>key}" text="{cities>text}" />
</ComboBox>
</HBox>
<HBox renderType="Bare" justifyContent="SpaceBetween">
<DatePicker width="200px" placeholder="Choose Date ..." />
<Button
text="Book"
press=".onBookPress"
type="Emphasized"
class="sapUiTinyMarginBegin" />
</HBox>
</VBox>
</f:content>
</f:Card>
<f:Card class="sapUiMediumMargin" width="300px">
<f:header>
<card:Header title="Project Cloud Transformation" subtitle="Revenue per Product | EUR" />
</f:header>
<f:content>
<List
showSeparators="None"
items="{
path: 'products>/productItems'
}">
<CustomListItem>
<HBox alignItems="Center" justifyContent="SpaceBetween">
<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" >
<Title level="H3" text="{products>title}" />
<Text text="{products>subtitle}" />
</VBox>
<ObjectStatus
class="sapUiTinyMargin sapUiSmallMarginEnd"
text="{products>revenue}"
state="{products>statusSchema}" />
</HBox>
</CustomListItem>
</List>
</f:content>
</f:Card>
Any idea what am I doing wrong ? kindly help.
The content-Aggregation of the sap.f.DynamicPage only allows 0..1 controls. You are trying to add 2 cards to it resulting in the error.
Just wrap the 2 cards in a <HBox justifyContent="SpaceBetween">
and it should work.