演習 - キャンバス アプリで外部データを使用する

完了

この演習では、キャンバス アプリで外部データを使用します。

この演習を完了するには、スプレッドシート をダウンロードする必要があります。 リンクが表示されたら、[ダウンロード] を選択します。 Excel スプレッドシートを抽出し、スプレッドシートを自分の OneDrive にアップロードします。

データ ソースの追加

  1. Power Apps にサインインします。

  2. 新しい Power Apps のキャンバス アプリを一から作成し、それを ExternalData と名付けます。 タブレット 形式を選択します。

  3. この Excel シート (上記のリンク) が OneDrive に追加されていることを確認します。

  4. 挿入 タブで ギャラリー を選択し、縦方向のギャラリーのオプションを選択します。

  5. 右側のプロパティ ペインで、Data source プロパティのドロップダウン メニューを選択します。

  6. 検索ボックスに OneDrive for Business と入力し、一覧から OneDrive for Business を選択します。 また、コネクタを展開して、OneDrive for Business コネクタが見つかるまで、使用可能なすべてのコネクタをスクロールすることもできます。

  7. + 接続の追加 を選択します。

  8. OneDrive for Business の下部にある 接続 をクリックします。

  9. Excel ファイルの選択 を求められたら、手順 3 でダウンロードした Excel ファイルの保存場所に移動して選択します。

  10. Items テーブルを確認してから、接続 をクリックします。

OneDrive for BusinessExcel テーブルに接続したので、Gallery コントロールにデータを表示できます。

ギャラリーにデータを表示して操作する

  1. 追加したギャラリーをクリックします。

  2. 右側のプロパティ ペインで、Layout プロパティのドロップダウン メニューを選択します。

  3. イメージ、タイトル、サブタイトル、本文 のレイアウトを選択します。

  4. 右側のプロパティ ペインで、Fields プロパティの [編集] を選択し、次の点を設定します。

    • Body1: 説明

    • Image2: イメージ

    • Subtitle2: 単価

    • Title2: 名前

  5. データ の右側にある X をクリックして終了します。

  6. ギャラリーで、最初の行の価格をクリックします。

  7. 数式バーで、[テキスト] が選択されていることを確認して、次のように入力します。

    "$" & ThisItem.UnitPrice
    
  8. ギャラリーで、最初の行のイメージをクリックします。

  9. 右側のプロパティ ペインで、Image Position プロパティのドロップダウン メニューを選択します。

  10. 画面サイズに合わせる をクリックすると、領域がイメージで埋め尽くされます。

これで、ギャラリー内のデータの構成と操作が完了しました。

コレクションとデータ ソースの間でデータを移動する

  1. 挿入 タブで、ボタン を選択し、ギャラリーの下にボタンを配置します。

  2. ボタン上のテキストを コレクションに追加 に変更します。

  3. ボタンをクリックして、数式バーで false を次の式に置き換えます。

    Collect(ItemsCollection, Items)
    

    ItemsCollection: コレクション名を示します。

    Items: データ ソース名を示します。

    Collect - Items から ItemsCollection コレクションにすべてのレコードをコピーします。

  4. アプリを実行します。 ボタンをクリックします。 アプリの実行を停止します。

  5. 表示 タブで、コレクション を選択してから、ItemsCollection を選択します。 Items データ ソースのすべてのレコードが ItemsCollection コレクションに追加されていることがわかります。

