SAPクラウド演習 BUILD-3. 画面のプロトタイプ Page 2前半
SAPクラウド演習 BUILD-3. 画面のプロトタイプ Page 1 の続きです。
参照 YouTube ビデオ:
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 の下の2つのLink を削除し、新たに Item Number を追加してください。
Item Number に価格と通貨を設定します。
メイン画面上で “Hello and Welcome!” を選択肢 “評価” に置き換えます。
評価のラベルの右側に “Rating Indicator” のコントロールをドラッグ&ドロップで配置。値は AvgRatingを割り当てます。
Object Page には3つのサブ・セクションがあり、商品詳細、おすすめ商品、評価を表示します。
1つ目のサブ・セクションには1つのLabelがありますが、Labelを削除してSimple Form を追加します。
タイトルを商品詳細に変更してください。
Simple Form の下の Header は削除し、 Label+Text のペアを追加します。
メイン画面上で Label、Text を選択し以下のように商品詳細を表示します。
在庫 – Pieces
取扱説明書 – Instruction
おすすめ商品数 – NoofRelatedProducts
評価数 – NoofReview
繰り返して、以下のように設定します。URL の幅は狭いので、ドラッグして十分な長さを確保します。
ハンズオン・シリーズ:クラウドでのアプリ開発: SAP Web IDE on HCP ハンズオン – まとめ