本文基於 SAP Business Technology Platform 的 ABAP 程式設計環境進行的開發。

使用 ABAP Development Tool 登入 SAP BTP ABAP 程式設計環境，新建一個 package，命名為 Z_JERRY_CDS.

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

右鍵選中該 package，建立一個新的 Consumption view. 該檢視是一個消費檢視，它基於業務物件 (BO) 檢視 /DMO/I_TRAVEL_U，提供了獨立於消費層的給定資料模型。

它包含在其上執行的應用程式所需的所有核心資訊。

消費檢視是定義在 BO 檢視之上的 CDS 檢視，用於：

* 公開適合給定消費用例的欄位
* 使用註釋（例如用於 UI、搜尋和 OData）用後設資料豐富資料模型。

這個消費檢視建立好之後，原始碼如下：

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

使用 ABAP Development Tool Content Assistant 快捷鍵，可以迅速將標準檢視 /DMO/I_Ttravel_U 的所有欄位，通過選單 Insert all elements(template),帶入到當前的消費檢視裡：

![](https://img-blog.csdnimg.cn/img_convert/a93259b8639d0979a7816a22d9e43e64.png)
選擇 Open with Data Preview，即可檢視該消費檢視的資料：

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

資料顯示如下：

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

下一步，將 CDS 檢視公開為業務服務。 這將允許我們在 Fiori Elements 預覽中預覽 ABAP Development Tool 裡所作的更改。

業務服務由服務定義和服務繫結組成。

可以使用服務定義來定義將哪些資料（以所需的粒度）公開為業務服務。

然後使用服務繫結將服務定義繫結到客戶端-伺服器通訊協議，例如 OData。 這允許我們為同一定義提供多個繫結，例如 將服務暴露給 UI 和 A2X 提供者。

新建一個 Service Definition：
![](https://img-blog.csdnimg.cn/img_convert/27fd85c3b10f3889f6f23c567034e72e.png)

維護名稱和描述資訊：

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

在 Service Definitions 裡，將之前建立的消費檢視，Z_C_TRAVEL_DATA_JERRY, 暴露成服務：

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

基於建立好的 Service Definition，再建立一個 Service Binding：

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

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

啟用這個 Service Binding 之後，點選 Entity Set and Association 區域的 Preview 按鈕，就能檢視自動生成的 Fiori Elements 應用了：

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

開啟的 Fiori Elements 應用，預設沒有配置任何列表欄。

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

點選上圖工具欄的齒輪圖示，選擇檢視上所有欄位作為列表列專案：

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

現在 Fiori Elements 應用就能正常顯示資料了：

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

為了避免使用者每次預覽 Fiori Elements 應用之前，都要手動去點選齒輪圖示選擇列表列專案，我們可以在消費檢視裡新增如下註解：

```json
@UI           : {
      lineItem      : [{position: 10, importance: #HIGH}],
      selectionField: [{position: 10 }]
  }
```

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

如上圖所示，TravelID 和 AgencyID 兩個檢視欄位，新增了註解 @UI.lineItem, 這使得它們被設定為預設必須顯示的表格列專案。

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

點選齒輪之前，這兩個欄位前的 checkbox 總是預設被勾上。

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

我們可以將 CDS view 檢視裡的註解，單獨維護到一個開發物件裡。

首先在 CDS view 檢視裡，加上下面這行註解：

> @Metadata.allowExtensions: true

右鍵選單選擇 Source Code -> Extract Metadata Extension：

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

這會建立一個新的 ABAP 開發物件，專門用於儲存 CDS view 的註解後設資料：

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

選擇 Next，自動解析出原 CDS view 裡目前為止已經新增了的註解後設資料：

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

Metadata.layer 的值，選擇成預設的 \#CORE：

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

下面再介紹如何通過新增 CDS view 註解，讓自動生成的 Fiori Elements 應用，具有搜尋功能。

新增如下的註解：

> @Search.searchable: true

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

然後在希望支援搜尋的檢視欄位，memo，即描述資訊欄位上，新增下面的註解：

```sql
    @Search.defaultSearchElement: true
    @Search.fuzzinessThreshold: 0.90
```

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

啟用 CDS view，重新整理 Fiori Elements 應用，即可看到表格控制元件上方，多了一個搜尋輸入框。能夠正常工作。

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

最後介紹如何通過註解新增 `Selection Field` 即過濾欄位。

例如，我們希望根據 Travel ID 對錶格進行過濾，則給 TravelID 欄位新增如下的註解：

> selectionField: [{position: 10 }]
![](https://img-blog.csdnimg.cn/img_convert/874ec601355dcdf1222e79bb183b2c4a.png)

最後的介面效果，能夠通過 Travel ID 進行過濾了：

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

如何在 SAP BTP 上通過 CDS view 快速建立 Fiori Elements 應用

相關文章