Skip to Content

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 ハンズオン – まとめ

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Yasuhiro Kawaguchi

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

    (0) 
    1. Masayuki Sekihara Post author

      有効期限延長しました。

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

      (0) 
      1. Aiko Ishijima

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

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

        (0) 

Leave a Reply