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

完成のイメージはこんな画面です。

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

 

2つめのサブ・セクションにはおすすめ商品を表示します。

タイトルをおすすめ商品に変更して、サブ・セクションの下にある Label を削除して Table を追加します。

/wp-content/uploads/2016/02/p2_31_878514.jpg /wp-content/uploads/2016/02/p2_30_878515.jpg

Table には Related Product をバインドして、HeaderToolbar は削除します。

/wp-content/uploads/2016/02/p2_33_878522.jpg /wp-content/uploads/2016/02/p2_34_878523.jpg

テーブルには 画像、商品、評価の3つを表示します。

初期設定の3つのセルを削除して、新規に Image, Item Identifier, Rating Indicator を順番に追加します。

/wp-content/uploads/2016/02/p2_36_878524.jpg /wp-content/uploads/2016/02/p2_37_878531.jpg

各値をそれぞれ設定します。

/wp-content/uploads/2016/02/p2_38_878532.jpg /wp-content/uploads/2016/02/p2_39_878533.jpg /wp-content/uploads/2016/02/p2_40_878534.jpg

メイン画面で列タイトルを変更します。項目を何回かクリックすると反転してテキスト変更できます。

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

最後の3つ目のサブ・セクションには評価のコメントを表示します。

タイトルを評価に変更、サブ・セクションの下の Label  を削除して Table を追加します。

/wp-content/uploads/2016/02/p2_51_878536.jpg /wp-content/uploads/2016/02/p2_52_878543.jpg

Table の行がクリックされると Page 3 へ進みます。データは ReviewSet にバインドします。

HeaderToolbar を削除し、列 Column を4つに追加します。

/wp-content/uploads/2016/02/p2_53_878544.jpg /wp-content/uploads/2016/02/p2_55_878545.jpg

Raw 設定では、Type を Navigation に、初期設定のセルを削除して、新規に Text, Text, Text, Rating Indicator を追加します。

/wp-content/uploads/2016/02/p2_56_878563.jpg /wp-content/uploads/2016/02/p2_57_878567.jpg

各セルの値を設定します。

/wp-content/uploads/2016/02/p2_58_878568.jpg /wp-content/uploads/2016/02/p2_59_878569.jpg /wp-content/uploads/2016/02/p2_60_878570.jpg /wp-content/uploads/2016/02/p2_61_878571.jpg

メイン画面でテキストをクリックし列タイトルを変更します。

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

Page 2 の完成です。

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

これで Page 2 は完成です。次は Page 3 の作成です。

 

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

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