Skip to Content
Author's profile photo Masayuki Sekihara

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

SAPクラウド演習 BUILD-3. 画面のプロトタイプ Page 1 の続きです。

 

参照 YouTube ビデオ:

 

1.  Page 2 の概要

 

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

/wp-content/uploads/2016/02/p2_01_878320.jpg

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

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

/wp-content/uploads/2016/02/p2_35_878475.jpg

2.  Page 2 プロトタイプ

 

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

/wp-content/uploads/2016/02/p2_02_878332.jpg /wp-content/uploads/2016/02/pt_03_878331.jpg

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

/wp-content/uploads/2016/02/p2_04_878342.jpg /wp-content/uploads/2016/02/pt_06_878343.jpg

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

/wp-content/uploads/2016/02/p2_05_878352.jpg /wp-content/uploads/2016/02/p2_06_878353.jpg

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

/wp-content/uploads/2016/02/p2_07_878356.jpg /wp-content/uploads/2016/02/p2_08_878361.jpg

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

/wp-content/uploads/2016/02/p2_09_878370.jpg /wp-content/uploads/2016/02/p2_10_878371.jpg

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

/wp-content/uploads/2016/02/p2_11_878378.jpg /wp-content/uploads/2016/02/p2_14_878379.jpg

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

/wp-content/uploads/2016/02/p2_15_878380.jpg /wp-content/uploads/2016/02/p2_16_878387.jpg

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

/wp-content/uploads/2016/02/p2_17_878388.jpg

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

/wp-content/uploads/2016/02/p2_18_878389.jpg /wp-content/uploads/2016/02/p2_19_878390.jpg

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

/wp-content/uploads/2016/02/p2_20_878391.jpg

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

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

/wp-content/uploads/2016/02/p2_21_878408.jpg /wp-content/uploads/2016/02/p2_22_878437.jpg

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

/wp-content/uploads/2016/02/p2_23_878410.jpg /wp-content/uploads/2016/02/p2_24_878420.jpg

/wp-content/uploads/2016/02/p2_29_878465.jpg

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

在庫                   – Pieces

取扱説明書        – Instruction

おすすめ商品数 – NoofRelatedProducts

評価数               – NoofReview

/wp-content/uploads/2016/02/p2_26_878422.jpg /wp-content/uploads/2016/02/p2_27_878435.jpg

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

/wp-content/uploads/2016/02/p2_28_878436.jpg

 

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

 

 

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.