我們在本地 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP UI5 使用 Smart Control 的一个具体例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。