CAP & Fiori Elements: List Reportの検索条件にヘルプ追加

FioriでUI作成はほとんどやったことなかったので、調べた内容をメモすべく記事書きます。もっといい方法あるかもしれません。

こんな感じに**検索条件項目に検索ヘルプ追加およびドロップダウンリスト化**します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/bb2d60f5-0826-83e2-b8eb-607b2a7c74d5.png)

# 前提
以下で設定したローカル環境および実装した内容が前提です。

https://qiita.com/FukuharaYohei/items/d18c995807eb26165553

# 手順
## 1. データモデル追加
`db/data-model.cds`に以下の変更します。
1. entity Booksに対して項目追加(Associationにします)
1. 新しい entity Statuses を追加定義

※ @cds.odata.valuelistをつけておかないとFiori画面で検索ヘルプ/ドロップダウンリストが表示されなかったです。他の方法あるかもしれませんが調べていません。

```typescript: db/data-model.cds
namespace my.bookshop;

entity Books {
  key ID : Integer;
  title  : String;
  stock  : Integer;
  statusHelp : Association to Statuses;
  statusDropDown : Association to Statuses;
}

@cds.odata.valuelist
entity Statuses {
  key ID : Integer;
  text   : String;
}
```

## 2. データ追加
### 2.1. CSVファイル新規作成
検索ヘルプ/ドロップダウンリストに表示する一覧のCSVファイル`db/data/my.bookshop-Statuses.csv`を新規作成します。
区切り文字がカンマですが、セミコロンでもどっちでも可能です(タブは駄目だった)。

```text: db/data/my.bookshop-Statuses.csv
ID, text
1, Not Available
3, Available
```

### 2.2. 既存CSVファイルに列追加
`db/data/my.bookshop-Books.csv`ファイルを変更。
`statusHelp_ID`と`statusDropDown_ID`という列を追加し、データも入れています。
entity Statusesのキー項目である`ID`をアンダーバーつけて接尾辞にしています。これやらないとエラーになりました。調べていませんが、もっと賢いやり方あるかもしれません。

```text: db/data/my.bookshop-Books.csv
ID;title;stock;statusHelp_ID; statusDropDown_ID
1;Wuthering Heights;100; 1; 1
2;Jane Eyre;500; 3; 3
```

## 3. サービス追加
`srv/cat-service.cds`ファイルを変更して、サービスにEntity Statusesを追加します。

```typescript: srv/cat-service.cds
using my.bookshop as my from '../db/data-model';

service CatalogService {
    @readonly entity Books as projection on my.Books;
    @readonly entity Statuses as projection on my.Statuses;
}
```

## 4. UIアノテーション変更
`srv/cat-service-ui.cds`を変更して検索ヘルプ/ドロップダウンリスト表示部分の追記をしています。
UI.SelectionFields側はentity Statusesのキー項目である`ID`をアンダーバーつけて接尾辞にしています。

```typescript: srv/cat-service-ui.cds
annotate CatalogService.Books with {
    ID             @title: 'ID';
    title          @title: 'Title';
    stock          @title: 'Stock';
    statusHelp                     @(
        title : 'Status with Help',
        Common: {
            ValueList      : {
                CollectionPath: 'Statuses',
                Parameters    : [
                    {
                        $Type            : 'Common.ValueListParameterInOut',
                        LocalDataProperty: statusHelp_ID,
                        ValueListProperty: 'ID'
                    },
                    {
                        $Type            : 'Common.ValueListParameterDisplayOnly',
                        ValueListProperty: 'text'
                    },
                ]
            }
        }
    );
    statusDropDown @(
        title                          : 'Status with Dropdown',
        Common.ValueListWithFixedValues: true,
    );
}

annotate CatalogService.Books with @(UI: {
    SelectionFields: [
        ID,
        title,
        stock,
        statusHelp_ID,
        statusDropDown_ID,
    ],
    LineItem       : [
        {Value: ID},
        {Value: title},
        {Value: stock},
    ]
});
```

# おまけ
## 検索条件必須化
検索条件項目を必須にする場合です。
ファイル`srv/rec-service-ui.cds`を変更し、新しいアノテーションを追加します。

```typescript: srv/rec-service-ui.cds
annotate RecruitService.Candidates with @Capabilities: {
    FilterRestrictions: {
        $Type                       : 'Capabilities.FilterRestrictionsType',
        RequiredProperties          : [job_ID],
    },
};
```

こんな画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134273/45849886-9548-0595-9d9f-facb76203f18.png)

## 検索条件の単一化(複数設定不可)
検索条件項目を複数設定不可にする場合です。
ファイル`srv/rec-service-ui.cds`を変更し、新しいアノテーションを追加します。

```typescript: srv/rec-service-ui.cds
annotate RecruitService.Candidates with @Capabilities: {
    FilterRestrictions: {
        FilterExpressionRestrictions: [{
            Property          : 'job_ID',
            AllowedExpressions: 'SingleValue'
        }]
    },
};
```

## テキスト検索無効化
一番頭につくテキスト検索を無効化する方法です。
ファイル`srv/rec-service-ui.cds`を変更し、新しいアノテーションを追加します。

```typescript: srv/rec-service-ui.cds
annotate CatalogService.Books with @Capabilities: {
    SearchRestrictions: {Searchable: false}
};
```