Skip to Content
Technical Articles
Author's profile photo Yuto Sugita

SAP Launchpad Service での動的タイル実現方法 (1/3) – SAP S/4HANAのFioriアプリケーションを動的タイルとして表示する

本ブログは、SAP Launchpadサービスの概要について に関連する連載記事の第1回となります。

  1. SAP S/4HANAのFioriアプリケーションを動的タイルとして表示する ← ★ 本ブログ
  2. Cloud Foundry上のFioriアプリケーションを動的タイルとして表示する
  3. (仮題) Cloud Foundry上のFioriアプリケーションをカスタムビジュアライゼーションタイルとして表示する

本ブログ(第1回) では、バックエンドSAP S/4HANAのデータを元に、SAP Launchpad Serviceでパーソナライズされた数値を表示するタイル(動的タイル = Dynamic Tile) を作成するシナリオを実現する方法を記載します。

Index

  1. はじめに
  2. 前提
  3. 実現ステップ
    1. SAP S/4HANA側: OData実装
    2. SAP S/4HANA側: 動的タイルの設定と動作確認
    3. SAP S/4HANA & SAP Launchpad Service双方: Content Federation実施
    4. SAP Launchpad Service側: 動的タイルを確認
  4. 終わりに

 

1. はじめに

弊社ブログ SAP Launchpadサービスの概要について でも記載の通り、 同サービスを利用することでSAP S/4HANAを含む様々なアプリケーションを統合したエントリーメニュー機能を提供することができます。その価値の一つとして、単にタイルとしてアプリケーションの入り口を提供するだけでなく、以下のようにユーザに紐づく集計データをタイルに表示することが可能です。

このように、”パーソナライズされた” / “動的な” データをメニュー起動時に表示するシナリオを実現することができます。単純なメニューとして使うのも有用ですが、せっかくであれば動的タイルにしてパッとKPIがわかる。。。なんていうUX、さらにステキだと思います。そんな思いでBlogを書きました。この数値、アイコン、テキスト、全部「動的に」実装可能です。左のタイルでは数値だけの出力ですが、右のタイルでは値の大小によって色付けをすることにより、集計値に意味合いをもたせています。

本ブログでは、SAP S/4HANAのデータを用いて、SAP Launchpad Serviceのタイルに動的タイル(数値/色/テキスト/アイコン等) を表示し、実際のアプリへナビゲーションする実装例を記載します。

 

2. 前提

以下を前提とします。

  • SAP S/4HANA – SAP Launchpad Service間のプリンシパル伝送 (Principal Propagation) の設定が実施されていること
    SAP Blog: Principal propagation setup with SAP S/4HANA system and SAP Business Technology Platform
    *補足: プリンシパル伝送 (Principal Propagation) を用いることで、SAP Business Technology Platform上のユーザとABAP上のユーザのマッピングを実施することができます。ユーザ依存のデータをSAP Launchpad Service上 (⊂SAP Business Technology Platform上) に表示するにはこの設定が必要となります。
  • 本ブログでは、動的タイルからFioriアプリへ遷移するような設定も手順に含みますが、Fioriアプリそのものの作成方法については記載していません。
  • SAP Launchpad Serviceで使用したいFioriアプリのタイプがSmart Business KPI系のアプリである場合は、特別な実装の必要はなく動的タイルの実装が可能ですので本ブログの説明対象外とします。ガイドに記載の通り、Smart Business KPI系アプリに対してContent Federation(後述) を実施すれば、以下のように標準/カスタム問わず自動的にタイルに設定した集計値がSAP Launchpad Serviceに表示されます。

    詳細は以下のリンクをご参照ください。

つまり、本ブログの内容は、SAP Smart Business KPI系アプリのタイルではなく、動的タイルを実現したい際のシナリオとご理解ください。

 

3. 実現ステップ

3.1. SAP S/4HANA側: OData実装

まず、動的タイルを実現する際のSAP S/4HANAでのOData実装方法については、おおまかに以下の2通りに分かれます。本ブログではこの[パターン2]に焦点を当て、T-cd: SEGWを用いて実装する方法を記載します。

  • [パターン1] 集計値のみの表示で要件が満たせるケース (値に応じた色付け等は不要)
  • [パターン2] 動的テキストやアイコンなどを使用することで、動的タイルの機能をフルサポートした実装が必要なケース
    • T-cd: SEGWを用いて、一部ABAPロジックを記述しながらODataを実装する必要があります。この方法を用いることでより広範囲のシナリオをカバーすることが出来ますので、本ブログではこのパターン2を想定して記載いたします。

*少し横道にそれた話題になりますが、ここでT-cd: SEGWの代わりにABAP RESTful Application Programming Model (RAP)を用いてOData実装をできないのか?と疑問を持った方がいらっしゃるかと思います。後に触れますが、ここで作成するODataには”number”という名称のPropertyを含める必要がありますが、ABAP RESTful Application Programming Model (RAP) ではCDSのSyntax上”number”がリザーブワードになっており実装ができません。弊社内でも議論しましたが、これが理由で、ここではT-cd: SEGWを採用しています。

 

では、実手順を以下にご紹介します。

3.1.1. T-cd: SEGWより、任意の名称をつけて、新規プロジェクトを作成します。

 

3.1.2. Entity Typesの上でCreateをクリックし、Entity Typeを定義します。

3.1.3. 任意の名称のEntity Typeを作成します。紐づくEntity Setも作成するようにチェックを付けます。

3.1.4. Propertiesを設定します。

以下のHelpと合致する形でPropertyを命名する必要がございます。

SAP Help: OData Structure for Dynamic App Launcher Tiles

Property Description
icon sap-iconのURLを入力することでiconの種類を指定できます(例:sap-icon://cart)。
利用可能なアイコンの名前は、Icon Explorerで調べることができます。
info タイルの下部に表示するテキスト
infoState このプロパティの値に応じて、タイルの色が変化します。
Allowed values: Negative, Neutral, Positive, Critical
number タイルの右上に表示する集計数値
numberDigits 表示される小数点以下の桁数
numberFactor 1.000.000のような大きな数字(→ number = 1 and numberFactor=”M” )やパーセント(→ number = 22.2 and numberFactor=”%” )を表示するための、数字のスケーリング係数。
numberState このプロパティの値に応じて、数値の色が変化します。
Allowed values: Negative, Neutral, Positive, Critical
numberUnit 数字の下に表示する単位(例:USD)
stateArrow タイルに表示する矢印の向きを指定します。
Allowed values: None, Up, Down
subtitle タイトルの下に表示するサブタイトル
targetParams キーと値のペアを&で区切ったリストを入力します。
アプリケーションが起動すると(クリックすると)、これらのパラメータはビジネスパラメータ(セマンティックオブジェクトベースのナビゲーションが使用されている場合)またはURLパラメータ(URLベースのナビゲーションが使用されている場合)として、アプリケーションに渡されます。
タイル設定の[Parameter]に何らかのパラメータが入力されている場合、ODataサービスから渡されたパラメータが、アプリケーションに渡されるパラメータのリストに追加されます。
title タイルのタイトル

このように、Propertiesの命名はSAP Fiori Launchpadが予期しているストラクチャーでなくてはなりません。例えば以下のスクリーンショットのようにPropertiesを設定します。

*Property “id”は、キーのためのダミーとして設定しています

 

3.1.5. Generateします。以下のようにModelとServiceの定義を聞いてくるのでチェックします。

 

3.1.6. カスタムロジックを実装します。

Service Implementation > tileConfSet > GetEntity (Read) > Method Nameより、{Entity Set Name}_GET_ENTTYをダブルクリックし、ロジック実装の画面を開きます。

*ここで重要なのはGetEntity(1件のみREADで取得のロジック) を選択することです。GetEntitySet(複数件取得)に実装すると、結果セットをarrayで返すため、レスポンスのネストが深くなりSAP Launchpad Serviceが求めるODataの形式になりません。

先程定義したPropertiesに合う形で、変数er_entityに値を挿入します。

ここでは、カスタムテーブルZSCOREよりログオンユーザ(@SY-UNAME)のScore平均を算出し、さらにその値によってinfoState, numberState, stateArrowの文字列(値) を導出するロジックを実装しています。

[Sample Code]

  METHOD TILECONFSET_GET_ENTITY.
    DATA: w_state TYPE TEXT40,
          w_arrow TYPE TEXT40,
          w_number TYPE FLOAT.

    SELECT AVG( Score ) FROM ZSCORE INTO @w_number WHERE BNAME = @SY-UNAME.

    IF w_number > 3.
      w_state = 'Positive'.
      w_arrow = 'Up'.
    ELSE.
      w_state = 'Negative'.
      w_arrow = 'Down'.
    ENDIF.

    er_entity = VALUE #(
      icon = 'sap-icon://kpi-corporate-performance'
      info = SY-UNAME
      infoState = w_state
      number = w_number
      numberDigits = 3
      numberFactor = ' / 5'
      numberState = w_state
      numberUnit = 'Average'
      stateArrow = w_arrow
      subtitle = 'Manage Rate'
      title = 'Your Processed Incident Cases'
      id = 1
     ).
  ENDMETHOD.

実装後、保存し有効化します。正常に有効化されることを確認します。

3.1.7. 実装したODataをPublishし、テストを実施します。

T-cd: /n/iwfnd/maint_serviceから、+ Add Serviceをクリックし、下記のように先程作ったサービスを公開します。

Gateway Clientで先程のサービスのテストを実施します。PublishしたODataサービスを検索し、SAP Gateway Clientをクリックします。

下記のODataをGETメソッドで実行し、正しく値が帰ってくるかをテストします。キーのProperty ”id”で1件のみの検索指定をすることで、一行リターンのGET_ENTITYメソッドが発火され、SAP Launchpad Serviceの求めるJSON形式が返されます。

[Sample URI] /sap/opu/odata/sap/Z_DYTILE_CONF_SRV/tileConfSet(id=1)?$format=json

ポイントは、ここでログオンユーザによって動的に異なる値が帰ってくるという点です。

これで、ユーザにパーソナライズされたデータが出力されるODataの実装が完成しました。

 

3.2. SAP S/4HANA側: 動的タイルの設定と動作確認

ここで、SAP Fiori Launchpad Designerを用いてSAP S/4HANAで動的タイルの設定を実施します。

任意のカタログ内にタイルを作成する際に、赤枠のDynamic Tileを選択します。

設定欄に”Dynamic Data”が存在するので、ここで先程Gateway Clientで実行したURL(/sap以下)を入力します。また、その他FioriアプリへナビゲーションするためのNavigationも適宜設定します。

[Sample URI] /sap/opu/odata/sap/Z_DYTILE_CONF_SRV/tileConfSet(id=1)?$format=json

次にターゲットマッピングの設定も実施し、ナビゲーション先のFiori IDを指定することでFioriアプリを作成します。以下の設定は一例です。

これで、SAP S/4HANA側で動的タイルが動作するようになったはずです。

SAP S/4HANA側のFiori Launchpadへログオンし、該当アプリのタイルを確認します。

このように、設定した通り値がタイルに表示され、タイトルや値の色付けも反映されていることがわかります。

 

3.3. SAP S/4HANA & SAP Launchpad Service双方: Content Federation実施

作成したタイルを、Content Federationの機能を用いて、SAP Launchpad Service側で使用できるように設定する必要があります。SAP S/4HANA/SAP Launchpad Service双方での作業が必要です。詳細は以下のTutorialをご参照ください。双方での作業についてカバーされています。

Tutorial: Enhance Your SAP Launchpad Site with Federated SAP S/4HANA Content

 

3.4. SAP Launchpad Service側: 動的タイルを確認

以下はSAP Launchpad Service上の画面です。

右上のMe Areaアイコンから確認できるBTP上のユーザ YUTO SUGITAは、ABAP Userの”YSUGITA”へプリンシパル伝送(Principal Propagation)され、ユーザに依存したデータが表示されていることがわかります。

これで、ログオンユーザによって異なる集計値が表示され、動的に値/ステータスが変化するタイルが完成しました。

 

4. 終わりに

以上のステップで、SAP S/4HANAのデータを用いて、SAP Launchpad Serviceに動的タイルを表示することができました。数値だけでなく、テキストや色付け、アイコンまで動的に表現できることが体験できたかと思います。

SAPGUI、Dynproでは得られないメニュー体験を提供しておりますので、Fiori Launchpadを用いるのであれば是非検討いただきたい機能となります。新しい開発スタイルに挑戦するプロジェクトの一助となれば幸いです。それでは次回作にもご期待ください!

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.