Skip to Content
Author's profile photo Masayuki Sekihara

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

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

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

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

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

 

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

 

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

Page 1 – Responsive

Page 2 – Object Page

Page 3 – Responsive

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

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

 

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

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

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

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

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

 

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

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

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

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

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

 

4.  Page 1 の作成

 

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

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

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

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領域にインポートします。

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

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

 

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

これで Page 1 は完成です。

 

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

Assigned tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      サンプルデータのダウンロードをしたいのですが、リンク先の有効期限が切れていると表示されます。ダウンロードできるようにしていただけませんか?

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      有効期限延長しました。

      新しいバージョンのBUILDで、このデータをテストしていないですが、演習をやってみて結果を教えてください。 画面、手順は変わっていますが、データはそのまま使えると思います。

      Author's profile photo Former Member
      Former Member

      サンプルデータをダウンロードさせていただきたいのですが、有効期限が切れてしまっています。

      再度、有効期限を延長していただけないでしょうか。

      Author's profile photo Masayuki Sekihara
      Masayuki Sekihara
      Blog Post Author

      有効期限延長しました。確認してください。

      Author's profile photo Former Member
      Former Member

      ありがとうございます。ダウンロードさせていただきました。

      Author's profile photo George Hayes
      George Hayes

      Great blog! I'm going to link it to our BUILD SCN Page. I'll work on getting a working link with sample data in the near term. I'll post it here in the comments.