所謂 SAP UI5 應用的主-從-從佈局模式，意思是螢幕水平方向分為左，中，右三部分。

每個部分分別顯示 Master，Detail 第一層和 Detail 第二層資料。

下面這個 gif 是具備這種佈局方式的一個具體例子：

該應用程式提供以下功能：

• 基於 sap.f.FlexibleColumnLayout 控制元件的最多三列布局。此佈局具有預定義的佈局型別和它們之間的定義路由，可以在應用程式的主從模式之間平滑導航。

• 基於 sap.f.DynamicPage 控制元件的 Master 頁面，其中列出了可用產品並具有過濾和排序選項。

• 基於 sap.uxap.ObjectPageLayout 控制元件的詳細資訊頁面，其中包含有關母版頁中所選物件的詳細資訊，它實現了 ObjectPageLayout 控制元件的動態標題。

• sap.f.Avatar 控制元件用於標題區域以顯示所選產品的影象。

• 通過向下滾動頁面內容或單擊/點選標題區域，可以摺疊標題標題區域（捕捉到標題）。標題區域也可以固定，以便在使用者向下滾動頁面內容時保持可見。

• 標題區域右側有一組動作。標題區域可以在標題被捕捉時顯示特定內容。

• 浮動頁尾位於頁面底部，位於頁面內容的頂部。它在右側儲存最終操作。

• 基於 sap.f.DynamicPage 的詳細資訊頁面，用於顯示詳細資訊頁面中所選物件的更多詳細資訊。

• 一個基於 sap.f.DynamicPage 的簡單關於頁面，用於從詳細資訊頁面顯示所選物件的更多詳細資訊，即 Detail 第二層資料。

所謂 Dynamic Page，就是一種佈局控制元件(Layout control)，可以用來實現一個終端使用者看到的網頁，由標題、具有動態行為的抬頭區域、內容區域和可選的浮動頁尾區域組成。

• DynamicPageTitle - 由左側的標題、中間的內容和右側的操作組成。 顯示的內容會根據 DynamicPageHeader 的當前模式而變化。

• DynamicPageHeader - 一個通用容器，可以包含單個佈局控制元件並且不關心內容對齊和響應性。 抬頭區域在展開(expanded)和收起兩種模式下工作，並且可以藉助不同的屬性調整其行為。

• 內容區域 - 一個通用容器，可以有單個 UI5 佈局控制元件，不關心內容對齊和響應性。

• 頁尾 - 位於底部，有一個小的偏移量，用於附加操作，頁尾浮動在內容上方。 它可以是任何 sap.m.IBar 控制元件。

具體實現步驟如下。