我需要在我的UI5应用程序之一中创建概述页面(https://sapui5.hana.ondemand.com/#/topic/c64ef8c6c65d4effbfd512e9c9aa5044)。在浏览时,我发现概述页面由动态页面和Cards控件(https://experience.sap.com/fiori-design-web/overview-page/)组成。因此,我开始使用这些控件进行开发,并遇到了一种奇怪的情况。
当我用1张卡运行以下代码时,它起作用了。我可以看到卡上有一些数据。
<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>
我得到了结果
但是,当我运行下面的代码时,我看到了奇怪的卡表示形式。我只看到一张卡,而不是两张卡。在控制台中,我得到以下消息。
为基数为0..1的聚合定义了多个聚合
我从SAPUI5浏览的网页(https://sapui5.hana.ondemand.com/#/entity/sap.f.Card/sample/sap.f.sample.Card/code)中获取了示例,以查看没有2个图块时的外观考虑数据。
<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>
知道我在做什么错吗?请帮助。
sap.f.DynamicPage的content-Aggregation仅允许0..1控件。你想将2张卡添加到它导致错误。
只需将2张卡包装在中<HBox justifyContent="SpaceBetween">
,它就可以正常工作。