Skip to Content
Author's profile photo Masayuki Sekihara

SAPクラウド演習 ANN-2. SAP Fiori Overview Page

まずは、このビデオをみてください。ビジネスの概要をダッシュボード的に見て、そこから色んな作業をするというのは良くあります。

 

002 OVP Landscape.png

これは SAP Fiori launchpad から起動できる Overview Page で中のパーツは”カード” と呼びます。

これらをゴリゴリ・プログラミングで書くこともできますが、IT 部門が annotation.xml を提供して、ビジネスユーザが自分達に必要なカード群をノン・プログラミングで作成してみましょう。

1.  オプションのプラグインを有効化

 

SAP Web IDE を起動して、Overview Page のプラグインを有効化

/wp-content/uploads/2016/01/ovp1_867130.jpg

ブラウザをリロード

2.  Overview Page Template でプロジェクト作成

/wp-content/uploads/2016/01/ovp2_867146.jpg

SAP Fiori Smart Template Application のカテゴリのOverview Page Application のテンプレートを選択

/wp-content/uploads/2016/01/ovp3_867148.jpg

/wp-content/uploads/2016/01/ovp4_867149.jpg

ES4 のGWSAMPLE_BASIC OData サービスを使用します。

/wp-content/uploads/2016/01/ovp5_867150.jpg

/wp-content/uploads/2016/01/ovp6_867151.jpg

IT部門が事前に作成してくれた、annotation.xml ファイルを追加します。添付ファイル参照。

/wp-content/uploads/2016/01/ovp7_867164.jpg

/wp-content/uploads/2016/01/ovp8_867165.jpg

/wp-content/uploads/2016/01/ovp9_867166.jpg

アプリケーション名を入力

/wp-content/uploads/2016/01/ovp10_867173.jpg

これでプロジェクト作成完了

/wp-content/uploads/2016/01/ovp11_867174.jpg

3.  annotation.xml の準備

 

プロジェクトを選択して Run でテスト。まだカードを追加していないのでタイトルのみのアプリです。

/wp-content/uploads/2016/01/card00_867171.jpg

フォルダ構成を調整します。現在はこんな構成ですが、Smart Template と同じように Annotations のフォルダを作成して,そこに annotation.xml を置きます。

/wp-content/uploads/2016/01/card01_867172.jpg

/wp-content/uploads/2016/01/card02_867179.jpg

webapp の下に “annotations” のフォルダ作成。最後に s が付きますので注意してください。

/wp-content/uploads/2016/01/card05_867180.jpg

localService -> GWSAMPLE_BASIC -> localAnnotations_1.xml をコピーしてannotations フォルダにペースト。

/wp-content/uploads/2016/01/card09_867186.jpg /wp-content/uploads/2016/01/card10_867187.jpg

4.  リスト・カードを追加

 

プロジェクトにカードを追加します。

/wp-content/uploads/2016/01/ca01_867198.jpg

データソースを選択。

/wp-content/uploads/2016/01/ca02_867199.jpg

リスト・カードを選択

/wp-content/uploads/2016/01/ca03_867200.jpg

高額受注 Top 5 を表示してみましょう。

/wp-content/uploads/2016/01/sales01_867495.jpg

Annotation Path の最後に #bar を追加するのを忘れずに。

/wp-content/uploads/2016/01/sales02_867496.jpg

/wp-content/uploads/2016/01/ca07_867212.jpg

先ほどアプリをテストしたブラウザのタブでリロード。更新された manifest.json が読み込まれます。

/wp-content/uploads/2016/01/sales03_867506.jpg

5.  バブルチャート・カードを追加

 

同様のステップでバブルチャートのカードを追加してみましょう。

/wp-content/uploads/2016/01/buble01_867507.jpg

/wp-content/uploads/2016/01/buble04_867508.jpg

自動的に提案された annotation path の後ろに “#bubble” をつけてください。

/wp-content/uploads/2016/01/buble07_867517.jpg

こんな表示になります。

この例は 縦がNet Amount で横がGross Amount で、ビジネス的にはおかしい?と思います。

annotation.xml を変更して、色々テストしてみてください。

/wp-content/uploads/2016/01/bubble06_867518.jpg

ヘッダエリアのフィルタを設定すれば、営業組織別や顧客別、伝票タイプ別など切り替えられるようになります。

これらも annotation.xml で制御できますので、別の機会に紹介します。

 

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ivan Mirisola
      Ivan Mirisola

      Great blog!

      Thanks for sharing Masa!