演習ラボ 3 – キャンバス アプリを作成する

このラボでは、何もないところからキャンバス アプリを設計して構築し、データ ソースとギャラリーを追加します。

学習する内容

  • データ ソースにリンクされたギャラリーを使用してキャンバス アプリを作成する方法
  • Power Fx 数式を使用してフィールドをフォーマットする方法

ラボ手順の概要

  • キャンバス アプリを一から作成する
  • アプリにデータ ソースを追加する
  • アプリにギャラリーを追加する
  • ギャラリー内のフィールドを構成する

前提条件

  • 以下を完了している必要があります。「ラボ 2: データ モデル」

詳細な手順

演習 1 - キャンバス アプリを作成する

タスク 1.1 - アプリを作成する

  1. Power Apps 作成者ポータル (https://make.powerapps.com) に移動します

  2. Dev One 環境にいることを確認します。

  3. 左側のナビゲーション メニューから [+ 作成] タブを選びます。

  4. [開始] の下にある [空のアプリ] タイルを選択します。

  5. [空のキャンバス アプリ] タイルの下にある [作成] を選択します。

    何もないところからの作成のスクリーンショット。

  6. [アプリ名] には Booking Request app を入力します。

  7. [形式] では [タブレット] を選択します。

    新しいアプリ名のスクリーンショット。

  8. ［作成］ を選択します

  9. アプリが構築されるのを待ちます。

  10. Power Apps Studio の右上にある [保存] を選択します。

タスク 1.2 - データ ソースを追加する

  1. アプリの作成メニューで データ を選択します。

    [データ] ペインのスクリーンショット。

  2. [データの追加] の横にあるドロップダウン キャレットを選択し、[検索] に Booking と入力します。

    データ ソースの選択のスクリーンショット。

  3. [Booking Requests] Microsoft Dataverse テーブルを選択します。

タスク 1.3 - メイン画面を構成する

  1. アプリの作成メニューで、[ツリー ビュー] を選択します。

  2. ツリー ビューで [Screen1] を選択し、省略記号 ([…]) を選択し、[名前の変更] を選択してください。

  3. 「MainScreen」と入力します。

  4. アプリの作成メニューで、[挿入 (+)] を選択します。

  5. [四角形] を選択します。

  6. 四角形を画面の左上にドラッグします。

  7. アプリの作成メニューで、[ツリー ビュー] を選択します。

  8. 四角形の名前を HeaderRect に変更します。

  9. 数式バーで四角形のプロパティを次のように設定してください。

    1. X=0
    2. Y=0
    3. 高さ=80
    4. 幅=Parent.Width

  10. アプリの作成メニューで、[挿入 (+)] を選択します。

  11. テキスト ラベルを選択します。

  12. ラベルを画面の左上にドラッグします。

  13. アプリの作成メニューで、[ツリー ビュー] を選択します。

  14. ラベルの名前を HeaderLabel に変更します。

  15. 数式バーでラベルのプロパティを以下のように設定してください。

    1. X=0
    2. Y=0
    3. 高さ=80
    4. 幅=Parent.Width
    5. 配置=Align.Center
    6. サイズ=24
    7. テキスト="Booking Request"
    8. 色=Color.White

    ヘッダーを持つメイン画面のスクリーンショット。

  16. Power Apps Studio の右上にある [保存] を選択します。

タスク 1.4 - ギャラリーを追加する

  1. アプリの作成メニューで、[挿入 (+)] を選択します。

  2. 垂直ギャラリーを選択します。

    ギャラリーの追加のスクリーンショット。

  3. データ ソースの [予約要求] を選択してください。

    ギャラリーのプロパティのスクリーンショット。

  4. [プロパティ] タブの [レイアウト] で、[タイトル、サブタイトル、本文] を選びます。

  5. [フィールド] の横にある [7 件選択済み] を選びます。

  6. [本文 1] で [コスト] を選びます。

  7. [サブタイトル 2] で [決定] を選びます。

  8. [タイトル 2] で [ペットの名前] を選びます。

    ギャラリー フィールドのスクリーンショット。

  9. データ ウィンドウを閉じます。

  10. アプリの作成メニューで、[ツリー ビュー] を選択します。

  11. ギャラリーの名前を BookingRequestList に変更します。

  12. 数式バーでギャラリーのプロパティを次のように設定してください。

    1. X=0
    2. Y=80
    3. 高さ=575
    4. 幅=250

タスク 1.5 - 通貨フィールドをフォーマットする

  1. アプリの作成メニューで、[ツリー ビュー] を選択します。

  2. BookingRequestList ギャラリーを展開します。

  3. [本文 1] を選びます。

    選択された本文フィールドのスクリーンショット。

  4. 数式バーの Text プロパティを数式に設定してください。

     Text(Value(ThisItem.Cost), "$#,##0.00")

  5. Power Apps Studio の右上にある [保存] を選択します。

  6. コマンド バーの左上にある [<- 戻る] ボタン、[終了] の順に選択し、アプリを終了します。