我們在本地 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 控制元件提供的開箱即用的功能：
更多Jerry的原創文章，盡在："汪子熙":
