# [一套適合 SAP UI5 初學者循序漸進的學習教程](https://blog.csdn.net/i042416/category_11395500.html)

## 作者簡介

Jerry Wang，2007 年從電子科技大學計算機專業碩士畢業後加入 SAP 成都研究院工作至今。Jerry 是 SAP 社群導師，SAP 中國技術大使。在長達 15 年的 SAP 標準產品開發生涯裡，Jerry 曾經先後參與 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(電商雲)等標準產品的研發工作。

Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 進行開發, 對包括 SAP UI5 在內的多款 SAP 自研框架有深入的研究。

## 教程目錄

* [SAP UI5 本地開發環境的搭建](https://jerry.blog.csdn.net/article/details/120611706)

* [SAP UI5 應用開發教程之一：Hello World](https://jerry.blog.csdn.net/article/details/120612455)

* [SAP UI5 應用開發教程之二：SAP UI5 的引導過程 Bootstrap](https://jerry.blog.csdn.net/article/details/120614665)

* [SAP UI5 應用開發教程之三：開始接觸第一個 SAP UI5 控制元件](https://jerry.blog.csdn.net/article/details/120619615)

* [SAP UI5 應用開發教程之四：XML 檢視初探](https://jerry.blog.csdn.net/article/details/120642096)

* [SAP UI5 應用開發教程之五：檢視控制器初探](https://jerry.blog.csdn.net/article/details/120669241)

* [SAP UI5 應用開發教程之六 - 瞭解 SAP UI5 的模組(Module)概念](https://jerry.blog.csdn.net/article/details/120680451)

* [SAP UI5 應用開發教程之七 - JSON 模型初探](https://jerry.blog.csdn.net/article/details/120693394)

* [SAP UI5 應用開發教程之八 - 多語言的支援](https://jerry.blog.csdn.net/article/details/121039416)

* [SAP UI5 應用開發教程之九 - 建立第一個 Component](https://jerry.blog.csdn.net/article/details/121042479)

* [SAP UI5 應用開發教程之十 - 什麼是 SAP UI5 應用的描述符 Descriptor](https://jerry.blog.csdn.net/article/details/121049973)

* [SAP UI5 應用開發教程之十一 ：SAP UI5 容器類控制元件 Page 和 Panel](https://jerry.blog.csdn.net/article/details/121060759)

* [SAP UI5 應用開發教程之十二 - 使用 CSS 類對 UI 進行進一步美化](https://jerry.blog.csdn.net/article/details/121063066)

* [SAP UI5 應用開發教程之十三 - 如何新增自定義 CSS 類](https://jerry.blog.csdn.net/article/details/121180115)

* [SAP UI5 應用開發教程之十四 - 嵌入檢視的使用方式](https://jerry.blog.csdn.net/article/details/122420230)

* [SAP UI5 應用開發教程之十五 - 對話方塊和 Fragments 的使用方式](https://blog.csdn.net/i042416/article/details/122450382)

* [SAP UI5 應用開發教程之十六 - 圖示 icon 的使用](https://jerry.blog.csdn.net/article/details/122453835)

* [SAP UI5 應用開發教程之十七 - 聚合繫結在 UI5 複合控制元件中的使用](https://blog.csdn.net/i042416/article/details/122458023)

* [SAP UI5 應用開發教程之十八 - SAP UI5 資料繫結語法裡的特殊符號，以及絕對繫結和相對繫結概念詳解](https://jerry.blog.csdn.net/article/details/122691944)

* [SAP UI5 應用開發教程之十九 - SAP UI5 資料型別和複雜的資料繫結](https://jerry.blog.csdn.net/article/details/122709248)

* [SAP UI5 應用開發教程之二十 - SAP UI5 的表示式繫結用法講解](https://jerry.blog.csdn.net/article/details/122719005)

* [SAP UI5 應用開發教程之二十一 - SAP UI5 的自定義格式器 Custom Formatter](https://jerry.blog.csdn.net/article/details/122727543)

* [SAP UI5 應用開發教程之二十二 - 過濾器 filter 的開發和使用](https://jerry.blog.csdn.net/article/details/122733097)

* [SAP UI5 應用開發教程之二十三 - 列表控制元件的排序 Sort 和分組 Group](https://jerry.blog.csdn.net/article/details/122736505)

* [SAP UI5 應用開發教程之二十四 - 如何使用 OData 資料模型](https://jerry.blog.csdn.net/article/details/122750501)

* [SAP UI5 應用開發教程之二十五 - 使用代理伺服器解決 SAP UI5 應用訪問遠端 OData 服務的跨域問題](https://jerry.blog.csdn.net/article/details/122766435)

* [SAP UI5 應用開發教程之二十六 - OData 服務配合 Mock 伺服器的使用步驟詳解](https://jerry.blog.csdn.net/article/details/122770273)

* [SAP UI5 應用開發教程之二十七 - SAP UI5 應用的單元測試工具 QUnit 介紹](https://jerry.blog.csdn.net/article/details/122774349)

* [SAP UI5 應用開發教程之二十八 - SAP UI5 應用的整合測試工具 OPA 介紹](https://jerry.blog.csdn.net/article/details/122777665)

* [SAP UI5 應用開發教程之二十九 - SAP UI5 的路由和導航功能介紹](https://jerry.blog.csdn.net/article/details/122782266)

* [SAP UI5 應用開發教程之三十 - SAP UI5 的路由過程中進行引數傳遞](https://jerry.blog.csdn.net/article/details/122782834)

* [SAP UI5 應用開發教程之三十一 - SAP UI5 的路由歷史和路由回退(Routing back and history)](https://jerry.blog.csdn.net/article/details/122784284)

* [SAP UI5 應用開發教程之三十二 - 如何建立一個自定義 SAP UI5 控制元件](https://jerry.blog.csdn.net/article/details/122789898)

* [SAP UI5 應用開發教程之三十三 - SAP UI5 應用的響應式佈局特性(Responsiveness)](https://jerry.blog.csdn.net/article/details/122792549)

* [SAP UI5 應用開發教程之三十四 - SAP UI5 應用基於裝置型別的頁面適配功能(Device Adaptation)](https://jerry.blog.csdn.net/article/details/122799506)

* [SAP UI5 應用開發教程之三十五 - 如何把本地開發的 SAP UI5 應用部署到 ABAP 伺服器上](https://jerry.blog.csdn.net/article/details/122828129)

* [SAP UI5 應用開發教程之三十六 - 使用 Chrome 開發者工具 Elements 標籤動態修改 CSS 類](https://jerry.blog.csdn.net/article/details/122973315)

* [SAP UI5 應用開發教程之三十七 - 使用 Chrome 開發者工具 Console 皮膚進行元素審查](https://blog.csdn.net/i042416/article/details/122997824)

* [SAP UI5 應用開發教程之三十八 - 使用 Chrome 開發者工具檢視程式執行出錯時的上下文資訊](https://jerry.blog.csdn.net/article/details/122999869)

* [SAP UI5 應用開發教程之三十九 - SAP UI5 應用出現白屏的一些常見錯誤和分析方法分享](https://jerry.blog.csdn.net/article/details/123024694)

* [SAP UI5 應用開發教程之四十 - 如何製作包含了 component-preload.js 在內的 SAP UI5 釋出版本](https://jerry.blog.csdn.net/article/details/123071595)

* [SAP UI5 應用開發教程之四十一 - Chrome 擴充套件 UI5 Inspector 的離線安裝和使用方法](https://jerry.blog.csdn.net/article/details/123077473)

* [SAP UI5 應用開發教程之四十二 - SAP UI5 自帶的 Diagnostics 診斷工具使用方法介紹](https://jerry.blog.csdn.net/article/details/123094151)

* [SAP UI5 應用開發教程之四十三 - SAP UI5 自帶的 Support Assistant 工具使用方法介紹](https://jerry.blog.csdn.net/article/details/123101329)

* [SAP UI5 應用開發教程之四十四 - Label 和 Input 控制元件文字沒有水平對齊的原因分析和解決方案](https://blog.csdn.net/i042416/article/details/123122839)

* [SAP UI5 應用開發教程之四十五 - 如何在 SAP UI5 應用裡使用 jQuery 和原生的 DOM API](https://jerry.blog.csdn.net/article/details/123136635)

* [SAP UI5 應用開發教程之四十六 - 使用 Message Manager 實現開箱即用的驗證(Validation)資訊丟擲](https://jerry.blog.csdn.net/article/details/123142913)

* [SAP UI5 應用開發教程之四十七 - 如何自定義 SAP UI5 字串型別輸入欄位的校驗邏輯](https://jerry.blog.csdn.net/article/details/123410743)

* [SAP UI5 應用開發教程之四十八 - 如何在 SAP UI5 應用裡開發條形碼掃描功能](https://jerry.blog.csdn.net/article/details/123420376)

* [SAP UI5 應用開發教程之四十九 - 如何在桌面電腦端除錯執行在手機上的 SAP UI5 應用](https://jerry.blog.csdn.net/article/details/123433404)

* [SAP UI5 應用開發教程之五十 - 如何使用 Cordova 將 SAP UI5 應用生成一個能在 Android 手機上安裝的混合應用](https://jerry.blog.csdn.net/article/details/123475735)

* [SAP UI5 應用開發教程之五十一 - 如何使用 Chrome 除錯執行在手機上的 SAP UI5 Cordova 混合應用](https://jerry.blog.csdn.net/article/details/123489082)

* [SAP UI5 應用開發教程之五十二 - 如何使用 SAP UI5 的標準控制元件結合 Cordova 外掛呼叫手機攝像頭進行條形碼掃描](https://blog.csdn.net/i042416/article/details/123501147)

* [SAP UI5 應用開發教程之五十三 - 如何自定義 SAP UI5 資料型別(Data Type)](https://jerry.blog.csdn.net/article/details/123684449)

* [SAP UI5 應用開發教程之五十四 - 如何將本地 SAP UI5 應用配置到本地 Fiori Launchpad 中](https://jerry.blog.csdn.net/article/details/123690190)

* [SAP UI5 應用開發教程之五十五 - 如何將本地 SAP UI5 應用透過 Node.js Express 部署到公網上](https://jerry.blog.csdn.net/article/details/123715732)

* [SAP UI5 應用開發教程之五十六 - SAP UI5 樹控制元件(tree)的開發](https://jerry.blog.csdn.net/article/details/123727571)

* [SAP UI5 應用開發教程之五十七 - 基於 OData 註解的 Smart Field 使用方法學習](https://jerry.blog.csdn.net/article/details/123739311)

* [SAP UI5 應用開發教程之五十八 - 使用工廠方法在執行時動態建立不同型別的列表行專案控制元件](https://blog.csdn.net/i042416/article/details/123886385)

* [SAP UI5 應用開發教程之五十九 - 如何在 SAP UI5 應用裡顯示世界地圖](https://blog.csdn.net/i042416/article/details/123899041)

* [SAP UI5 應用開發教程之六十 - SAP UI5 地圖控制元件的一些高階用法](https://jerry.blog.csdn.net/article/details/123905284)

* [SAP UI5 應用開發教程之六十一 - 在 SAP UI5 應用裡繪製甘特圖 Gantt Chart](https://jerry.blog.csdn.net/article/details/123918417)

* [SAP UI5 應用開發教程之六十二 - 基於 OData V4 的 SAP UI5 表格控制元件使用方法介紹](https://jerry.blog.csdn.net/article/details/123928235)

* [SAP UI5 應用開發教程之六十三 - 基於 OData V4 的本地 Mock Server 實現的深入介紹](https://jerry.blog.csdn.net/article/details/123932828)

* [SAP UI5 應用開發教程之六十四 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現 filter(過濾) 和 sort(排序)功能](https://jerry.blog.csdn.net/article/details/123946231)

* [SAP UI5 應用開發教程之六十五 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現建立，編輯和儲存功能](https://jerry.blog.csdn.net/article/details/123951024)

* [SAP UI5 應用開發教程之六十六 - 基於 OData V4 的 SAP UI5 表格控制元件如何實現刪除功能](https://blog.csdn.net/i042416/article/details/123965854)

* [SAP UI5 應用開發教程之六十七 - 基於 OData V4 的 SAP UI5 List-Detail(列表-明細)佈局的實現方式](https://jerry.blog.csdn.net/article/details/123969146)

* [SAP UI5 應用開發教程之六十八 - 如何實現 SAP UI5 路由失敗時顯示自定義的 NOT Found 頁面](https://jerry.blog.csdn.net/article/details/124155362)

* [SAP UI5 應用開發教程之六十九 - 如何從 SAP UI5 Not Found 頁面跳轉回到正常的應用頁面](https://jerry.blog.csdn.net/article/details/124171307)

* [SAP UI5 應用開發教程之七十 - 如何使用按鈕控制元件觸發頁面路由跳轉](https://blog.csdn.net/i042416/article/details/124318650)

* [SAP UI5 應用開發教程之七十一 - SAP UI5 頁面的巢狀路由](https://jerry.blog.csdn.net/article/details/124340688)

* [SAP UI5 應用開發教程之七十二 - SAP UI5 頁面路由的動畫效果設定](https://blog.csdn.net/i042416/article/details/124361471)

* [SAP UI5 應用開發教程之七十三 - 使用自定義 Query 實現 SAP UI5 頁面路由的書籤功能](https://blog.csdn.net/i042416/article/details/124372674)

* [SAP UI5 應用開發教程之七十四 - SAP UI5 應用使用 OData V4 顯示 Table 表格資料的一個陷阱](https://blog.csdn.net/i042416/article/details/124458638)

* [SAP UI5 應用開發教程之七十五 - 如何採用SAP UI5 主從表格的聯動技術顯示覆雜表格內容](https://blog.csdn.net/i042416/article/details/124501745)

* [SAP UI5 應用開發教程之七十六 - 如何實現 SAP UI5 的 Lazy Loading(延遲載入，懶載入)](https://blog.csdn.net/i042416/article/details/124545027)

* [SAP UI5 應用開發教程之七十七 - SAP UI5 動態頁面路由的高階用法：路由記錄 routes 和 target 的一對多關係](https://blog.csdn.net/i042416/article/details/124548400)

* [SAP UI5 應用開發教程之七十八 - 如何透過 url 保持 SAP UI5 搜尋的狀態，讓其支援書籤功能](https://blog.csdn.net/i042416/article/details/124554155)

* [SAP UI5 應用開發教程之七十九 - 採用測試驅動開發理念(Test Driven Development)進行 SAP UI5 應用的功能開發(一)](https://blog.csdn.net/i042416/article/details/124563162)

* [SAP UI5 應用開發教程之八十 - 採用測試驅動開發理念(Test Driven Development)進行 SAP UI5 應用的功能開發(二)](https://blog.csdn.net/i042416/article/details/124567472)

* [SAP UI5 應用開發教程之八十一 - 採用 OPA5 進行 SAP UI5 整合測試(Integration Test)的一個例子](https://blog.csdn.net/i042416/article/details/124584580)

* [SAP UI5 應用開發教程之八十二 - 採用 OPA5 開發支援頁面跳轉的 SAP UI5 整合測試用例](https://jerry.blog.csdn.net/article/details/124624593)

* [SAP UI5 應用開發教程之八十三 - SAP UI5 的自動化測試套件頁面的開發步驟介紹](https://blog.csdn.net/i042416/article/details/124643848)

* [SAP UI5 應用開發教程之八十四 - 如何指定 SAP UI5 應用程式基於某個特定的版本執行](https://blog.csdn.net/i042416/article/details/124698789)

* [SAP UI5 應用開發教程之八十五 - 如何用 OPA5 編寫測試用例來測試使用者輸入文字的功能](https://blog.csdn.net/i042416/article/details/124709547)

* [SAP UI5 應用開發教程之八十六 - 動手開發一個最簡單的本地 Mock 資料伺服器](https://jerry.blog.csdn.net/article/details/124715670)

* [SAP UI5 應用開發教程之八十七 - 如何讓 SAP UI5 Mock 伺服器支援自定義 url 引數](https://blog.csdn.net/i042416/article/details/124751818)

* [SAP UI5 應用開發教程之八十八 - SAP UI5 Mock 伺服器如何實現自定義 Function Import](https://blog.csdn.net/i042416/article/details/124765653)

* [SAP UI5 應用開發教程之八十九 - 如何給 SAP UI5 列表控制元件增添多個圖形介面的過濾器](https://blog.csdn.net/i042416/article/details/124789417)

* [SAP UI5 應用開發教程之九十 - 基於 OData V2 的 SAP UI5 List-Detail(列表-明細)佈局的實現方式](https://blog.csdn.net/i042416/article/details/124815531)

* [SAP UI5 應用開發教程之九十一 - 如何使用客戶端 JSON 模型構建一個 Master-Detail-Detail 佈局中的列表頁面](https://blog.csdn.net/i042416/article/details/124980062)

* [SAP UI5 應用開發教程之九十二 - 基於 SAP UI5 JSONModel 客戶端模型的列表分頁顯示(Table Pagination)前提](https://blog.csdn.net/i042416/article/details/124990504)

* [SAP UI5 應用開發教程之九十三 - 基於 JSONModel 資料模型的列表控制元件顯示資料的深入討論](https://blog.csdn.net/i042416/article/details/125011617)

* [SAP UI5 應用開發教程之九十四 - 基於 JSONModel 資料模型的 SAP UI5 列表控制元件分頁顯示資料的完整解決方案](https://blog.csdn.net/i042416/article/details/125031649)

* [SAP UI5 應用開發教程之九十五 - SAP UI5 下拉選單(Select) 控制元件的使用方式](https://jerry.blog.csdn.net/article/details/125044943)

* [SAP UI5 應用開發教程之九十六 - SAP UI5 列表控制元件分頁顯示資料時，如何自定義分頁大小](https://blog.csdn.net/i042416/article/details/125055559)

* [SAP UI5 應用開發教程之九十七 - 如何使用客戶端 JSON 模型構建一個 Master-Detail-Detail 佈局中的明細頁面](https://blog.csdn.net/i042416/article/details/125114902)

* [SAP UI5 應用開發教程之九十八 - 從 viewId 這個屬性談起，聊聊 SAP UI5 的 HTML 原始碼生成機制](https://blog.csdn.net/i042416/article/details/125119020)

* [SAP UI5 應用開發教程之九十九 - 深入探討 SAP UI5 本地開發環境裡的 package.json 和 ui5.yaml](https://blog.csdn.net/i042416/article/details/125353133)

* [SAP UI5 應用開發教程之一百 - 如何修改 SAP UI5 框架的原始碼實現，以及使用本地部署的 SAP UI5 SDK](https://blog.csdn.net/i042416/article/details/125356519)

* [SAP UI5 應用開發教程之一百零一 - SAP UI5 應用的 Locale 決定機制](https://jerry.blog.csdn.net/article/details/125381962)

* [SAP UI5 應用開發教程之一百零二 - SAP UI5 應用的列印(Print)功能實現詳解](https://blog.csdn.net/i042416/article/details/125411347)

* [SAP UI5 應用開發教程之一百零三 - 如何在 SAP UI5 應用中消費第三方庫](https://blog.csdn.net/i042416/article/details/125415071)

* [SAP UI5 應用開發教程之一百零四 - SAP UI5 表格控制元件的支援複選(Multi-Select)以及如何用程式碼一次選中多個表格行專案](https://blog.csdn.net/i042416/article/details/125564041)

* [SAP UI5 應用開發教程之一百零五 - SAP UI5 Master-Detail 佈局模式的聯動效果實現明細介紹](https://blog.csdn.net/i042416/article/details/125577667)

* [SAP UI5 應用開發教程之一百零六 - 如何提高 SAP UI5 應用路由 url 的可讀性](https://blog.csdn.net/i042416/article/details/125583012)

* [SAP UI5 應用開發教程之一百零七 - SAP UI5 OverflowToolbar 容器控制元件以及 resize 事件處理的一些細節介紹](https://jerry.blog.csdn.net/article/details/125609805)

* [SAP UI5 應用開發教程之一百零八 - SAP UI5 圖片顯示控制元件 Avatar 的使用方式介紹](https://jerry.blog.csdn.net/article/details/125759976)

* [SAP UI5 應用開發教程之一百零九 - 使用 SAP UI5 FileUploader 控制元件上傳本地檔案](https://blog.csdn.net/i042416/article/details/125979700)

* [SAP UI5 應用開發教程之一百一十 - SAP UI5 FileUploader 控制元件深入介紹 - 為什麼需要一個隱藏的 iframe](https://blog.csdn.net/i042416/article/details/126024207)

* [SAP UI5 應用開發教程之一百一十一 - SAP UI5 FileUploader 控制元件實現本地檔案上傳，接收伺服器端的響應時遇到跨域訪問錯誤](https://blog.csdn.net/i042416/article/details/126024207)

* [SAP UI5 應用開發教程之一百一十二 - 使用自開發的代理伺服器解決 SAP UI5 FileUploader 上傳檔案時遇到的跨域訪問錯誤](https://blog.csdn.net/i042416/article/details/126034853)

* [SAP UI5 應用開發教程之一百一十三 - 授人以漁 - 如何自行查詢任意 SAP UI5 控制元件屬性的文件和技術實現細節](https://blog.csdn.net/i042416/article/details/126147615)

* [SAP UI5 應用開發教程之一百一十四 - 如何透過單步除錯的方式找到引起 Fiori Launchpad 路由錯誤的原因](https://blog.csdn.net/i042416/article/details/126150529)

* [SAP UI5 應用開發教程之一百一十五 - 關於將本地 SAP UI5 應用配置到本地 Fiori Launchpad 的技術實現深入講解](https://blog.csdn.net/i042416/article/details/126175449)

* SAP UI5 應用開發教程之一百一十六 - 正在寫作中......

## 說明

Jerry 從 2014 年加入 SAP成都研究院 CRM Fiori 開發團隊之後開始接觸 SAP UI5，曾經在 SAP 社群和“汪子熙”微信公眾號上發表過多篇關於 SAP UI5 工作原理和原始碼解析的文章。

在 Jerry 這篇文章 [對 SAP UI5 一無所知的新手，從哪些材料開始學習比較好？](https://blog.csdn.net/i042416/article/details/116347763) 曾經提到，Jerry 也是從 SAP UI5 菜鳥一路走過來，深知只有 ABAP 開發背景的開發者，向 SAP UI5 開發領域轉型的不易，因此我在業餘時間設計了這份適合 `SAP UI5 不同水平`的學習者的學習教程，把開發一個完整的 SAP UI5 應用的流程，拆分成若干個步驟，力求每個步驟裡，把涉及到的知識點都涵蓋到。

這些知識點可能不像我的 UI5 原始碼分析系列文章那麼深入，但力求做到深入淺出，重要的知識點都配上詳細的截圖來輔助文字的介紹，便於教程學習者的理解。

本教程每一個步驟的原始碼，都存放在我的 [Github](https://github.com/wangzixi-diablo/ui5-tutorial) 上，分別用資料夾 01，02，03 等等來標識，例如步驟 1 的原始碼在[這裡](https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/01)。

![](https://img-blog.csdnimg.cn/img_convert/c7bad3447ae1849d56da2f9ae2f4a6e8.png)

每一個步驟均是前一步驟的基礎上，新增了若干新特性。建議零基礎或者對 SAP UI5 知之甚少的 `SAP UI5 初學者`，按照順序從第一個步驟開始循序漸進地學習，把這些程式碼下載到本地，配合教程的文字講解，自己動手，以加深理解。

對於已經`有一定基礎`的 SAP UI5 開發人員，可以透過本文的目錄，跳過前面一部分比較基礎的章節，直接挑選對自己工作專案有關，或者包含某些知識點自己尚未掌握的章節來有針對性地學習。

大家如果對教程的每個步驟有任何疑問，歡迎在教程對應的步驟文章裡給我評論，進行留言。我雖然平時開發工作很忙，但是保證會定期檢視大家給我留下的評論，對於裡面涉及到的技術疑問，我一定會`抽時間做出解答`。

本教程第 54 個步驟 [SAP UI5 應用開發教程之五十四 - 如何將本地 SAP UI5 應用配置到本地 Fiori Launchpad 中](https://jerry.blog.csdn.net/article/details/123690190) 分享瞭如何把本地開發的 SAP UI5 應用配置到本地執行的 Fiori Launchpad 中，效果如下：

![](https://img-blog.csdnimg.cn/img_convert/8b3a4b582fb00aca64efaf53b7990dce.png)

所謂 `本地` Launchpad，是為了與 ABAP 伺服器，以及 SAP Business Technology Platform(BTP)伺服器上的 Fiori Launchpad 相區分。

點選 App 1 tile 之後，可以跳轉到該 tile 配置的本地 SAP UI5 應用去，並且位址列 url 也相應發生變化。

![](https://img-blog.csdnimg.cn/img_convert/53572c7a1d6dddb83befc784fdaccc0d.png)

當時步驟 54 裡我們介紹過，為了讓 SAP UI5 框架知道 Launchpad 裡的 tile 被點選後，應該`跳轉`到哪一個 SAP UI5 應用，需要進行如下圖的配置，讓第 18 行的 url 欄位值(圖例1)，指向待開啟的 SAP UI5 應用所在的工程資料夾名(圖例2)，二者必須一致。

![](https://img-blog.csdnimg.cn/img_convert/f520bfbce8cdfa453beb0645b7eb5d8d.png)

有朋友在學習了步驟 54 後反饋，這位朋友在第 16 行的 `additionalInformation` 裡，使用包含了完整名稱空間字首的路徑，指定了待開啟的 SAP UI5 應用，即 `sap.ui5.walkthrough.app1`

![](https://img-blog.csdnimg.cn/img_convert/beaee8aa577d7c6bb96b67616f86c10c.png)

而此時第 18 行的 url 欄位，即使維護成 `""`, 點選 tile 後的跳轉也能正常工作。

實際上，這是兩種不同的方式，來指定 tile 被點選後待開啟的目標 SAP UI5 應用資訊。為什麼這麼說呢？下面我們就來詳細分析這兩種不同方式的工作原理。

還記得本教程[SAP UI5 應用開發教程之九 - 建立第一個 Component](https://jerry.blog.csdn.net/article/details/121042479) 提到的知識點嗎？當一個 SAP UI5 應用配置到 Fiori Launchpad 之後，該應用的入口，就不再是 `index.html`, 而是 `Component.js` 了。

每個期望透過 Fiori Launchpad 訪問的 SAP UI5 應用，都必須擁有這樣一個 `Component.js` 檔案，這個檔名大小寫敏感，且不能改成其他名字。

本文介紹的兩種方法，其實就是採取不同的方式告訴 SAP UI5 框架，到哪裡能夠找到待開啟應用的 `Component.js` 罷了。

下面是兩種方法的[詳細介紹](https://blog.csdn.net/i042416/article/details/126175449)。

# 總結

1. 本文深入闡述了在 SAP Fiori Launchpad 裡配置 SAP UI5 資訊，使其能夠作為一個 tile，點選後在 Fiori Launchpad 裡被開啟的兩種方法。方法1 需要在 url 欄位正確維護待開啟的 SAP UI5 應用在工程裡的路徑資訊，方法2 需要在 additionalInformation 欄位裡維護完整的包含了名稱空間的 SAP UI5 Component 名稱。

2. 本文展示了一種錯誤訊息驅動的探索方式，即故意維護一個不合法的值，透過 SAP UI5 框架丟擲的錯誤訊息，找到該不合法值被校驗的準確位置，進而學習 SAP UI5 相關處理邏輯。

關於將本地 SAP UI5 應用配置到本地 Fiori Launchpad 的技術實現深入講解試讀版

相關文章