【Fiori】CDSビューでFiori Appを作る

##はじめに
CDSビューをベースにFiori Appを簡単に作ることができます。この方式で作るアプリのことを**Fiori Elements App**といいます（※）。この方法だとフロントエンド側のコーディングが不要になり、誰が作っても統一されたUIになるのでおすすめです。SAPの標準アプリも80%がFiori Elementsで作られているそうです。
参考：[Getting Started with SAP Fiori elements: Introduction](https://www.youtube.com/watch?v=tzOybCR4dw8&feature=youtu.be)
※CDSから作るアプリというよりは、アノテーションベースで、ノンコーディングで作るアプリのこと

今回の記事では、CDSビューからFiori Appを作る方法を紹介します。

##やること
1. 生徒情報のアドオンテーブルのデータを表示するFiori Appを作る（今回の記事）
2. [UIアノテーションを追加する](https://qiita.com/tami/items/3322068524cfc30d236b)
3. [アドオンテーブルを更新する機能を追加する](https://qiita.com/tami/items/b1458094d16dfdc87359)
4. [保存前のデータ編集とチェック](https://qiita.com/tami/items/71a80205d88893c69163)

##環境
バックエンド：S/4HANA 1809 SP01
開発ツール：Eclipse ADT　⇒インストール手順は[こちら](https://qiita.com/tami/items/c0c01cd7b6b950e3a1ab)


##今回のゴール
CDSビューをベースに、生徒情報を照会するためのFiori Appを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/52532da8-715f-36cb-d549-c531a4b0d14d.png)

##ステップ
1. アドオンテーブルを登録
2. CDSビューを登録
3. ODataを公開
4. Fiori Appを登録

##1. アドオンテーブルを登録
以下の項目を持つテーブル(ZSTUDENTS)を登録します。
キーのSTUDENT_IDの型は、/BOPF/UUIDという16桁のGUIDです。これは、この後でBOPFフレームワークを使って自動的にCRUD操作を行うためです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1cd8dddb-e2d4-dd33-5854-d1588f6e4800.png)

##2. CDSビューを登録
ZSTUDENTSを使ったCDSビューを登録します。
アプリから直接使うビューは"xx_C_xx" (ConsumptionのC)、他のビューで使う部品としてのビューは"xx_I_xx" (InterfaceのI)という名前にするのが慣例です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/97d65ffe-499b-a9a0-8440-ae34ca194d0b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/e3493629-8a61-bc28-cc62-c99de71d8a47.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/7f0a3c42-962e-8a75-138c-95f2a9036c49.png)
以下のようなCDSの骨組みができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/46acb1e2-cd90-df67-027c-237d9f9dbdb1.png)

###デフォルトのアノテーションについて
"Define View"のテンプレートで登録したときに設定されるアノテーションの意味は、以下の通りです。

|アノテーション |意味  |
|---|---|
|AbapCatalog.sqlViewName  |SE11で見えるビューの名前（CDSとは別名を設定する）16桁まで |
|AbapCatalog.compiler.compareFilter  |**trueの場合**：フィルタ条件を比較して一致した場合、joinの式は1回だけ評価される **falseの場合**：フィルタ条件ごとに別々のjoin式が作られて評価される  |
|AbapCatalog.preserveKey  |**trueの場合**：CDSビューのキーはkeyで指定した項目になる **falseの場合**：CDSビューのキーはkeyで指定した項目によらず、元のビュー（またはテーブル）の項目になる  |
|AccessControl.authorizationCheck  |ビューの権限チェックをするかどうか  |
|EndUserText.label  |CDSビューの名称を定義（最初の画面で入力したDescription）  |

アノテーションについて詳しくは[こちら](https://help.sap.com/doc/abapdocu_751_index_htm/7.51/en-US/abencds_f1_view_entity_annotations.htm)

今回は、以下のようにアノテーションを設定します。

```abap
@AbapCatalog.sqlViewName: 'ZMOB58_V_STUDENT'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Students CDS for Fiori'
define view ZMOB58_C_STUDENTS as select from data_source_name {
    
}
```
###項目定義
テーブルZSTUDENTSの項目を全て追加します。データソースを指定した後で、Control+Spaceを押すと項目の候補が出てきます。Insert all elementsを選ぶと全ての項目が追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/574d0899-f058-c15e-c3cf-5efa5129f41e.png)

```abap
@AbapCatalog.sqlViewName: 'ZMOB58_V_STUDENT'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Students CDS for Fiori'
define view ZMOB58_C_STUDENTS as select from zstudents {

    //zstudents 
    key student_id, 
    first_name, 
    last_name, 
    birthday, 
    region, 
    city, 
    street, 
    location, 
    created_at, 
    changed_at
}
```

この時点で有効化し、実行(F8)してみると、以下のようになります。
※テーブルに2件レコードを入れておきました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/c9532abc-11d0-e11e-0960-024d732da34b.png)

