Question

我是SAPUI5的新手，认为IconTabBar / IconTabFilter可以帮助我创建一个我正在创建的页面。我不确定我能做我想做的事情，但希望如此......

我有一个页面，其中包含按产品分组的用户表。

所以：客户XYZ

Product A
User 1
User 2

Product B
User 1

我想使用IconTabBar允许用户查看所有内容或仅查看特定产品（A或B）。我的问题是，可以动态创建IconBar和过滤吗？例如，每个客户不一定拥有多个产品。所以我希望能够从json调用中接收可能的产品，然后只显示返回产品的图标。

我的XML文件目前的布局如下（省略了一些代码以便于查看）：

<Shell>
   <Page title="{/columnValue} Details" showNavButton="true" navButtonPress="goBack">
    <ObjectHeader>
    </ObjectHeader>
        <IconTabBar>
             <items>
                  <IconTabFilter showAll="true" count="{/custData/cust/prodcnt}" text="Products" keys="All">
                         <Table inset="false" items="{ path:'/columnData', sorter: {        path: 'productName', descending: false, group: true } }">
                            <columns> 
                                      //column headings definition is here             
                            </columns>
                            <items>
                                  /// column values defined
                            </items>
                         </Table>
                 </IconTabFilter>
             </items>
      </IconTabBar>
  </Page>
</Shell>

在＆＃39; custdata＆＃39;我有（如图所示）产品数量（客户有多少），产品存储在custdata / prod（数组）中。所以我想为产品的标签/过滤器创建单独的图标。我可以添加它们，以便在显示页面时动态创建它们（因为每个客户可能比其他客户更多或更少）？我看到的例子似乎是硬编码可能的标签/过滤器所以我不知道是否有可能做我想做的事情。我希望如此，因为它会对我有所帮助。

Answer 1

我认为应该可以这样做。

items-aggregation必须绑定到模型的数据，然后才能进行调整。

这是一个例子：

var model = new sap.ui.model.json.JSONModel();
model.setData(
{
    filter: [
        { icon: "sap-icon://hint", text: 'hint'},
        { icon: "sap-icon://comment", text: 'comment'},
        { icon: "sap-icon://attachment", text: 'attachment'},
        { icon: "sap-icon://history", text: 'history'},
    ]
});

var iconTabBar = new sap.m.IconTabBar("iconTabBar", {
    expandable: true,
    expanded :true,
});

iconTabBar.setModel(model, "itbModel"); 
iconTabBar.bindAggregation("items", "itbModel>/filter", new sap.m.IconTabFilter({icon: "{itbModel>icon}", text:"{itbModel>text}"}));

这对你有帮助吗？

SAPUI5 IconTabBar / IconTabFilter动态构建

1 个答案: