SAP/ABAPセミナー
SAP/ABAP研修

CDSビューを利用したFioriアプリケーション開発

12.3 CDSビューを利用したFioriアプリケーション開発

1～3ヶ月で本格的にに学ぶ SAP研修を見る 1～2日で学ぶ SAP講座を見る

CDSビュー作成

まずは、CDSビューを作成（修正）します。
今回は11章で作成したCDSビューを修正します。

11章で作成したCDSビューはODataサービス
登録済みのため、CDSビューを有効化すると
ODataにも自動で反映されます。

①以下の内容を参考にアノテーションを追記していきましょう。

※11章で作成したCDSビューに追記（便宜上、テキストではビュー名が異なります）

②定義部分(データ取得元テーブル、項目定義)の編集を行います。

※11章で作成したCDSビューに追記（便宜上、テキストではビュー名が異なります）

③有効化ボタンを押下します。

CDSビュー登録手順の補足

項目定義上部に記述したアノテーションは以下の通りです。

@UI.facetアノテーションについて

「Fioriアプリの画面構成（タブ・セクション）」を定義するアノテーション です。
簡単に説明すると、「画面に見出し（グループ）をつける設定」です

各項目の詳細は上記の通りです。
下図のイメージのように、見出しを表示する位置に
記述することで、画面をグルーピングできます。

各項目に記述したアノテーションは以下の通りです。

  //ZT2409HUB11
  @UI.lineItem: [{ position: 10 }]
  @UI.selectionField: [{position: 10 }]
  @UI.identification: [{position: 10 }]
key shipinfo.znum,

@UI.selectionField: [{position: N }]について
一覧画面の検索する項目と順番を設定できます。数字が小さいものから表示されます。

@UI.identification: [{position: N }]について
詳細画面に表示する項目と順番を設定できます。数字が小さいものから表示されます。

1～3ヶ月で本格的にに学ぶ SAP研修を見る 1～2日で学ぶ SAP講座を見る

CDSビューを利用したFioriアプリケーション開発

① VS Codeをダブルクリックして起動します。

②Template Selectionが表示されていない場合、Ctrl + Shift + P ボタンを押下し、
Fiori: Open Application Generator を選択します。

③List Report Page を選択します。

④Nextボタンを押下します。

⑤Connect to an OData Service を選択します。

⑥以下内容を入力します。

  • OData service URL：ZCYYMMnnn_SAMP7_1_CDSのURL
  • Service username：ユーザ
  • Service password：パスワード
    ※ログイン情報はSAPと同様

⑦Loginボタンを押下します。

CDSビューを利用したFioriアプリケーション開発手順の補足

ZCYYMMnnn_SAMP7_1_CDSのURL
トランザクションコード：「/N/IWFND/MAINT_SERVICE」による、テスト実行時のURLを入力します。

⑧Nextボタンを押下します。

⑨Nextボタンを押下します。※デフォルトのままでOK

⑩以下内容を入力します。

  • Module name：zfiori_yymmnnn_samp3
  • Application title：yymmnnn Title3
    ※そのほかの項目はデフォルトのままでOK

⑪Browse for folderボタンを押下します。

⑫以下を選択します。

  • フォルダー：projects ※1つ上の階層

⑬Finishボタンを押下します。

⑭ポップアップが表示された場合、Add Project to Workspaceボタンを押下します。

⑮ポップアップが表示された場合、Yesボタンを押下します。

※プロジェクト作成中は、画面右下にInstalling dependencies…と表示されるので
プロジェクト作成完了まで待機

1～3ヶ月で本格的にに学ぶ SAP研修を見る 1～2日で学ぶ SAP講座を見る

Fioriアプリケーションの実行

①zfiori_yymmnnn_samp3を右クリックし、Preview Applicationを押下します。

②start fiori run を押下します。※押下後にTERMINALが起動するので、ブラウザが立ち上がるまで待機

③下記の通り「sap-language=JA」と入力します。
　※デフォルトで言語が英語で起動するため、URLで日本語を指定して起動

④Enterを押下します。

⑤ユーザー名、パスワードを入力します。※ログイン情報はSAPと同様

⑥ログインボタンを押下します。

⑦Goボタンを押下します。

⑧Createボタンを押下します。

⑨登録する内容を入力し、Createボタンを押下します。

⑩＜ボタンを押下します。※登録が成功した場合、成功メッセージが出力

⑪削除するデータを選択し、Deleteボタンを押下します。

⑫削除するデータを選択し、Deleteボタンを押下します。

⑬変更するデータの＞ボタンを押下します。※削除が成功した場合、成功メッセージが出力

⑭Editボタンを押下します。※当手順では配送ステータスを変更

⑮変更する内容を入力し、Saveボタンを押下します。

⑯＜ボタンを押下します。※変更が成功した場合、成功メッセージが出力

⑰検索する内容を入力し、Saveボタンを押下します。※当手順では配送会社を検索

⑱削除するデータを選択し、Deleteボタンを押下します。

⑲一覧に検索結果が表示されれば、処理成功です。

補足情報

「List Report Page」は、Fiori Elements の代表的なテンプレートの一つで、
業務データの一覧表示と詳細表示を組み合わせたアプリケーションを自動生成できる仕組みです。

先述の通り、データを一覧で確認し、クリックすると詳細画面（Object Page）
に遷移するような業務アプリに最適です。

開発者は画面を1からプログラミングする必要がなく、
CDSビューとODataサービスに付与したアノテーション情報をもとに、
Fiori Elementsが自動的にUIを構築します。

機能

List Report Pageでは、検索や詳細遷移といった基本機能に加えて、
列の表示／非表示の切り替えや並べ替え、一覧データのExcelエクスポート、
さらに画面レイアウトや検索条件を保存して再利用できる「バリアント機能」なども標準で備えています。

テンプレート

List Report Page の他にもテンプレートが用意されています。
主な特徴は下記の通りです。要件に合わせたテンプレートを選択することが大切です。

テンプレート名 主な用途 特徴
List Report Page 一覧＋詳細 一覧表示と詳細ページ（Object Page）の両方を自動生成。業務系アプリに最適。
Object Page 詳細のみ 個別データの詳細表示や編集専用。 List Report Pageと組み合わせて利用されることが多いが、単独利用も可能。
Analytical List Page 集計・分析系 グラフとテーブルを組み合わせて、データを可視化・分析できる。 KPIやフィルタと連動した分析が可能。
Overview Page ダッシュボード系 各種KPIやカード形式でデータを俯瞰表示。モニタリング用途に適している。

アノテーション

先述の通り、テンプレートにおいてアノテーションは大変重要です。
多用されるアノテーションの1つである「@EndUserText.label: ‘ラベル名称‘」では、任意のラベルを付与できます。

このようにFioriテンプレートは、SAPが提供する標準UI設計の考え方と機能をそのまま活かし、
少ないコーディングで高品質な業務アプリを効率的に開発できる仕組みです。

CDSビューなど、付与したアノテーション情報をもとにUIを自動生成するため、
データ構造の定義だけで、標準的で使いやすい画面を素早く構築できます。

また、テンプレートを活用することで下記のように多くのメリットがあります。

  • 開発スピードの向上
  • デザインや操作性の統一
  • メンテナンス性・拡張性の向上

今後のFiori開発では、テンプレートを理解し、アノテーションを活用することが大切です。
開発者はUI実装にかかる手間を減らし、より業務ロジックやユーザー体験の向上に集中できるようになります。

研修の詳細はこちら