在 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（分析） 和 Page（销售经理概览））。现在我被困在如何根据我拥有的数据绑定面板的内容。下面是我为实现第一级绑定而编写的代码。

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 参考：

A Form control arranges labels and fields (like input fields) into groups and rows. There are different ways to visualize forms for different screen sizes.

A Form is structured into FormContainers. Each FormContainer consists of FormElements. The FormElements consists of a label and the form fields. (...)

The Form (and its sub-controls) automatically add label and field assignment to enable screen reader support. It also adds keyboard support to navigate between the fields and groups inside the form.

与其他控件相比，Form 在 DOM 的基础上增加了更多的语义值，遵循 Fiori 设计准则，并提供不同类型的高度可定制的响应式布局。

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

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

Binding hierarchical data in sap.m.Panel

sapui5