Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
masa_139
Product and Topic Expert
Product and Topic Expert


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 へ。