SAPクラウド演習 BUILD-3. 画面のプロトタイプ Page 2前半

1.  Page 2 の概要

プロジェクト -> プロトタイプ -> Page 2 でプロトタイプ・ツールを起動します。

Page 2 は Object Page のテンプレートを指定しました。

完成イメージとアウトラインを頭に入れておきましょう。

2.  Page 2 プロトタイプ

Object Page のMain Object に “Product” を指定します。

Object Page Header に Image, ID, Name を設定し、一番上に Page 1 に戻るボタンを追加します。

一番上のバーの左に Page1 に戻るボタンを追加します。

左矢印の戻るボタンに設定。 Text を削除し、Type を Backに、クリックで Page 1 に戻るようにします。

右側のボタンが押されたら、カートの追加し、”カートに追加しました”のトースト通知を出します。

商品の下に価格を表示します。Items の下の２つのLink を削除し、新たに Item Number を追加してください。

Item Number に価格と通貨を設定します。

メイン画面上で “Hello and Welcome!” を選択肢 “評価” に置き換えます。

評価のラベルの右側に “Rating Indicator” のコントロールをドラッグ＆ドロップで配置。値は AvgRatingを割り当てます。

Object Page には３つのサブ・セクションがあり、商品詳細、おすすめ商品、評価を表示します。

1つ目のサブ・セクションには１つのLabelがありますが、Labelを削除してSimple Form を追加します。

タイトルを商品詳細に変更してください。

Simple Form の下の Header は削除し、 Label+Text のペアを追加します。

メイン画面上で Label、Text を選択し以下のように商品詳細を表示します。

在庫                   – Pieces

取扱説明書        – Instruction

おすすめ商品数 – NoofRelatedProducts

評価数               – NoofReview

繰り返して、以下のように設定します。URL の幅は狭いので、ドラッグして十分な長さを確保します。

ハンズオン・シリーズ：クラウドでのアプリ開発: SAP Web IDE on HCP ハンズオン – まとめ