実習ラボ 6 - フォーム

このラボでは、フォームを使用してデータソースでレコードを作成し編集します。

学習する内容

画面を追加する方法
スクリプト間を移動する方法
フォームを使用してデータソースでレコードを作成する方法
フォームを使用してデータソースでレコードを編集する方法
データソースからレコードを削除する方法
フォームをギャラリーにリンクする方法

ラボ手順の概要

新しい画面を作成する
ギャラリーでレコードが選択されているときに画面に移動する
スクリプト間を移動する
フォームを使用してレコードを表示する
レコードを削除する
フォームを使用してレコードを編集する
フォームを使用して新しいレコードを作成する

前提条件

以下を完了している必要があります: 「ラボ 5: 外部データ」

詳細な手順

演習 1 – 画面とナビゲーションを追加する

タスク 1.1 - アプリを編集する

Power Apps 作成者ポータル (https://make.powerapps.com) に移動します
Dev One 環境にいることを確認します。
左側のナビゲーションメニューから [アプリ] タブを選択します。
[予約要求アプリ]、コマンド (…)、[編集] > [新しいタブで編集] の順に選択します。

タスク 1.2 - 画面を追加する

アプリの作成メニューで、[ツリービュー] を選択します。
Power Apps Studio のアクションバーで、[新しい画面] を選択します。
空白を選択します。
画面の名前を EditScreen に変更します。
Power Apps Studio のアクションバーで、[新しい画面] を選択します。
[ヘッダーとフッター] を選択します。
画面の名前を DetailScreen に変更します。

タスク 1.3 - ナビゲーションを追加する

[ツリービュー] で、[MainScreen] の [BookingRequestList] を展開します。
[BookingRequestList] の [NextArrow] を選択します。
数式バーで NextArrow の [OnSelect] プロパティを次の値に設定します。
```
 Collect(colRequests, ThisItem);Navigate(DetailScreen, ScreenTransition.Cover);
```
[EditScreen] を選択します。
アプリの作成メニューで、[挿入 (+)] を選択します。
[Icons] を展開します。
戻る矢印を選択します。
アイコンの OnSelect プロパティを次の値に設定します。
```
 Back()
```
ツリービューでアイコン、コマンド (…)、[コピー] の順に選択します。
[DetailScreen] を展開します。
[ScreenContainer] を展開ます。
[HeaderContainer]、コマンド (…)、[貼り付け] の順に選択します。

演習 2 – 詳細画面

タスク 2.1 - 表示フォームを追加する

アプリの作成メニューで、[ツリービュー] を選択します。
[DetailScreen] を展開します。
[ScreenContainer1] を展開します。
[MainContainer1] を選択します。
アプリの作成メニューで、[挿入 (+)] を選択します。
[入力] を展開します。
[表示フォーム] を選択します。
FormViewer のプロパティで、[データソース] の [予約要求] を選択します。
[フィールド] の横にある [8 件選択済み] を選択します。
フィールドが次の順序で配置されるように、フィールドを追加または削除します。
1. ペットの名前
2. 所有者名
3. 所有者のメール
4. 開始日
5. 終了日
6. Decision
7. コスト
[フィールド] ペインを閉じます。
数式バーでフォーム　ビューアーコントロールの [アイテム] プロパティを次の値に設定します。
```
 BookingRequestList.Selected
```

タスク 2.2 - ラベルを追加する

アプリの作成メニューで、[ツリービュー] を選択します。
[DetailScreen] を展開します。
[ScreenContainer1] を展開します。
[FooterContainer1] を選択します。
フッターコンテナー内で + を選択します。
[テキストラベル] を選択します
ラベルの Text プロパティを次の値に設定します。
```
 BookingRequestList.Selected.'Pet Name'
```

タスク 2.3 - 削除ボタンを追加する

アプリの作成メニューで、[ツリービュー] を選択します。
[DetailScreen] を展開します。
[ScreenContainer1] を展開します。
[FooterContainer1] を選択します。
アプリの作成メニューで、[挿入 (+)] を選択します。
ボタン を選択します。
アプリの作成メニューで、[ツリービュー] を選択します。
ボタンの名前を Deletebtn に変更します。
ボタンの Text プロパティを次の値に設定します。
```
 "Delete"
```
ボタンの OnSelect プロパティを次のように設定します。
```
 Remove('Booking Requests', BookingRequestList.Selected); Back();
```

演習 3 - 編集画面

タスク 3.1 - 編集フォームを追加する

アプリの作成メニューで、[ツリービュー] を選択します。
[EditScreen] を選択します。
アプリの作成メニューで、[挿入 (+)] を選択します。
[編集フォーム] を選択します。
フォームのプロパティで、[データソース] の [予約要求] を選択します。
[フィールド] の横にある [8 件選択済み] を選択します。
フィールドが次の順序で配置されるように、フィールドを追加または削除します。
1. ペットの名前
2. 所有者名
3. 所有者のメール
4. 開始日
5. 終了日
6. コスト
[フィールド] ペインを閉じます。
フォームコントロールの Item プロパティを次の値に設定します。
```
 BookingRequestList.Selected
```
アプリの作成メニューで、[ツリービュー] を選択します。
フォームの名前を BookingRequestForm に変更します。
フォームのプロパティを次のように設定します。
1. X = 0
2. Y=125
3. 高さ=500
4. Width = Parent.Width
5. Columns = 1
6. Layout = Horizontal

タスク 3.2 - 送信ボタンを追加する

アプリの作成メニューで、[ツリービュー] を選択します。
[EditScreen] を選択します。
アプリの作成メニューで、[挿入 (+)] を選択します。
ボタン を選択します。
ボタンをフォームの下にドラッグします。
アプリの作成メニューで、[ツリービュー] を選択します。
ボタンの名前を Submitbtn に変更します。
ボタンの Text プロパティを次の値に設定します。
```
 "Submit"
```
ボタンの OnSelect プロパティを次のように設定します。
```
 SubmitForm(BookingRequestForm)
```
[BookingRequestForm] を選択します。
フォームの OnSuccess プロパティを次の値に設定します。
```
 Navigate(MainScreen, ScreenTransition.UnCover)
```

タスク 3.3 - 編集画面にナビゲーションを追加する

アプリの作成メニューで、[ツリービュー] を選択します。
[DetailScreen] を展開します。
[ScreenContainer] を展開ます。
[HeaderContainer] を選択します。
アプリの作成メニューで、[挿入 (+)] を選択します。
[Icons] を展開します。
編集を選択します。
アプリの作成メニューで、[ツリービュー] を選択します。
アイコンの名前を EditIcon に変更します。
アイコンの OnSelect プロパティを次の値に設定します。
```
 Navigate(EditScreen, ScreenTransition.Cover)
```

タスク 3.4 - 新しいレコード

アプリの作成メニューで、[ツリービュー] を選択します。
[MainScreen] を選択します。
アプリの作成メニューで、[挿入 (+)] を選択します。
[Icons] を展開します。
[追加] を選択します。
アプリの作成メニューで、[ツリービュー] を選択します。
アイコンの名前を NewIcon に変更します。
アイコンのプロパティを次のように設定します。
1. X = 0
2. Y=0
3. 高さ=80
4. Width = 80
5. Color = Color.White

アイコンの OnSelect プロパティを次の値に設定します。

 NewForm(BookingRequestForm);Navigate(EditScreen, ScreenTransition.Cover)

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