通过 XML 视图动态渲染卡片

Question

有没有办法用 XML 视图动态呈现 sap.f.Card 控件？也许是聚合绑定？到目前为止，我只对列表和表格使用聚合绑定...

我需要在主视图上动态呈现一些卡片，但我想保留 MVC 概念。这就是为什么我不喜欢在控制器中渲染卡片。 My Card 也很复杂，里面有多个控件。（文本、状态指示器、进度指示器等）

有实现的方法吗？

Answer 1

您可以使用 Grid layout 和 content 聚合

来实现它

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);
},

输出

Answer 2

在 Fiori 中，卡片通常在 sap.f.GridContainer (In fact, it was initially called sap.f.<strong>Card</strong>Container) 内呈现。

就像表格和列表一样，您也可以使用卡片作为模板控件将 <items> 绑定到 GridContainer：

<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>

以上代码段来自具有聚合绑定的 Demo Kit sample。

通过 XML 视图动态渲染卡片

Render Cards dynamically via XML view

sapui5