Render Cards dynamically via XML view - sapui5

Question

Is there a way to render the sap.f.Card control dynamically with an XML view? With aggregation binding maybe? I only used aggregation binding with lists and tables so far...
I need to render some cards dynamically on a main view but I want to stay with the MVC concept. That's why I don't prefer to render the cards in the controller. My Card is also very complex and has multiple controls in it. (Text, Status Indicator, Progress Indicator, etc.)
Is there a way of implementing that?

Answer 1

In Fiori, Cards are usually rendered within sap.f.GridContainer (In fact, it was initially called sap.f.CardContainer).
Just like with Tables and Lists, you can bind <items> to the GridContainer too with the Card as a template control:
<f:GridContainer xmlns:f="sap.f"
width="100%"
snapToRow="true"
items="{
path: '/myCardItems',
templateShareable: false
}">
<f:layout>
<f:GridContainerSettings rowSize="84px" columnSize="84px" gap="8px" />
</f:layout>
<f:layoutXS>
<f:GridContainerSettings rowSize="70px" columnSize="70px" gap="8px" />
</f:layoutXS>
<f:items>
<f:Card> <!-- template -->
<f:header>
<card:Header xmlns:card="sap.f.cards" title="{title}" />
</f:header>
<f:layoutData>
<f:GridContainerItemLayoutData minRows="..." columns="..." />
</f:layoutData>
</f:Card>
</f:items>
</f:GridContainer>
The above snippet is from the Demo Kit sample that has an aggregation binding.

Answer 2

You can achieve it using the Grid layout withcontent aggregation
view.xml
<core:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:fc="sap.f"
xmlns:card="sap.f.cards"
controllerName="path.Main"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Main" class="sapUiContentPadding">
<content>
<!-- Cards data binding -->
<l:Grid containerQuery="true" id="cardsGrid" defaultSpan="XL2 L4" class="gridProgressIndicator" hSpacing="0" content="{/cards}">
<fc:Card class="sapUiMediumMargin" width="300px">
<fc:header>
<card:Header
title="{title}"
subtitle="{subTitle}"
iconSrc="{icon}"/>
</fc:header>
<fc:content>
<VBox
height="115px"
class="sapUiSmallMargin"
justifyContent="SpaceBetween">
<HBox justifyContent="SpaceBetween">
<ComboBox
width="120px"
placeholder="To City"
items="{items}">
<core:Item key="{key}" text="{text}" />
</ComboBox>
<ComboBox
width="120px"
placeholder="To City"
items="{items}">
<core:Item key="{key}" text="{text}" />
</ComboBox>
</HBox>
<HBox justifyContent="SpaceBetween">
<DatePicker width="186px" placeholder="Choose Date ..."/>
<Button text="Book" press="onBookPress" type="Emphasized" />
</HBox>
</VBox>
</fc:content>
</fc:Card>
</l:Grid>
</content>
</Page>
</core:View>
controller.js
bindCardsGrid: function() {
var rowData = [
{ "title": "Title 1", "subTitle": "SubTitle 1", "icon": "sap-icon://menu2", "items": [{ "key": "CV1", "text": "CV1"}, { "key": "CV2", "text": "CV2"}, { "key": "CV3", "text": "CV3"},{ "key": "CV4", "text": "CV4"}]},
{ "title": "Title 2", "subTitle": "SubTitle 2", "icon": "sap-icon://add-contact", "items": [{ "key": "CV1", "text": "CV1"}, { "key": "CV2", "text": "CV2"}, { "key": "CV3", "text": "CV3"},{ "key": "CV4", "text": "CV4"}]},
{ "title": "Title 3", "subTitle": "SubTitle 3", "icon": "sap-icon://business-objects-experience", "items": [{ "key": "CV1", "text": "CV1"}, { "key": "CV2", "text": "CV2"}, { "key": "CV3", "text": "CV3"},{ "key": "CV4", "text": "CV4"}]},
{ "title": "Title 4", "subTitle": "SubTitle 4", "icon": "sap-icon://process", "items": [{ "key": "CV1", "text": "CV1"}, { "key": "CV2", "text": "CV2"}, { "key": "CV3", "text": "CV3"},{ "key": "CV4", "text": "CV4"}]}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ "cards": rowData });
this.getView().setModel(oModel);
},
output