実習ラボ 6 - フォーム

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

学習する内容

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

ラボ手順の概要

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

前提条件

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

詳細な手順

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

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

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

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

3. 左側のナビゲーション メニューから [アプリ] タブを選択します。

4. [予約要求アプリ]、コマンド (…)、[編集] > [新しいタブで編集] の順に選択します。

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

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

2. Power Apps Studio のアクション バーで、[新しい画面] を選択します。

   

3. 空白を選択します。

4. 画面の名前を EditScreen に変更します。

5. Power Apps Studio のアクション バーで、[新しい画面] を選択します。

6. [ヘッダーとフッター] を選択します。

7. 画面の名前を DetailScreen に変更します。

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

1. [ツリー ビュー] で、[MainScreen] の [BookingRequestList] を展開します。

2. [BookingRequestList] の [NextArrow] を選択します。

3. 数式バーで NextArrow の [OnSelect] プロパティを次の値に設定します。

    Collect(colRequests, ThisItem);Navigate(DetailScreen, ScreenTransition.Cover);
   

4. [EditScreen] を選択します。

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

6. [Icons] を展開します。

7. 戻る矢印を選択します。

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

    Back()
   

9. ツリー ビューでアイコン、コマンド (…)、[コピー] の順に選択します。

10. [DetailScreen] を展開します。

11. [ScreenContainer] を展開ます。

12. [HeaderContainer]、コマンド (…)、[貼り付け] の順に選択します。

演習 2 – 詳細画面

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

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

2. [DetailScreen] を展開します。

3. [ScreenContainer1] を展開します。

4. [MainContainer1] を選択します。

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

6. [入力] を展開します。

7. [表示フォーム] を選択します。

   

8. FormViewer のプロパティで、[データ ソース] の [予約要求] を選択します。

9. [フィールド] の横にある [8 件選択済み] を選択します。

   

10. フィールドの横にある省略記号 ([…]) を選択し、[削除] を選択して、[状態] フィールドと [メモ] フィールドを削除します。

11. [+ フィールドの追加] を選択し、次のフィールドを選択します。

    1. Decision

    

12. [追加] を選択します。

13. 次のフィールドを次の順序にドラッグします。

    1. ペットの名前
    2. 所有者名
    3. 所有者のメール
    4. 開始日
    5. 終了日
    6. Decision
    7. コスト

    

14. [フィールド] ペインを閉じます。

15. 数式バーでフォーム　ビューアー コントロールの [アイテム] プロパティを次の値に設定します。

     BookingRequestList.Selected
    

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

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

2. [DetailScreen] を展開します。

3. [ScreenContainer1] を展開します。

4. [FooterContainer1] を選択します。

5. フッター コンテナー内で + を選択します。

   

6. [テキスト ラベル] を選択します

7. ラベルの Text プロパティを次の値に設定します。

    BookingRequestList.Selected.'Pet Name'
   

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

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

2. [DetailScreen] を展開します。

3. [ScreenContainer1] を展開します。

4. [FooterContainer1] を選択します。

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

6. ボタン を選択します。

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

8. ボタンの名前を Deletebtn に変更します。

9. ボタンの Text プロパティを次の値に設定します。

    "Delete"
   

10. ボタンの OnSelect プロパティを次のように設定します。

     Remove('Booking Requests', BookingRequestList.Selected); Back();
    

演習 3 - 編集画面

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

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

2. [EditScreen] を選択します。

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

4. [編集フォーム] を選択します。

5. フォームのプロパティで、[データ ソース] の [予約要求] を選択します。

6. [フィールド] の横にある [8 件選択済み] を選択します。

7. フィールドの横にある省略記号 ([…]) を選択し、[削除] を選択して、[決定] と [メモ] を削除します。

8. 次のフィールドを次の順序にドラッグします。

   1. ペットの名前
   2. 所有者名
   3. 所有者のメール
   4. 開始日
   5. 終了日
   6. コスト

9. [フィールド] ペインを閉じます。

10. フォーム コントロールの Item プロパティを次の値に設定します。

     BookingRequestList.Selected
    

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

12. フォームの名前を BookingRequestForm に変更します。

13. フォームのプロパティを次のように設定します。

    1. X = 0
    2. Y = 125
    3. 高さ=500
    4. Width = Parent.Width
    5. Columns = 1
    6. Layout = Horizontal

    

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

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

2. [EditScreen] を選択します。

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

4. ボタン を選択します。

5. ボタンをフォームの下にドラッグします。

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

7. ボタンの名前を Submitbtn に変更します。

8. ボタンの Text プロパティを次の値に設定します。

    "Submit"
   

9. ボタンの OnSelect プロパティを次のように設定します。

    SubmitForm(BookingRequestForm)
   

10. [BookingRequestForm] を選択します。

11. フォームの OnSuccess プロパティを次の値に設定します。

     Navigate(MainScreen, ScreenTransition.UnCover)
    

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

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

2. [DetailScreen] を展開します。

3. [ScreenContainer] を展開ます。

4. [HeaderContainer] を選択します。

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

6. [Icons] を展開します。

7. 編集を選択します。

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

9. アイコンの名前を EditIcon に変更します。

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

     Navigate(EditScreen, ScreenTransition.Cover)
    

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

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

2. [MainScreen] を選択します。

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

4. [Icons] を展開します。

5. [追加] を選択します。

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

7. アイコンの名前を NewIcon に変更します。

8. アイコンのプロパティを次のように設定します。

   1. X = 0
   2. Y=0
   3. 高さ=80
   4. Width = 80
   5. Color = Color.White

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

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

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

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