SAPクラウド演習1. ノンプログラミングでアプリを作ってみよう!Part 2. では簡単な Master-Detail のアプリを作成しました。

しかし、実際のビジネスではもっと複雑なアプリ(フィルタしたり、登録、変更、削除) が必要になります。プログラミングしてゴリゴリ開発は当然できますが、開発コストがかかります。ノン・コーディングでもビジネスでも使える、マスタ編集、伝票処理できる複雑なアプリを作ってみましょう。

 

SmartTemplate1.jpg

1.  アプリの仕組み

 

Master-Detail はあらかじめ定義されたテンプレートに OData をバインドして、アプリのコードを生成する方法でした。生成したコードをマニュアルで変更する事も可能でした。ここで使う Smart Template はSAPUI5 コントロールの集まりで、コードを生成する方法ではなく、アプリが annotation.xml を読み込んで表示項目、ナビゲーションを制御する新しいスタイルのアプリ開発です。

2.  アプリの作成

 

SAP Web IDE で新しいプロジェクトをテンプレートから作成します。

SmartTemplate2.jpg

Smart Template を選択

SmartTemplate3.jpg

プロジェクト名を入力

SmartTemplate4.jpg

Gateway デモシステムの OData サービスを使用します。

ES4 の Destination がない場合や、ユーザID, パスワードを忘れた場合は SAPクラウド演習1. ノンプログラミングでアプリを作ってみよう! を参照。

SmartTemplate5.jpg

OData サービスは GWSAMPLE_BASIC を使います。

SmartTemplate6.jpg

次に添付の Local Annotation ファイルを追加します。

SmartTemplate8.jpg

SmartTemplate9.jpg

これが Smart Template のサンプルです。使用する OData サービスを指定するだけで、他はannotation.xml で行います。

Smarttemplate10.jpg

SmartTemplate11.jpg

SmartTemplate12.jpg

 

3.  annotation.xml で詳細指定

 

作成されたプロジェクトを見てください。 Master-Detail テンプレートで生成されたアプリのように、 View ファイルや Controller ファイルはありません。

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

Run でアプリをテスト。testFLP.html が Fiori launchpad 経由でテストする方法です。

/wp-content/uploads/2016/01/anno02_866765.jpg /wp-content/uploads/2016/01/anno03_866766.jpg

タイルを選択してアプリを起動。右上の Go ボタンで 製品一覧を取得します。ここではエラーになりますが、正しいエラーです。まだ annotation.xml で必要な項目を指定していないからです。

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

annotation.xml を編集しますが、xml を直接編集するにはノン・プログラマーには厳しいので 専用のannotation 編集ツールを使います。

localAnnotations_1.xml を Annotation Modeler で編集します。

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

まずは、最初の一覧テーブルに製品リストを表示するように設定しましょう。

Local Annotation にUI/LineItemを追加します。

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

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

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

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

UI.LineItem を展開して、値を  ProductID を指定します。

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

同様のオペレーションを繰り返し、4つの項目を追加します。

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

左上の Save ボタンで変更を保存。

 

先ほどアプリをテストしたタブに戻って、ブラウザの更新。

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

データが表示されました。View ファイルに表示する項目をコード指定するのではなく、アプリが動的に annotation.xml を読み込んで画面を構成します。

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

次にテーブルに表示する製品のフィルタ項目を設定します。

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

UI.SelectionFields を追加します。

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

ProductID, Category, Supplier Name をフィルタ項目として追加します。

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

保存してから、再度アプリでブラウザをリロードします。annotation.xml が読み込まれてフィルタ項目が設定されました。

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

次に製品の詳細を表示しましょう。製品一覧テーブルの右側の > を選択してください。何も表示されません。

詳細画面の設定をしましょう。続きは SAPクラウド演習 ANN-1. Smart Template – Part.2 へ。

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply