Quantcast
Channel: SCN : Blog List - All Communities
Viewing all articles
Browse latest Browse all 2548

SAPクラウド演習 ANN-1. Smart Template - Part.1

$
0
0

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 ファイルはありません。

ann01.jpg

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

anno02.jpganno03.jpg

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

anno05.jpg

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

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

anno06.jpg

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

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

anno07.jpg

anno08.jpg

anno09.jpg

anno10.jpg

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

anno11.jpg

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

anno12.jpg

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

 

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

anno13.jpg

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

anno14.jpg

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

anno15.jpg

UI.SelectionFields を追加します。

anno16.jpg

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

anno17.jpg

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

anno18.jpg

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

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


Viewing all articles
Browse latest Browse all 2548

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>