次に、コレクションで使用できる他の機能を確認します

  1. 挿入 タブで 新規画面 を選択してから、空白 をクリックします。

  2. 挿入 タブで、データ テーブル を選択し、ギャラリーの横に配置します。

  3. 数式バーで Items が選択されていることを確認してから、次の式を入力します。

    品目コレクションの構文のスクリーンショット。

    これは、テーブルのデータ ソースが Excel シートの Items テーブルではなく、ItemsCollection コレクションであることを意味します。

  4. 右側のプロパティ ペインで、Fields プロパティの フィールドの編集 を選択します。

  5. + フィールドの追加 をクリックします。

  6. 使用できるすべてのフィールドを選択してから、追加 をクリックします。

  7. データ の右側にある X をクリックして終了します。

  8. 挿入 タブで ボタン を選択し、テーブルの下にボタンを配置します。 このプロセスを 4 回繰り返します。

  9. 4 つのボタンすべてのテキストをそれぞれ 列の追加、列の削除、列の表示、列の名前の変更 に変更します。

  10. 列の追加 ボタンを選択します。

  11. 数式バーを次の式に更新します。

    Collect(AddCollection, AddColumns(ItemsCollection, "Revenue", UnitPrice * UnitsSold))
    

    ここでは、追加コレクション という新しいコレクションを作成し、このコレクションで、ItemsCollection コレクションのすべてのデータをコピーしますが、さらに、AddColumns 関数を使用して *売上という新しい列を追加します。この列は、単価 * 販売個数として計算されます。

  12. 列の削除 を選択します。

  13. 数式バーを次の式に更新します。

    Collect(DropCollection, DropColumns(ItemsCollection, "UnitPrice"))
    

    ここでは、DropCollection という新しいコレクションを作成し、このコレクションで ItemsCollection コレクションのすべてのデータをコピーしますが、さらに、DropColumns 関数を使用して単価列を削除します。

  14. 列の名前の変更 を選択します。

  15. 数式バーを次の式に更新します。

    Collect(RenameCollection, RenameColumns(ItemsCollection, "Name", "Product"))
    

    ここでは、RenameCollection という新しいコレクションを作成し、このコレクションで ItemsCollection コレクションのすべてのデータをコピーしますが、さらに、RenameColumns 関数を使用して 名前 列の名前を 製品 に変更します。

  16. 列の表示 を選択します。

  17. 数式バーを次の式に更新します。

    Collect(ShowCollection, ShowColumns(ItemsCollection, "Name"))
    

    ここでは、ShowCollection という新しいコレクションを作成し、このコレクションで ItemsCollection コレクションのすべてのデータをコピーしますが、さらに、ShowColumns 関数を使用して 名前 列のみを表示します。

  18. アプリを実行します。 4 つのボタンをすべてクリックします。 アプリの実行を停止します。

  19. 表示 タブで、コレクション を選択してから、作成した追加のコレクションを選択して、関数がどのように影響したかを確認します。

Patch 関数の使用

  1. 左側の ツリー ビュー パネルで、Screen 1 をクリックして最初の画面に戻ります。 パッチ機能付きツリー ビュー ギャラリーのスクリーンショット。

  2. 挿入 タブで、ラベル を選択してから、ラベル名を 名前 に変更します。 次に、ラベルをギャラリーの横に配置します。

  3. 今回と同じ手順を繰り返します。その後、ラベル名を 新しい説明 に変更します。

  4. 挿入 タブで、入力 を選択してから、Text Input を選択します。 このステップを繰り返して、上で作成したラベルの横に両方の [Text Input] を配置します。 画面は次のようになります。

    テキスト付き最終出力フォーム レイアウトのスクリーンショット。

  5. 挿入 タブで、ボタン を選択して、ラベルの下にボタンを配置します。 ボタンのテキストを 更新 に変更します。

  6. 名前 ラベルの横にある [Text Input] をクリックします。

  7. 数式バーで、Default プロパティが選択されていることを確認してから、式を次のように変更します。

    数式バーからの既定のプロパティ式のスクリーンショット。

    これにより、ギャラリーで選択するたびに、[日付ソース] レコードの Name プロパティが表示されます。 これをテストするには、アプリケーションを実行してギャラリーで各 Items をクリックし、クリックするたびに入力のテキストが変わることを確認します。

  8. [新しい説明] ラベルの横にある [Text Input] について、ステップ 6 と 7 を繰り返します。 数式バーの式は、次のように表示されます。

    既定のギャラリー式ラベルのスクリーンショット。

  9. 更新 をクリックします。

  10. 数式バーを次の式に更新します。

    Patch(Items,First(Filter(Items, Name = TextInput1.Text)), { Description: TextInput2.Text })
    

完了した内容を要約しましょう。

Patch - データ ソースのレコードを 変更 または作成することができます。

First(Filter...) - データソースを名前でフィルター処理するために使用します。 この名前は、TextInput1 という名前の [Text Input] から取得されます。 [Text Input] の名前を変更した場合は、それに応じて式を更新する必要があります。

一致するレコードが見つかると、新しい説明 のテキスト入力で書き込んだ内容に基づいて説明が更新されます。

アプリケーションを実行して、これをテストします。 ギャラリーのいずれかの品目を選択して説明を編集します。 更新 を選択します。 ギャラリーの説明が新しい説明に変わります。