はじめに

以前の記事でSAP CloudPlatform Trialにおいて、CF環境で
　DB　⇔　OData　⇔　Fiori
の連携が行えるMTAプロジェクトを作成しました。

【DBModuleの追加】
　SAP CP Trial環境でMulti Target Applicationを作ってみる【DBModuleの作り方】

【JavaModuleの追加】
SAP CP Trial環境でMulti Target Applicationを作ってみる【JavaアプリとDBModuleの連携】

【ODataService V2（Java）の追加】
SAP CP Trial環境でMulti Target Applicationを作ってみる【ODataService_V2の作成】

【Fiori画面の追加】
SAP CP Trial環境でMulti Target Applicationを作ってみる【OData⇔Fiori画面の連携】

今回は上記のMTAプロジェクトを前提として、
MTA内にFiori LaunchPadモジュールを追加してapprouter経由でLanchPad -> Fiori画面に遷移できるよう設定します。

Fiori LaunchPadモジュールを追加

MTAプロジェクトにFiori Launchpadのモジュールを追加します。
MTAプロジェクトを右クリック -> New -> SAP Fiori Launchpad Site Moduleを選択します。
任意のモジュール名を決定します。

作成されるLanchPadモジュールの構成は下記のようになっています。
カタログ・グループの設定などはCommonDataModel.jsonに記載するようになっており、
設定方法などの詳細はREADME.mdに書かれています。
より詳細が知りたい場合は公式ドキュメントを参照

Fiori Launchpadの設定

Fiori Launchpadモジュールに同一MTA内で作成しているFiori画面アプリへ遷移可能なタイルを作成します。
まず、Lunchpadから呼び出すHTML5モジュール側にタイルの設定を行います。
その後Fiori Launchpadモジュールに設定したタイル設定を登録します。

HTML5モジュールのタイル設定

HTML5モジュールのmanifest.jsonファイルを開きます。
※下記ではDiscripter Editerを使った設定を行います。

Navigationタブへ移動し、Inbound設定で「+」ボタンを押下します。

下図を参考に、Semantic ObjectとActionを定義します。
Inbound Tileの項目には任意で値を設定可能です。
※{{<KEY>}}でHTML5モジュール内のi18nで定義したプロパティを参照可能です。

設定の変更が完了したらファイルを保存します。
上記設定をCode Editerで確認すると以下のようなcrossNavigationプロパティが追加されていることが確認できます。

        "crossNavigation": {
            "inbounds": {
                "intent1": {
                    "signature": {
                        "parameters": {},
                        "additionalParameters": "allowed"
                    },
                    "semanticObject": "demoUI",
                    "action": "display",
                    "title": "{{title}}",
                    "info": "{{appDescription}}",
                    "subTitle": "demoSubTitle",
                    "icon": "sap-icon://accelerated"
                }
            }
        }

Lunchpadモジュールへのタイル登録

LunchpadモジュールのCommonDataModel.jsonファイルを開きます。
※下記ではLaunchpad Editerを使った設定を行います。

+が表示されているタイルを押下します。

登録するタイル一覧がダイアログで表示されます。
先ほど作成したdemoUIのタイル設定が確認できるはずなので、選択して「Select」を押下します。

正常に登録された場合、下図のようにタイル設定がCommonDataModel.jsonに追加されることが確認できます。

Fiori Launchpadのデプロイ・実行

Launchpadにタイル設定の登録が完了したら、MTAプロジェクトをBuild -> Deployします。
MTAプロジェクトを右クリック -> Build -> Buildを選択

Build完了後、MTAプロジェクト内にmta_archives/xxxxxxx_0.0.1.mtarファイルが作成されます。
ファイルを選択し、右クリック -> Deploy -> Deploy to SAP Cloud Platformを選択

デプロイが完了したら、SAP CloudPlatformのコクピット画面からデプロイしたアプリのRouteを確認します。

上記のリンクに遷移すると無事Fiori Launchpad画面が表示されること、
タイル登録したHTML5モジュールへ遷移できることが確認できました。

オプション：動的タイルの設定方法

タイル上に動的な数値（データ件数など）を表示する動的タイルの実装は簡単にできるのでついでにやってみます。
※Launchpadのタイル上にチャートなどを表示するには別途カスタムタイルを作成する必要があるらしい
　https://blogs.sap.com/2020/03/23/custom-tiles-with-cloud-foundry-portal-cloud-platform/

タイル設定の追加

HTML5モジュールのmanifest.jsonファイルに設定を追加します。
タイル設定の下部にある以下の項目を指定します。

動的タイルのデータソースにはODataの$countクエリオプションを使用しています。
下図のように、APIへのリクエストに対するレスポンスが数値のみであれば問題ないと思います。

今回使用したODataに$countクエリを意図して実装していないのですが、/$countで動作しています。
SAP Cloud SDKを利用しているので標準で実装される？

MTAを再度Build -> Deployを実施して、結果を確認します。
動的にデータ件数を表示するタイルを作成できました。

おわりに

まずはFiori Launchpadを作成して画面に表示するところまで実装することができました。
Launchpadの実装にはテーマやタイルのカスタマイズ、権限設定など考慮すべき内容が多いので、
今後そのあたりもまとめていきたいと思います。