実習ラボ 2 - キャンバスアプリを作成する

予測される所要時間: 45 分

ラボの目的

このラボでは、次のことを学びます。

事前構築済みのテンプレートからキャンバスアプリを作成する
Power Apps Studio のインターフェイスと主要なコンポーネントについて調べる
空白の画面からシンプルなキャンバスアプリを作成する
ギャラリー、フォーム、ラベル、ボタンなどのコントロールを追加する
キャンバスアプリをデータソースとして Dataverse テーブルに接続する
シナリオ

Contoso は、従業員が施設の要求を表示および申請するために使用できるモバイル対応アプリを必要としています。最初にテンプレートから構築されたアプリを調べてキャンバスアプリのしくみを理解してから、シンプルな要求申請アプリを最初から構築します。

演習 1: テンプレートからアプリを作成する

この演習では、組み込みのテンプレートの 1 つからキャンバスアプリを作成して、完成したアプリの構造を簡単に確認します。

<Https://make.powerapps.com> に移動してサインインします。
ホーム画面の、左側のナビゲーションウィンドウで [+ 作成] を選択します。
[データから開始] セクションで、[ファイルのアップロード] を選択します。
[Excel ファイルのアップロード] 画面で、[デバイスから選択] ボタンを選択します。
[クラスファイル] から、[Room Reservations.xlsx] を見つけて開きます。

[!NOTE] [Room Reservations.zip] のみが表示される場合は、この ZIP ファイルを選択し、[すべて展開] を選択し、展開したフォルダーを開いて、[Room Reservations.xlsx] を選択します。

[先頭の行を列見出しとして使用する] が選択されていることを確認し、[アプリの作成] を選択します。

[!NOTE] [Power Apps Studio へようこそ] 画面が表示されたら、[今後このメッセージを表示しない] を選択し、[スキップ] ボタンを選択します。
アプリをテストするには、[再生] ボタンを選択します ([保存] ボタンの左側にあります)。**
新しいレコードを追加するには、[+ 新規] ボタンを選択します。
新しいレコードに次の情報を入力します。
- 必要な日付: 明日の日付
- 建物: Highpoint
- 期間: 4 時間
- 要求している従業員: あなたの名前
- ルーム: 502
- 開始時刻: 明日の午後 1 時
- 理由: トレーニングセッション
- 機器が必要かどうか: はい
[保存] ボタン (チェックマーク) を選択します
プレビューモードからアプリを閉じます ([X] ボタン)
[保存] ボタンを選択します。
[発行] ボタンを選びます。
[このバージョンの発行] ボタンを選択します

演習 2: キャンバスアプリを構築および編集する

次に、Dataverse データソースに接続された空白のキャンバスからシンプルな施設要求アプリを構築します。

タスク 1: アプリを作成してデータと接続する

<Https://make.powerapps.com> に移動します
ホーム画面の、左側のナビゲーションウィンドウで [+ 作成] を選択します。
[データから開始] セクションで、[Dataverse] を選択します。
[検索] フィールドに、テキスト「施設」を入力します。
[施設要求] テーブルを選択し、[アプリの作成] を選択します。

タスク 2: 施設要求アプリをカスタマイズする

キャンバスアプリの重要な要素の 1 つは、必要に応じてアプリケーションを変更できることです。アプリを変更して、ニーズに合わせて少し調整します。

このタスクでは、次のことを行います。

既存の要素を書式設定する
アプリにウェルカムメッセージを追加する
既存のフォームを変更する。
新しいルームを追加するための新しい画面を追加する。
新しいルーム画面に移動するボタンを追加する。
画面の右側にウェルカムユーザープロンプトを追加する。

まずは、ウェルカムメッセージとログインしているユーザー名が含まれるように、メイン画面をカスタマイズします。

施設要求の画面 (既定の画面) で、[施設要求] ヘッダーを選択します。
[+ 挿入] ドロップダウンメニューを選択してから、[テキストラベル] を選択します。
[テキストラベル] フィールドの [値] を「ようこそ」に設定します
[テキスト値] フィールドの書式を次のように設定します
- フォントサイズ: 16
- フォントの色: 白
- 背景色: 青
- テキストの配置: 右
- 高さ: 52
同じ項目を選択した状態で、[テキストラベル] フィールドをもう 1 つ挿入します。
[テキスト] プロパティを [User().FullName] に設定します
[テキスト値] フィールドの書式を次のように設定します
- フォントサイズ: 16
- フォントの色: 白
- 背景色: 青
- 配置: 右
- 高さ: 52
- 幅: 225
新しいヘッダーは、次の画像のようになります。

タスク 3: 新しいルーム画面を構築する

コマンドバーから [新しい画面] ボタンを選択し、[ヘッダーとフッター] 画面を選択します。
[ツリービュー] で、[Screen1] を選択し、名前を「新しいルーム画面」に変更します。
フォームヘッダーコンテナーで + を選択し、[テキストラベル] を選択します。
[テキスト] プロパティを「新しいルームの追加」に設定します
[テキスト値] フィールドの書式を次のように設定します
- フォントサイズ: 16
- フォントの色: 白
- 背景色: 青
- 配置: 右
- 高さ: 52
- 幅: 225
[ヘッダー] コンテナーを選択し、[背景] の色を [青] に設定します。
メインコンテナーで、[+ 挿入] を選択し、[編集フォーム] を選択します。
[検索] フィールドに「ルーム」と入力し、[ルーム] テーブルを選択します。
フォームに [インポートシーケンス番号]、[タイムゾーン規則のバージョン番号]、または [レコード作成日] が含まれている場合は、[ツリービュー] で各フィールドを選択し [削除] キーを押します。
フォームの [プロパティ] ペインで、[既定モード] を [新規] に設定します。
フォームは次の画像のようになります。

[!NOTE] フォームにフィールドがない場合は、フォームの [プロパティ] ペインの [フィールド] で [(x) 選択済み] を選択し、[+ フィールドの追加] を選択し、フォームにない列を選択します。

フォームの下部にある [フッター] を選択します。
[+ 挿入] を選択し、[ボタン] を選択します。
- ボタンの [テキスト] プロパティを "Submit" に設定します。
- ボタンの OnSelect プロパティを次の式に設定します:
```
SubmitForm(Form2); Navigate('Facility Requests screen')
```

フォーム送信の Power FX の数式を示すスクリーンショット

タスク 4: 画面間のナビゲーションを追加する

施設要求の画面に戻ります。
[RecordsGallery1] ギャラリーを選択します
コマンドバーで、[+ 挿入] を選択し、[ボタン] を選択します。
- ボタンの [テキスト] プロパティを "New Room" に設定します。
- ボタンの OnSelect プロパティを次の式に設定します:
```
NewForm(Form2); Navigate('New Room Screen')
```

タスク 5: アプリをテストする

[再生] ボタン (▶) をクリックして、アプリのプレビューを表示します。
次についてテストします。
- ギャラリーにサンプルデータが表示される。
- [+ 新規] を選択すると、空白のフォームが開きます。
- 新しい要求を入力し、[送信] をクリックすると保存される。
- ギャラリーでレコードを選択すると、その詳細が右側のフォームに表示されます。
プレビューを閉じてアプリを 施設要求アプリとして保存します ([ファイル] > [保存] または Ctrl + S)。

実習ラボ 2 - キャンバス アプリを作成する