##はじめに
CDSビューをベースにFiori Appを簡単に作ることができます。この方式で作るアプリのことをFiori Elements Appといいます（※）。この方法だとフロントエンド側のコーディングが不要になり、誰が作っても統一されたUIになるのでおすすめです。SAPの標準アプリも80%がFiori Elementsで作られているそうです。
参考：Getting Started with SAP Fiori elements: Introduction
※CDSから作るアプリというよりは、アノテーションベースで、ノンコーディングで作るアプリのこと
今回の記事では、CDSビューからFiori Appを作る方法を紹介します。
##やること
- 生徒情報のアドオンテーブルのデータを表示するFiori Appを作る（今回の記事）
- UIアノテーションを追加する
- アドオンテーブルを更新する機能を追加する
- 保存前のデータ編集とチェック
##環境
バックエンド：S/4HANA 1809 SP01
開発ツール：Eclipse ADT ⇒インストール手順はこちら
##今回のゴール
CDSビューをベースに、生徒情報を照会するためのFiori Appを作ります。
##ステップ
- アドオンテーブルを登録
- CDSビューを登録
- ODataを公開
- Fiori Appを登録
##1. アドオンテーブルを登録
以下の項目を持つテーブル(ZSTUDENTS)を登録します。
キーのSTUDENT_IDの型は、/BOPF/UUIDという16桁のGUIDです。これは、この後でBOPFフレームワークを使って自動的にCRUD操作を行うためです。
##2. CDSビューを登録
ZSTUDENTSを使ったCDSビューを登録します。
アプリから直接使うビューは"xx_C_xx" (ConsumptionのC)、他のビューで使う部品としてのビューは"xx_I_xx" (InterfaceのI)という名前にするのが慣例です。
以下のようなCDSの骨組みができます。
###デフォルトのアノテーションについて
"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） |
アノテーションについて詳しくはこちら
今回は、以下のようにアノテーションを設定します。
@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を選ぶと全ての項目が追加されます。
@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件レコードを入れておきました
##3. ODataを公開
###OData公開用のアノテーションを追加
CDSビューをODataとして公開するために、以下のアノテーションを追加します。
@OData.publish: true
有効化すると、ODataのアノテーションのところに警告が出るので、それをクリックします。
ODataサービスが有効になっていないというメッセージが出ますが、これから有効化するので問題ありません。このサービス名をコピーします。
###ODataサービスを有効化
SAP GUIにログオンして、トランザクション/IWFND/MAINT_SERVICEを実行します。
System Ailiasに"Local"、External Service Nameに、さきほどコピーしたサービス名を入力し、Enterを押します。
※この環境はODataサービスの開発と公開が一つのシステムなのでLocalを指定しています。Hubシナリオの場合、設定が変わります。
表示された行を選択して、"Add Selected Services"をクリックします。
###ODataサービスをテスト
ADTからODataサービスをテストできます。OutlineタブにあるOData Exposureを右クリックし、"Open"を押します。
ブラウザが立ち上がります。
ブラウザに以下のように入力すると、JSON形式でデータが返されます。
http://<host>:<port>/sap/opu/odata/sap/ZMOB58_C_STUDENTS_CDS/ZMOB58_C_STUDENTS?$format=json
##4. Fiori Appを登録
WebIDEにログインし、テンプレートからアプリケーションを登録します。
SAP Fiori Elementsの中からList Report Applicationを選択し、Nextを押します。
プロジェクト名、Namespace（任意）、タイトルを入力します。
接続先のシステムを選択し、前のステップで登録したODataサービスを選びます。
アノテーションファイルは全て選択します。
アプリが登録されたら、早速実行してみます。
タイルをクリックします。
この時点では検索条件や検索結果は表示されませんが、手動で項目を追加することができます。
###検索条件を追加
フィルタ調整を押すと、検索条件を追加できます。
###リストの項目を追加
設定マークを押すと、リストの項目を追加できます。
ただし、ここで設定した検索条件や表示項目は一時的なもので、リフレッシュすると失われてしまいます。
次回の記事では、UIアノテーションを使ってCDSビュー側でUI項目を定義します。