LoginSignup
19
9

More than 1 year has passed since last update.

@tami(Yasutake Mio)

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

Last updated at Posted at 2019-08-27

はじめに

CDSビューをベースにFiori Appを簡単に作ることができます。この方式で作るアプリのことをFiori Elements Appといいます（※）。この方法だとフロントエンド側のコーディングが不要になり、誰が作っても統一されたUIになるのでおすすめです。SAPの標準アプリも80%がFiori Elementsで作られているそうです。
参考：Getting Started with SAP Fiori elements: Introduction
※CDSから作るアプリというよりは、アノテーションベースで、ノンコーディングで作るアプリのこと

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

やること

  1. 生徒情報のアドオンテーブルのデータを表示するFiori Appを作る（今回の記事）
  2. UIアノテーションを追加する
  3. アドオンテーブルを更新する機能を追加する
  4. 保存前のデータ編集とチェック

環境

バックエンド：S/4HANA 1809 SP01
開発ツール：Eclipse ADT　⇒インストール手順はこちら

今回のゴール

CDSビューをベースに、生徒情報を照会するためのFiori Appを作ります。
image.png

ステップ

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

1. アドオンテーブルを登録

以下の項目を持つテーブル(ZSTUDENTS)を登録します。
キーのSTUDENT_IDの型は、/BOPF/UUIDという16桁のGUIDです。これは、この後でBOPFフレームワークを使って自動的にCRUD操作を行うためです。
image.png

2. CDSビューを登録

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

image.png
image.png
image.png
以下のようなCDSの骨組みができます。
image.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）

アノテーションについて詳しくはこちら

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

@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

@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

3. ODataを公開

OData公開用のアノテーションを追加

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

有効化すると、ODataのアノテーションのところに警告が出るので、それをクリックします。
image.png
ODataサービスが有効になっていないというメッセージが出ますが、これから有効化するので問題ありません。このサービス名をコピーします。
image.png

ODataサービスを有効化

SAP GUIにログオンして、トランザクション/IWFND/MAINT_SERVICEを実行します。
image.png
System Ailiasに"Local"、External Service Nameに、さきほどコピーしたサービス名を入力し、Enterを押します。
※この環境はODataサービスの開発と公開が一つのシステムなのでLocalを指定しています。Hubシナリオの場合、設定が変わります。
image.png
表示された行を選択して、"Add Selected Services"をクリックします。
image.png
image.png

ODataサービスをテスト

ADTからODataサービスをテストできます。OutlineタブにあるOData Exposureを右クリックし、"Open"を押します。
image.png
ブラウザが立ち上がります。
image.png
ブラウザに以下のように入力すると、JSON形式でデータが返されます。

http://<host>:<port>/sap/opu/odata/sap/ZMOB58_C_STUDENTS_CDS/ZMOB58_C_STUDENTS?$format=json
image.png

4. Fiori Appを登録

WebIDEにログインし、テンプレートからアプリケーションを登録します。
SAP Fiori Elementsの中からList Report Applicationを選択し、Nextを押します。
image.png
プロジェクト名、Namespace（任意）、タイトルを入力します。
image.png
接続先のシステムを選択し、前のステップで登録したODataサービスを選びます。
image.png
アノテーションファイルは全て選択します。
image.png
image.png
アプリが登録されたら、早速実行してみます。
image.png
image.png
タイルをクリックします。
image.png
この時点では検索条件や検索結果は表示されませんが、手動で項目を追加することができます。
image.png

検索条件を追加

フィルタ調整を押すと、検索条件を追加できます。
image.png
image.png
image.png
image.png

リストの項目を追加

設定マークを押すと、リストの項目を追加できます。
image.png
image.png
image.png

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

19
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
19
9