SAPクラウド演習 ANN-2. SAP Fiori Overview Page
まずは、このビデオをみてください。ビジネスの概要をダッシュボード的に見て、そこから色んな作業をするというのは良くあります。
これは SAP Fiori launchpad から起動できる Overview Page で中のパーツは”カード” と呼びます。
これらをゴリゴリ・プログラミングで書くこともできますが、IT 部門が annotation.xml を提供して、ビジネスユーザが自分達に必要なカード群をノン・プログラミングで作成してみましょう。
1. オプションのプラグインを有効化
SAP Web IDE を起動して、Overview Page のプラグインを有効化
ブラウザをリロード
2. Overview Page Template でプロジェクト作成
SAP Fiori Smart Template Application のカテゴリのOverview Page Application のテンプレートを選択
ES4 のGWSAMPLE_BASIC OData サービスを使用します。
IT部門が事前に作成してくれた、annotation.xml ファイルを追加します。添付ファイル参照。
アプリケーション名を入力
これでプロジェクト作成完了
3. annotation.xml の準備
プロジェクトを選択して Run でテスト。まだカードを追加していないのでタイトルのみのアプリです。
フォルダ構成を調整します。現在はこんな構成ですが、Smart Template と同じように Annotations のフォルダを作成して,そこに annotation.xml を置きます。
webapp の下に “annotations” のフォルダ作成。最後に s が付きますので注意してください。
localService -> GWSAMPLE_BASIC -> localAnnotations_1.xml をコピーしてannotations フォルダにペースト。
4. リスト・カードを追加
プロジェクトにカードを追加します。
データソースを選択。
リスト・カードを選択
高額受注 Top 5 を表示してみましょう。
Annotation Path の最後に #bar を追加するのを忘れずに。
先ほどアプリをテストしたブラウザのタブでリロード。更新された manifest.json が読み込まれます。
5. バブルチャート・カードを追加
同様のステップでバブルチャートのカードを追加してみましょう。
自動的に提案された annotation path の後ろに “#bubble” をつけてください。
こんな表示になります。
この例は 縦がNet Amount で横がGross Amount で、ビジネス的にはおかしい？と思います。
annotation.xml を変更して、色々テストしてみてください。
ヘッダエリアのフィルタを設定すれば、営業組織別や顧客別、伝票タイプ別など切り替えられるようになります。
これらも annotation.xml で制御できますので、別の機会に紹介します。
Great blog!
Thanks for sharing Masa!