SAPクラウド演習 ANN-1. Fiori Elements – Part.1
SAPクラウド演習1. ノンプログラミングでアプリを作ってみよう！Part 2. では簡単な Master-Detail のアプリを作成しました。
しかし、実際のビジネスではもっと複雑なアプリ（フィルタしたり、登録、変更、削除） が必要になります。プログラミングしてゴリゴリ開発は当然できますが、開発コストがかかります。ノン・コーディングでもビジネスでも使える、マスタ編集、伝票処理できる複雑なアプリを作ってみましょう。
1. アプリの仕組み
Master-Detail はあらかじめ定義されたテンプレートに OData をバインドして、アプリのコードを生成する方法でした。生成したコードをマニュアルで変更する事も可能でした。ここで使う Smart Template はSAPUI5 コントロールの集まりで、コードを生成する方法ではなく、アプリが annotation.xml を読み込んで表示項目、ナビゲーションを制御する新しいスタイルのアプリ開発です。
2. アプリの作成
SAP Web IDE で新しいプロジェクトをテンプレートから作成します。
Smart Template を選択
プロジェクト名を入力
Gateway デモシステムの OData サービスを使用します。
ES4 の Destination がない場合や、ユーザID, パスワードを忘れた場合は SAPクラウド演習1. ノンプログラミングでアプリを作ってみよう！ を参照。
OData サービスは GWSAMPLE_BASIC を使います。
次に添付の Local Annotation ファイルを追加します。
これが Smart Template のサンプルです。使用する OData サービスを指定するだけで、他はannotation.xml で行います。
3. annotation.xml で詳細指定
作成されたプロジェクトを見てください。 Master-Detail テンプレートで生成されたアプリのように、 View ファイルや Controller ファイルはありません。
Run でアプリをテスト。testFLP.html が Fiori launchpad 経由でテストする方法です。
タイルを選択してアプリを起動。右上の Go ボタンで 製品一覧を取得します。ここではエラーになりますが、正しいエラーです。まだ annotation.xml で必要な項目を指定していないからです。
annotation.xml を編集しますが、xml を直接編集するにはノン・プログラマーには厳しいので 専用のannotation 編集ツールを使います。
localAnnotations_1.xml を Annotation Modeler で編集します。
まずは、最初の一覧テーブルに製品リストを表示するように設定しましょう。
Local Annotation にUI/LineItemを追加します。
UI.LineItem を展開して、値を ProductID を指定します。
同様のオペレーションを繰り返し、4つの項目を追加します。
左上の Save ボタンで変更を保存。
先ほどアプリをテストしたタブに戻って、ブラウザの更新。
データが表示されました。View ファイルに表示する項目をコード指定するのではなく、アプリが動的に annotation.xml を読み込んで画面を構成します。
次にテーブルに表示する製品のフィルタ項目を設定します。
UI.SelectionFields を追加します。
ProductID, Category, Supplier Name をフィルタ項目として追加します。
保存してから、再度アプリでブラウザをリロードします。annotation.xml が読み込まれてフィルタ項目が設定されました。
次に製品の詳細を表示しましょう。製品一覧テーブルの右側の > を選択してください。何も表示されません。
詳細画面の設定をしましょう。続きは SAPクラウド演習 ANN-1. Smart Template – Part.2 へ。