実習ラボ 5 – 外部データ

このラボでは、外部データ ソースを追加します。

学習する内容

  • キャンバス アプリに SharePoint リストを追加する方法
  • コレクションの使用方法
  • Patch の使用方法
  • Office365Users コネクタの使用方法

ラボ手順の概要

  • Bookings 用の SharePoint リストを作成する
  • SharePoint リストをギャラリーとして追加する
  • ギャラリーから選択したレコードを保存する
  • Patch を使って予約要求に対する決定を設定する
  • Office365User コネクタを使ってユーザーの詳細を表示します。

前提条件

  • 「ラボ 4: UI を構築する」を終了している必要があります

詳細な手順

演習 1 - SharePoint リストを作成する

タスク 1.1 SharePoint サイトを作成する

  1. Power Apps 作成者ポータル (https://make.powerapps.com) で、ブラウザー ウィンドウの左上にある [アプリ起動ツール] を選んで、[SharePoint] を選びます。

  2. [SharePoint スタート ページへようこそ] ポップアップ ダイアログが表示される場合は、[✖] を選んでダイアログを閉じます。

  3. SharePoint で、[+ サイトの作成] を選びます。

  4. [チーム サイト] を選び、[Standard team] テンプレートを選んで、[テンプレートの使用] を選びます。

  5. [サイト名] に「Pet boarding」と入力して、[次へ] を選びます。

  6. サイトの作成を選択します。

  7. [完了] を選びます。

  8. [Start designing your site] (サイトの設計を開始する) ポップアップ ダイアログが表示される場合は、ダイアログを閉じます。

タスク 1.2 SharePoint リストを作成する

  1. SharePoint サイトで、[+ 新規] を選び、[リスト] を選びます。

    新しい SharePoint リストのスクリーンショット。

  2. [空白のリスト] を選びます

  3. [名前] に「Bookings」と入力して、[作成] を選びます。

  4. [+ 列の追加] を選び、[テキスト] を選び、[次へ] を選びます。

  5. [列の作成] ペインで、次の値を入力するか選びます。

    1. 名前: Pet Name
    2. データ型:1 行のテキスト

  6. [保存] を選択します。

  7. [+ 列の追加] を選び、[テキスト] を選び、[次へ] を選びます。

  8. [列の作成] ペインで、次の値を入力するか選びます。

    1. 名前: Owner Name
    2. データ型:1 行のテキスト

  9. [保存] を選択します。

  10. [+ 列の追加] を選び、[日付と時刻] を選び、[次へ] を選びます。

  11. [列の作成] ペインで、次の値を入力するか選びます。

    1. 名前: Start Date
    2. データ型:日付と時刻

  12. [保存] を選択します。

  13. [+ 列の追加] を選び、[日付と時刻] を選び、[次へ] を選びます。

  14. [列の作成] ペインで、次の値を入力するか選びます。

    1. 名前: End Date
    2. データ型:日付と時刻

  15. [保存] を選択します。

  16. SharePoint サイトの URL の最初の部分をコピーします (例: https://m365x99999999.sharepoint.com/sites/Petboarding/)

演習 2 – キャンバス アプリに SharePoint リストを追加する

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

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

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

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

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

タスク 2.2 - SharePoint をデータ ソースとして追加する

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

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

    データ ソースとして SharePoint を選択するスクリーンショット。

  3. SharePoint を選択します。

  4. [直接接続 (クラウド サービス)] を選択し、[接続] を選択します。

  5. このラボで前に作成した SharePoint サイトの URL を入力します。

    SharePoint サイトに接続するスクリーンショット。

  6. [接続] を選択します。

  7. [Bookings] を選択します。

    SharePoint リストに接続するスクリーンショット。

  8. [接続] を選択します。

タスク 2.3 - SharePoint リストのギャラリーを追加する

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

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

  3. データ ソースに [Bookings] を選択します。

  4. [レイアウト] に [タイトルとサブタイトル] を選択します。

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

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

  7. [サブタイトル 3] で [開始日] を選びます。

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

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

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

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

    1. X=1000
    2. Y=80
    3. 高さ=575
    4. Width=250

演習 3 – コレクション

タスク 3.1 コレクションの作成

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

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

  3. [NextArrow] を選択します。

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

     Collect(colRequests, ThisItem)

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

  6. アプリ オブジェクトを選択します。

  7. 数式バーで OnStart プロパティを次の値に設定します。

     Clear(colRequests)

演習 4 – Patch

タスク 4.1 予約要求を拒否する

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

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

  3. ギャラリー コントロールの左上にある鉛筆アイコンを選択します。

    ギャラリーの編集のスクリーンショット。

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

  5. [アイコン] を展開します。

  6. [ブロック] を選択します。 アイコンがギャラリーの各行に追加されます。

  7. 数式バーでアイコンのプロパティを次のように設定します。

    1. X=150
    2. Y=40
    3. 高さ=30
    4. 幅=30

    ギャラリーの編集のスクリーンショット。

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

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

  10. 数式バーで DeclineIcon の OnSelect プロパティを次の値に設定します。

     Patch('Booking Requests', ThisItem, {Decision: 'Decision (Booking Requests)'.Declined})

演習 5 – Office 365 ユーザー

タスク 5.1 Office 365 ユーザーをデータ ソースとして追加する

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

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

  3. Office 365 ユーザーを選択します。

  4. [接続] を選択します。

タスク 5.2 ユーザーの国を表示する

  1. ギャラリーの外側の空のキャンバスを選ぶか、[ツリー ビュー] で MainScreen を選びます。

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

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

  4. 画面の右上、UserLabel の横にラベルをドラッグします。

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

  6. ラベルの名前を UserDetailsLabel に変更します。

  7. 数式バーで UserDetailsLabel の Text プロパティを次の値に設定します。

     Office365Users.MyProfile().Country

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

    1. X=930
    2. Y=20
    3. サイズ=18
    4. 色=Color.White

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

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