在sap.m.Panel中绑定分层数据

Question

我希望实现这样的目标。

我已经为上面的结构创建了JSON数据，如下所示。

this.oPagePanelModelData = {
  "Pages": [{
    "name": "Page (Analysis)",
    "widgetList": [{
      "name": "Widget 1",
      "infoList": [{
        "label": "title",
        "labelFor": "Title for chart 1"
      }, {
        "label": "description",
        "labelFor": "Description for chart 1"
      }]
    }, {
      "name": "Widget 2",
      "infoList": [{
        "label": "title",
        "labelFor": "Title for chart 2"
      }, {
        "label": "description",
        "labelFor": "Description for chart 2"
      }, {
        "label": "header2",
        "labelFor": "Header for Chart 2"
      }]
    }]
  }, {
    "name": "Page (Sales Manager Overview)",
    "widgetList": [{}]
  }]
}

我面临着将上述数据与控件绑定的问题，如上图所示。 我已经实现了第一级绑定，因为我得到了2个面板（Page（Analysis）和Page（Sales Manager Overview））。现在我不知道如何根据我拥有的数据绑定面板的内容。下面是我为实现第一级绑定而编写的代码。

this.oPagePanelModel = new JSONModel(); // "sap/ui/model/json/JSONModel"
this.oPagePanelModel.setData(this.oPagePanelModelData);
this.oLayoutForPagePanels = new VerticalLayout(); // "sap/ui/layout/VerticalLayout"
this.oLayoutForPagePanels.setModel(this.oPagePanelModel);
this.oLayoutForPagePanels.bindAggregation("content", {
  path: "/Pages",
  template: this.oPagePanel
});
this.oPagePanel = new Panel({ // "sap/m/Panel"
  expandable: true,
  headerText: "{name}"
});

现在在Panel的内容中，我需要将结构作为图像。我是SAPUI5的新手。在我的脑海里，如何实现这一目标似乎有点混乱。如何将Panel的内容与其他控件绑定？

Answer 1

您可以使用以下代码实现它：

<VBox items="{path:'panelModel>/Pages', templateShareable: true}" >
<Panel expandable="true" expanded="false" headerText="{panelModel>name}" width="auto" class="sapUiResponsiveMargin">
    <content>
        <VBox items="{path:'panelModel>widgetList', templateShareable: true}">
            <items>
                <VBox>
                    <Label text="{panelModel>name1}" design="Bold" class="sapUiTinyMargin"/>
                    <VBox items="{path:'panelModel>infoList', templateShareable: true}">
                        <items>
                            <VBox>
                                <Label  text="{panelModel>label}"/>
                                <Input value="{panelModel>labelFor}" />
                            </VBox>
                        </items>
                    </VBox>
                </VBox>
            </items>
        </VBox>
    </content>
</Panel>

输出：

Answer 2

对于sap.ui.layout.form.Form来说，这似乎是一个完美的用例场景。以下是此示例的片段：https://embed.plnkr.co/nLXEkzbitSP38GtF/

<Page xmlns="sap.m" xmlns:form="sap.ui.layout.form"
  title="Hierarchical Form Binding in Panel"
  class="sapUiResponsiveContentPadding"
  content="{
    path: '/Pages',
    templateShareable: false,
    key: 'name'
  }"
>
  <Panel
    expandable="true"
    expanded="true"
    headerText="{name}"
  >
    <form:Form editable="true" formContainers="{
      path: 'widgetList',
      templateShareable: true
    }">
      <form:FormContainer title="{name}" formElements="{
        path: 'infoList',
        templateShareable: true
      }">
        <form:FormElement label="{label}">
          <Input placeholder="{labelFor}" />
        </form:FormElement>
      </form:FormContainer>
      <form:layout>
        <form:ColumnLayout />
      </form:layout>
    </form:Form>
  </Panel>
</Page>

截图肖像

截图景观

来自API参考：

Form控件将标签和字段（如输入字段）排列成组和行。有不同的方法可视化不同屏幕尺寸的表单。

Form被构造成FormContainers。每个FormContainer由FormElements组成。 FormElements由标签和表单字段组成。 （......）

Form（及其子控件）自动添加标签和字段分配以启用屏幕阅读器支持。它还添加了键盘支持，以在表单内的字段和组之间导航。

与其他控件相比，Form为DOM添加了更多语义值，遵循Fiori Design指南，并提供了不同类型的高度可定制的响应布局。

---

关于templateShareable，请参阅文档主题Lifecycle of Binding Templates。