SAP UI5 使用 Smart Control 的一個具體例子

我們在本地 Visual Studio Code 裡, 按照下面兩篇文章，完成了 SAP UI5 的應用開發，

使用 yo 指令行向導建立 SAP UI5 應用

使用 yo 指令行向導給 SAP UI5 應用添加一個新的視圖

最後能得到一個清單，效果如下：

本文我們使用 SAP UI5 提供的 Smart 控件來繼續豐富這個應用。

從下面三個 namespace 引入 Smart 控件：

xmlns:smartFilterBar=“sap.ui.comp.smartfilterbar”

xmlns:smartList=“sap.ui.comp.smartlist”

xmlns:smartTable=“sap.ui.comp.smarttable”

xml view 的實作源代碼:

<mvc:View controllerName="tutorial.products.controller.Products" displayBlock="true"
xmlns="sap.m"
xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
xmlns:smartList="sap.ui.comp.smartlist"
xmlns:smartTable="sap.ui.comp.smarttable"
xmlns:mvc="sap.ui.core.mvc">
<Page id="Products">
  <smartFilterBar:SmartFilterBar id="smartFilterBar" persistencyKey="UniqueAndStablePersistencyKey" entitySet="Products" considerSelectionVariants="true" />
  <smartList:SmartList id="smartProductList" smartFilter="smartFilterBar" entitySet="Products" expandFields="Category" header="Products List" showRowCount="true" showFullScreenButton="true" enableAutoBinding="true">
    <smartList:listItemTemplate>
      <StandardListItem id="listTemplate" type="Navigation" press="handleListItemPress" title="{ProductName}" info="{= ${UnitPrice} + ' €' }" description="{Category/CategoryName}" />
    </smartList:listItemTemplate>
  </smartList:SmartList>
</Page>
</mvc:View>      

npm run start 啟動工

程，最後看到的 Smart List：

Smart Filter 控件提供的開箱即用的功能：