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": [{}]
  }]
}

如上图所示，我无法将上面的数据与控件绑定在一起。
我已经达到了第一级的绑定，因为我得到了两个面板（ Page（分析）和 Page（Sales Manager概述））。现在，我坚持如何将面板的内容与我拥有的数据绑定在一起。下面是我为实现第一级绑定而编写的代码。

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"
  content="{/Pages}"
>
  <Panel
    expandable="true"
    expanded="true"
    headerText="{name}"
  >
    <form:Form editable="true" formContainers="{
      path: 'widgetList',
      templateShareable: false
    }">
      <form:FormContainer title="{name}" formElements="{
        path: 'infoList',
        templateShareable: false
      }">
        <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由 label 和 form字段组成。（...）

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

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

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

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

2 个答案: