Form Entry Object PageでObject Pageだけのアプリを作る

## はじめに
この記事では、Fioriの[Flexible Programming Model](https://qiita.com/tami/items/5205f84137b5455c74cc)で利用可能になったテンプレートの一つである、**Form Entry Object Page**を使ってObject Pageだけのアプリを作成します。Flexible Programming Modelが使えるようになる前は、Object Pageだけの画面を作りたかったとしてもList Reportの画面を経由する必要がありました。Form Entry Object Pageを使うことで、「タイルをクリックして直接登録用のObject Pageを開く」ということが可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/bb83bd9e-21f4-15c0-61fc-8a886ad179b2.png)

## 前提
- OData V4を使用していること
- ドラフトが有効であること

今回は、以下のリポジトリにあるCAPのプロジェクトをベースに作成します。
https://github.com/miyasuta/flex-orders

受注のヘッダと明細、そしてマスタデータというシンプルな構成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1a7c0862-002d-edd6-3407-0f7326be5552.png)

UIアノテーションは以下のファイルで設定しています。
https://github.com/miyasuta/flex-orders/blob/main/srv/order-srv-ui.cds

## Form Entry Object Pageの生成
ウィザードを使ってFioriアプリを生成します。ポイントとなるステップに絞って説明します。

Fiori elementsのテンプレートで"Form Entry Object Page"を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/b4c02926-6be1-bece-a137-452b702ecdae.png)

メインのエンティティおよびナビゲーションエンティティ（明細がある場合）を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/32f9062b-d740-d8b8-b674-3d75f4e002cc.png)

## 動作確認
生成が完了すると、Application Infromationの画面が表示されます。"Preview Application"をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/76acf472-f9ef-e1fd-ee6a-30dea3550d03.png)

ドロップダウンで`watch-<アプリ名> cds watch --open ...`の方を選択します。こちらのオプションでは、CAPのサービスを起動すると同時にブラウザでアプリを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/782effc0-e990-98ae-d561-dfa82ecec0b8.png)

以下の画面が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d49c4851-412c-7ab9-8787-daad676d105e.png)
明細の"Create"ボタンを押すと何もないObject Pageに遷移してしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/4837e5b0-7d29-846f-8427-cbdeb8c48ff0.png)

## 拡張
生成されたアプリケーションで気になる点がいくつかあるので、手を加えていきます。

### 1. 明細をインラインで入力する
明細をインラインで入力できるようにしたいので、manifest.jsonに以下の変更を加えます。

- ObjectPageのoptions>settingsに"controlConfiguration"を追加。creationModeを"Inline"とする
参考：[Enabling Inline Creation Mode or Empty Rows Mode for Table Entries](https://sapui5.hana.ondemand.com/#/topic/cfb04f0c58e7409992feb4c91aa9410b)

```json
            "targets": {
                "OrdersObjectPage": {
                    "type": "Component",
                    "id": "OrdersObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            ...,
                            "controlConfiguration":{                              
                                "to_Items/@com.sap.vocabularies.UI.v1.LineItem":{
                                    "tableSettings": {       
                                        "creationMode":{                                          
                                            "name": "Inline"           
                                        }                                  
                                    }                              
                                }                      
                            } 
                        }
                    }
                },
```

結果、インラインでの明細入力ができるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d48496f8-3d84-90b7-5aa9-5191c85181cf.png)
新規明細は1番上に挿入されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9b3b51e6-a3d7-f96b-9c6f-77a150089f9d.png)

### 2. 明細のObject Pageへナビゲーションさせない
明細のObject Pageへのナビゲーションをさせないように、以下の変更を加えます。
- 明細詳細へのルートとナビゲーション、ターゲットを削除（以下の選択した部分）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/f3cd7d3a-7724-dd3e-392b-c9cc1ef4ba1f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/0f7b50fc-f394-5ab7-067f-c5a00fb60946.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a88f0386-ac45-4ca8-968d-9c697d481e25.png)

### 3. 登録時のメッセージを変更する
デフォルトでは、"Create"を押すと"Object created"のメッセージが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d9429e86-0216-a13a-acb1-c11483ff6cef.png)
このメッセージはあまりにも一般的なので、"Order created"というメッセージに変えたいと思います。このためには、カスタムのi18nファイルを作成し、manifest.jsonにそのファイルを指定します。

- カスタムのi18nファイル
i18nフォルダの中に`customI18N.properties`というファイルを作成しました（名前は何でもよい）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c9a2f217-e471-1884-1720-7456ef71c1af.png)

```
C_TRANSACTION_HELPER_OBJECT_CREATED=Order created
```
上書きできる標準メッセージは以下のドキュメントに載っています。
[Localization of UI Texts](https://sapui5.hana.ondemand.com/#/topic/b8cb649973534f08a6047692f8c6830d)


- manifest.jsonの設定
ObjectPageのoptions>settingsに"enhanceI18n"を追加。上記で作成したi18nファイルを指定する

```json
"targets": {
                "OrdersObjectPage": {
                    "type": "Component",
                    "id": "OrdersObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            ...,
                            "controlConfiguration":{                              
                                "to_Items/@com.sap.vocabularies.UI.v1.LineItem":{
                                    "tableSettings": {       
                                        "creationMode":{                                          
                                            "name": "Inline"           
                                        }                                  
                                    }                              
                                }                      
                            },
                            "enhanceI18n": "i18n/customI18N.properties"
                        }
                    }
                }
            }
```

結果、登録時のメッセージが"Order created"に変わりました。i18nファイルなので、もちろん翻訳も可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/9ccd17dc-8120-ad6f-0a39-2127894baa57.png)

## おわりに
Form Entry Object Pageを使うことで、List Reportを経由せずに直接Object Pageを開くことが可能になります。注意点としては、Form Entry Object Pageは登録専用であり、照会、変更には使えないということです。登録、変更、照会が必要なアプリケーションの場合は従来通りList Reportのテンプレートを使用しましょう。