Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
masa_139
Product and Topic Expert
Product and Topic Expert
0 Kudos
SAP クラウド演習 BUILD-3 では実際に動かせる画面のプロトタイプを作成します。

既に、デザイン思考ワークショップ、各種 Study で基本的な画面構成は出来上がっている状況です。

 

参照 YouTube ビデオ:

 

1.  プロジェクトの作成


準備: SAP Document Center からサンプルファイルをダウンロードしてください。ダウンロードできない場合は、Send a Direct Mesage で関原宛に連絡してください。

BUILD にログイン:https://www.build.me/splashapp/

WORKSPACE -> Projects -> New Project -> CREATE NEW PROJECT




画面のプロトタイプを作成します。



 



2.  画面フロー、画面テンプレートの指定


 

今回の HappyKids のアプリは3画面あり、タブレットとスマホでの利用がメインになります。

Page 1 - Responsive

Page 2 - Object Page

Page 3 - Responsive



右上の + アイコンで から Page 2 - Object Page、Page 3 - Responsive をそれぞれ追加します。



 



3.  オブジェクト・モデル、データのインポート


Page1を選択すると、プロト作成ツールが立ち上がります。



左上にコントロールの一覧、左下に階層化されたアウトライン、右側にプロパティが配置されています。

最初はツールになれないのでミスしますが、UnDo ボタンを覚えておきましょう。

 

左上の DATA を選択してあらかじめ作成しておいたデータ・モデルをインポートします。



サンプルデータ をダウンロードして使ってくださいください。ProductCatalog_Sample.zip を展開してProductCatalog_Sample.xlsx をインポートします。

ヒント:メタデータはプログラム内で使われるので英語で定義しておきましょう。



 



4.  Page 1 の作成


 

最終的な出来上がりのイメージ、アウトラインはこのようになります。



各オブジェクトの階層関係を頭に入れておくと作業がスムーズです。

RESPONSIVE PAGE

-> TABLE

-> RAW

-> CELL


4.1  RESPONSIVE PAGE の設定




Responsive Page Title を選択して商品リストに書き換えます。

Show Footer をオフ。



次に RESPONSIVE PAGE の下に テーブル・コントロールを配置します。左のCONTROLSタブでListのグループからTableコントロールをドラック&ドロップします。


4.2  TABLE の設定


左側のOUTLINEでTableが選択されている事を確認します。



右側のPROPERTIESで以下の設定を行います。

  • 行がクリックされたら次のページへ行く

  • Columns を5列に (2 Column 追加)

  • Raw を1行に(2行削除)


出来上がり:


4.3 RAW-CELL の設定


以下の作業を5セル分繰り返します。

左側のOUTLINEでTableが選択されている事を確認します。



Table が選択されている事を確認。



次に1行目を選択。RAWオブジェクトを編集中である事を確認。



自動設定された最初の3つのCellを削除します。

Before:                                           After:

 

5つのCellがあるので以下を設定していきます。

  1. 画像 - Image

  2. 商品 - Item Identifier

  3. 価格 - Item Number

  4. 在庫 - Text

  5. 評価 - Rating Indicator


1つ目のCellを選択。Cellの下に Content=Imageを追加。



同様に繰り返します。

Table 選択 -> RAW選択 -> CELL 選択 -> 上記の残り4つのCellを設定。

このような画面になります。



各ラベルテキストを何回かクリックして、テキストを変更します。


4.4 データバインド


テーブルにデータをバインドします。


このような画面になります。



次はCell レベルのデータバインドです。

Table 選択 -> RAW選択 -> CELL 選択 -> 以下を設定

  1. 画像 - Image

  2. 商品 - Item Identifier (Item Identifier.Text = ID + Item Identifier.Title = Name)

  3. 価格 - Item Number (Number.Number = Price + Item Number.Unit = Currency)

  4. 在庫 - Text (Text.Text = Pieces)

  5. 評価 - Rating Indicator (Rating Indicator.Value = AvgRating)




 



5.  サンプル画像のインポート


 

以下の名前でサンプル画像をインポートします。ドラッグ&ドロップでFILES領域にインポートします。






 



これで Page 1 は完成です。

 

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