透過之前的文章[如何在 SAP BTP 上透過 CDS view 快速建立 Fiori Elements 應用](https://jerry.blog.csdn.net/article/details/118637531)，我們已經建立了一個 CDS view，並基於該 CDS view，建立了一個 Fiori Elements 應用：

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

如上圖所示，我們期望，點選上圖的“>”符號時，能跳轉到該行專案對應的 object page 頁面去。本文介紹實現方法。

這個 CDS view 主要的 annotation，都以透過 metadata extraction 的方法，抽取到了名為 Z_TRAVEL_METADATA_JERRY 的metadata Extension 中去。具體方法參考我的文章[如何在 SAP BTP 上透過 CDS view 快速建立 Fiori Elements 應用](https://jerry.blog.csdn.net/article/details/118637531)

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

在這個 extension 的頭部，新增如下註解，宣告一個 UI Object page：

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

然後給兩個欄位 TravelID 和 AgencyID，分別加上 identification 的註解，這表明我們期望把這兩個欄位，配置在 Object Page 上：

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

這個 metadata extension 完整的原始碼：

```sql
@Metadata.layer: #CORE

@UI: {
  headerInfo: {
    typeName: 'Travel',
    typeNamePlural: 'Travels',
    title: {
      type: #STANDARD,
      label: 'Travel',
      value: 'TravelID'
    }
  }
}

annotate view Z_C_TRAVEL_DATA_JERRY with
{
  @UI.facet: [ { id:              'Travel',
                purpose:         #STANDARD,
                type:            #IDENTIFICATION_REFERENCE,
                label:           'Travel',
                position:        10 } ]
                
  @UI           : {
      lineItem      : [{position: 10, importance: #HIGH}],
      selectionField: [{position: 10 }],
      identification:[ { position: 10, label: 'Travel' } ]
  }
  TravelID;
  @UI           : {
      lineItem      : [{position: 15, importance: #HIGH}],
      selectionField: [{position: 20 }],
      identification: [ { position: 20 } ]
  }
  @Consumption.valueHelpDefinition: [{  entity: {name: '/DMO/I_Agency', element: 'AgencyID'}  }]
  AgencyID;
  @UI           : {
      lineItem      : [{position: 60, importance: #HIGH}]
      }
  Memo;
}
```

最後從 Fiori Elements list report 表格控制元件點選“>” 之後到達的 Object Page 頁面：

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

如何基於 SAP CDS view 生成 object page

相關文章