# 第一種方法

編輯 app 裡的 `manifest.json` 檔案：

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

```json
{
    "_version": "1.32.0",
    "sap.app": {
    ...
    "sap.ui5": {
        ...
        "routing": {
            ...
            "targets": {
                ...
                "RisksObjectPage": {
                    ...
                    "options": {
                        "settings": {
                            "editableHeaderContent": true,
                            "entitySet": "Risks"
                        }
                    }
                }
            }
        },
        ...
}
```
# 第二種方法：修改 .cds 檔案

給對應的 Fiori Elements 欄位(forms 中的)新增 Label，以及 table column 欄位新增 `header`：

```sql
using RiskService from './risk-service';

annotate RiskService.Risks with {
    title       @title: 'Title';
    prio        @title: 'Priority';
    descr       @title: 'Description';
    miti        @title: 'Mitigation';
    impact      @title: 'Impact';
}
```

新增 value help：

```sql
annotate RiskService.Mitigations with {
ID @(
    UI.Hidden,
    Common: {
    Text: description
    }
);
description  @title: 'Description';
owner        @title: 'Owner';
timeline     @title: 'Timeline';
risks        @title: 'Risks';
}
```

SAP CAP 提供了一個本地實現的仿 Fiori Launchpad 的 container：

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

在一個 CAP Java 應用的 `app` 資料夾裡放置一個自定義 `index.html` 會怎麼樣？

首先直接執行 `cds watch` 是無法工作的。

在應用的 app 資料夾裡新建一個 `index.html`:

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

重啟 SpringBoot 應用，這個 index.html 就生效了：
![](https://img-blog.csdnimg.cn/img_convert/16b787647b11bcaf640ff0bc9c1ee742.png)

cds watch 預設在 app 資料夾中查詢 index.html 檔案。 如果 cds watch 找到這樣的檔案，它會將包含服務連結的預設頁面替換為資料夾中的連結。 雖然這在許多情況下是有意義的，但出於開發目的，我們堅持使用 CDS 的索引頁面併為我們的索引檔案提供不同的名稱。
但是在 Business Application Studio 環境裡測試不透過：

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

看不到自定義 index.html 裡的內容：
![](https://img-blog.csdnimg.cn/img_convert/cb4365b88bdda40d4fd75d2bc1711a84.png)

另外舉一些例子，假設我想在 Fiori Elements List report 的表格控制元件裡，將 table column 的文字進行自定義：

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

需要修改 web 應用裡 `fiori-service.cds` 檔案裡對應的註解。

可以使用語法 `annotate AdminService.Orders` with 後面加實際的註解值。

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

Object Page 裡的 tab 標籤：

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

對應的註解原始碼：

```json
Facets                      : [
            {
                $Type  : 'UI.ReferenceFacet',
                Label  : '發貨地址',
                Target : '@UI.FieldGroup#ShippingAddress'
            },
            {
                $Type  : 'UI.ReferenceFacet',
                Label  : '明細',
                Target : '@UI.FieldGroup#Details'
            },
            {
                $Type  : 'UI.ReferenceFacet',
                Label  : '{i18n>OrderItems}',
                Target : 'Items/@UI.LineItem'
            },
        ],
```

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

SAP CAP Fiori Elements 應用配置 UI 的兩種方式以及自定義 index.html

相關文章