##3. ODataを公開
###OData公開用のアノテーションを追加
CDSビューをODataとして公開するために、以下のアノテーションを追加します。
`@OData.publish: true`

有効化すると、ODataのアノテーションのところに警告が出るので、それをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/6097b1aa-3b45-7eac-da19-792df0b4484d.png)
ODataサービスが有効になっていないというメッセージが出ますが、これから有効化するので問題ありません。このサービス名をコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/d4bbc18c-8e57-d26d-8f4b-7f410b2fcf1c.png)

###ODataサービスを有効化
SAP GUIにログオンして、トランザクション/IWFND/MAINT_SERVICEを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/09877d56-2fff-a728-9e80-83a38c300e31.png)
System Ailiasに"Local"、External Service Nameに、さきほどコピーしたサービス名を入力し、Enterを押します。
※この環境はODataサービスの開発と公開が一つのシステムなのでLocalを指定しています。[Hubシナリオ](https://qiita.com/tami/items/a87a6f67be928c78e4e8)の場合、設定が変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/2da8785b-734c-97fb-7887-d15870a64ef2.png)
表示された行を選択して、"Add Selected Services"をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/11b109c8-4003-9c34-b6fc-bdcf07ac6138.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/1d5828c8-fd5f-8135-6de2-ba13a03df156.png)

###ODataサービスをテスト
ADTからODataサービスをテストできます。OutlineタブにあるOData Exposureを右クリックし、"Open"を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/42ad89f1-0b72-68fb-e7c9-614e3338dbd1.png)
ブラウザが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/04a78f92-a21b-e40d-7a93-d034996602ab.png)
ブラウザに以下のように入力すると、JSON形式でデータが返されます。

`http://<host>:<port>/sap/opu/odata/sap/ZMOB58_C_STUDENTS_CDS/ZMOB58_C_STUDENTS?$format=json`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/87c59f00-77fa-9b6f-c31a-e1803b45b01c.png)

##4. Fiori Appを登録
WebIDEにログインし、テンプレートからアプリケーションを登録します。
SAP Fiori Elementsの中からList Report Applicationを選択し、Nextを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/fb02b595-f1d9-bc78-9e4a-5c9571a11f2c.png)
プロジェクト名、Namespace（任意）、タイトルを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/4f373845-e498-c5fa-57eb-809f0e87c175.png)
接続先のシステムを選択し、前のステップで登録したODataサービスを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/7d4c4ecc-32aa-86f0-6243-00371770ea1f.png)
アノテーションファイルは全て選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/55d56cea-3fbc-91d4-0691-865900802f7e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a8367e10-83bd-70bf-66aa-c88bc26ae402.png)
アプリが登録されたら、早速実行してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/df99fe53-b96d-fca8-8c41-3af5c5414741.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/5e1a3de7-4cf2-8be9-2b87-892d71b4a66a.png)
タイルをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/754c33fa-4e95-9627-d035-ae6cb0258fb0.png)
この時点では検索条件や検索結果は表示されませんが、手動で項目を追加することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/ee9c08f3-7de4-fbdd-96df-eba9922b28b4.png)
###検索条件を追加
フィルタ調整を押すと、検索条件を追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/359c5eae-549e-e73a-6ff5-b35f78dbe279.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/377899c9-8270-b8f7-ba90-d1cd6d23909d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/6ada364b-d291-4d8d-13de-85d2c932d40f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/a23fbb5c-63d9-fcae-5e41-ddc95b45d525.png)

###リストの項目を追加
設定マークを押すと、リストの項目を追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/0a7d3e13-999a-8cd1-5a4e-c4f96415e0b7.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/90a9e5d1-89a8-c109-c740-180b304e5708.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276021/52532da8-715f-36cb-d549-c531a4b0d14d.png)

ただし、ここで設定した検索条件や表示項目は一時的なもので、リフレッシュすると失われてしまいます。
[次回](https://qiita.com/tami/items/3322068524cfc30d236b)の記事では、UIアノテーションを使ってCDSビュー側でUI項目を定義します。