SAPUI5：sap.f.card 为基数为 0..1 的聚合定义的多个聚合存在问题

Question

我需要创建概览页面 (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/)。所以我开始使用这些控件进行开发并遇到一个奇怪的场景。

当我运行下面的代码使用 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>

我得到了结果

但是当我运行下面的代码时，我看到了奇怪的卡片表示。我只看到一张卡片，而不是两张卡片。在控制台中，我收到以下消息。

multiple aggregates defined for aggregation with cardinality 0..1 error message

我从 SAPUI5 explored 网页 (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>

知道我做错了什么吗？请帮忙。

Answer 1

content-Aggregation of the sap.f.DynamicPage 只允许 0..1 控件。您正在尝试向其中添加 2 张卡，导致错误。

只需将 2 张卡片包裹在一个 <HBox justifyContent="SpaceBetween"> 中即可。

SAPUI5：sap.f.card 为基数为 0..1 的聚合定义的多个聚合存在问题

SAPUI5: Issue with sap.f.card multiple aggregates defined for aggregation with cardinality 0..1

sapui5