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

  • 15 分

この演習では、アプリへのデータ ソースの追加、コレクションを使用したデータの作成や変更、Patch 関数を通じたデータの変更を行うことにより、キャンバス アプリで外部データを処理します。

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

データ ソースを追加する

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

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

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

  4. ヘッダー リボンの 挿入 ボタンで、垂直ギャラリー を選択します。

  5. ギャラリーのデータ ソースの選択ペインで、検索フィールドに「OneDrive」と入力し、一覧から OneDrive for Business を選択します。 または、コネクタを展開して、OneDrive for Business が見つかるまで、使用可能なコネクタをスクロールすることもできます。

    ギャラリーへの OneDrive データ ソースの追加のスクリーンショット。

  6. 接続の追加で、OneDrive for Business に使用する接続を選択します (メール アドレスがその下に一覧表示されます)。

  7. OneDrive for Business の下部にある 接続 を選択します。

  8. Excel ファイルの選択 を求められたら、手順 3 でダウンロードした Excel ファイルを検索するかそこまでスクロールし、選択します。

  9. テーブルの選択 パネルの下で、Items テーブルのチェックマークをオンにし、接続 を選択します。

    これで、ギャラリーは、OneDrive for Business の "Items" という Excel テーブルに接続されました。 ギャラリーの Items プロパティが Items テーブルに関連付けられていて、ギャラリーにはテーブルに 3 つのエントリが表示されていることを確認してください。

    ギャラリー アイテムへの OneDrive データ ソースの追加のスクリーンショット。

  1. 追加したギャラリー コントロールが選択されていることを確認してください。

  2. 右側のプロパティ ペインで、Layout プロパティのドロップダウン メニューを選択します。 代わりに、選択したコントロールの上にカーソルを合わせると、同じオプションを持つ選択可能な Layout ボタンが表示されます。

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

  4. 右側のプロパティ ペインで、Fields プロパティ (8 が選択されています) の編集ボタンを選択し、フィールドを次のように設定します (コントロールの後に数字がある点に注意してください。たとえば、本文は "Body1" になります。次の画像を参照してください)。

    • Body: Description

    • Image: Image

    • Subtitle: UnitPrice

    • Title: Name

    代わりに、選択したコントロールの上にカーソルを合わせて、コントロールに表示されるホバー メニューの Fields ボタンを選択します。 調整が完了したら、単に Fields ボタンを再選択して、オプションを閉じます。

    ギャラリー フィールドのスクリーンショット。

  5. データ ダイアログ ボックスを閉じます。

  6. ギャラリーで、最初の行の価格を選択します。 Text プロパティを Text(ThisItem.UnitPrice,"$###.00") に変更します。

  7. ギャラリーで、最初の行の画像を選択します。

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

  9. プロパティを Fit から Fill に変更すると、画像が画像コントロールの寸法に合わせて拡大されることを確認できます。

これで、ギャラリー内のデータの追加、カスタマイズ、構成が完了しました。

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

  1. Screen1 (ギャラリーの外部にある任意の場所) を選択します。

  2. アプリ リボンで挿入ボタンを選択してボタンを追加しましょう。 ボタン を選択し、新しいボタン コントロールをギャラリーの下に配置します。

  3. ボタンの Text を コレクションに追加 に変更し、フォント サイズを 15 から 12 に変えて、テキストがボタンに 1 行で収まるようにします。

  4. ボタンを選択し、式バーで false の OnSelect 値を次の式に置き換えます。

     ClearCollect(colItemsCollection, Items)

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

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

    ClearCollect: 既存の品目をクリアすると、すべてのレコードが 品目 から colItemsCollection コレクションにコピーされます

    [コレクションに追加] ボタンのスクリーンショット。

  5. Power Apps エディターの右上の プレビュー ボタンを選択して (または F5 キーを押して)、プレビュー モードに移動します。 コレクションに追加 ボタンを選択し、プレビュー モードを終了します。 または、Alt キーを押しながら コレクションに追加 ボタンを選択します。

  6. 左側レールで変数ボタンを選択し、コレクション オプションを展開して、作成した colItemsCollection の隣にある省略記号を選択します。 テーブルの表示オプションを選択します。

    「変数」メニューを表示するスクリーンショット。コレクションが展開され、「テーブルの表示」ボタンが強調表示されている。

  7. コレクションに保存されているテーブルを示すポップアップ ウィンドウが表示されます。 品目データ ソースの 3 つのレコードが colItemsCollection コレクションに追加されていることを確認してください。 この方法で、アプリのどのコレクションや他の変数でも表示できます。

    変数のスクリーンショット。

  8. キャンセルを選択してポップアップ ビューを閉じ、アプリのキャンバスに戻ります。

コレクションで使用できる他の機能を確認する

  1. ツリー ビューで、新しい画面>空白を選択します。

  2. 挿入 ボタンを選択し、データ を検索して、データ テーブル を選択します。 データ テーブル コントロールを使用すると、表データをすばやく表示できます。

    [+ 挿入] ボタンのクローズアップ。検索フィールドに「データ」と入力され、データ テーブルが強調表示されています。

  3. 次に、右側の プロパティ パネルに移動し、データ ソースとして Items テーブルを選択します。 コントロールには、"Name"、"UnitPrice"、および "UnitsSold" が列として表示されます。

  4. データ テーブル コントロールの Items プロパティで、Items を削除し、colItemsCollection と入力します。

  5. リボンから 挿入 を選択してボタンを挿入し、ボタン を選択して、テーブルの下にボタンを配置します。 さらに 3 つのボタンを、画面のデータ テーブル コントロールの下で左から右に追加します。

  6. 4 つのボタンすべてのテキストをそれぞれ列の追加、列の削除、列の表示、列の名前の変更に変更します。 各ボタンをダブルクリックし、新しい名前を入力するだけでも変更できます。 列の名前の変更ボタンのフォント サイズを 12 に変更して、1 行に収まるようにします。

  7. 列の追加 ボタンを選択し、OnSelect プロパティを次の式に更新します。

    Collect(colAddCollection, AddColumns(colItemsCollection, Revenue, UnitPrice * UnitsSold))

    この演習を進めているときに、式バーに Copilot アイコンが表示されていたことにお気づきになったでしょう。 Copilot は、式の内容や動作についての説明を提示することができます。

  8. [列の追加] ボタンの OnSelect プロパティの式バーで、Copilot アイコンを選択します。 次に、この式の説明 を選択します。

    次の画像のような 式の説明 が表示されます。 また、式にコメントを追加する際に使用できる Copy 関数にも注目してください。

    式の説明のスクリーンショット。

    この例では、Copilot から次の説明を取得しています。この式は、'colItemsCollection' テーブルに 'Revenue' という名前の新しい列を追加します。'Revenue' 列の値は、'UnitPrice' 列と 'UnitsSold' 列を乗算することで算出されます。そして、更新されたテーブルを 'colAddCollection' コレクションに収集します。

    Copilot の説明をコピーして、"コメント" 行として式に追加することもできます。 コードの前に二重スラッシュ "//" を追加するだけで、その行が実行可能コードではないことが Power Apps に伝えられます。

  9. キャンバスで 列の削除 ボタンを選択し、OnSelect プロパティを次の式に更新します。

    Collect(colDropCollection, DropColumns(colItemsCollection, UnitPrice))

    Copilot - この式の説明 をもう一度使用してみてください。

  10. 列の表示 ボタンを選択し、OnSelect プロパティを次の式に更新します。

    Collect(colShowCollection, ShowColumns(colItemsCollection, Name))

    このボタンを選択すると、*colShowCollection という新しいコレクションが作成され、colItemsCollection コレクションのすべてのデータがコピーされますが、ShowColumns 関数を使用して Name 列のみが表示されます。

  11. 列の名前を変更ボタンを選択し、OnSelect プロパティを次の式に更新します。

    Collect(colRenameCollection, RenameColumns(colItemsCollection, Name, Product))

    このボタンを選択すると、colRenameCollection という新しいコレクションが作成され、colItemsCollection コレクションのすべてのデータが取り込まれますが、RenameColumns 関数を使用して Name 列の名前が Product に変更されます。

  12. Power Apps エディターの右上の プレビュー (または 再生) ボタンを選択して、プレビュー モードに移動します。 4 つのボタンをすべて選択します。 プレビュー モードを終了します。 これで、追加する 4 つのコレクションが作成されました。

  13. 作成した 4 つの新しいコレクションを見てみしましょう。 変数 > コレクションを選択し、colAddCollection の横にある省略記号 (...) ボタンを選択して、テーブルの表示を選択します。 変数ポップアップ ウィンドウの左側にメニューが表示され、作成した新しい 4 つのコレクションが、最初のコレクションと一緒に表示されることを確認できます。 コレクションをそれぞれ選択して、データ テーブルに表示される元のコレクションがどのように変わるかを確認してください。

    colAddCollection

    colAddCollection のスクリーンショット。 colDropCollection

    colDropCollection のスクリーンショット。 colShowCollection

    colShowCollection のスクリーンショット。 colRenameCollection

    colRenameCollection のスクリーンショット。

    確認できたら、変数 ポップアップ ウィンドウを閉じます。 コレクションは一時データのテーブルであるため、現在のユーザーがアプリを使用している間のみアクセスできます。 したがって、アプリを閉じるとアクセスできなくなります。

Patch 関数の使用

  1. アプリの Screen 1 に戻ります。

  2. テキスト ラベル コントロールを追加します (挿入ボタンを選択し、テキスト ラベルを選択します)。 Text プロパティの名前を製品名に変更します。 ラベルをダブルクリックし、コントロールに直接名前を入力して変更することもできます。 次に、ラベルをギャラリーの横に配置します。

    ヒント

    コントロールをすばやくコピーして貼り付ける簡単な方法として、コントロールを選択し、Ctrl キーを押しながら C キーを押した後、(Ctrl キーを押したまま) V キーを押すことができます。コピーしたコントロールの少し右下にアイテムが貼り付けられるのがわかります。

  3. 選択したラベルをコピーして、コピーしたラベルの Text を新しい説明にします。

  4. もう一度挿入ボタンを使用し、テキスト入力 コントロールを挿入します。 既定のプロパティをクリアして空白にします。 次に、このコントロールをコピーし、上の手順で作成したラベルの横に両方のテキスト入力を配置します。 画面は次の画像のようになります。

    ラベル入力のある画面のスクリーンショット。

    この図に表示されている価格は例示のみを目的としており、実際の価格を反映するものではありません。

  5. 次に、ボタン コントロールを挿入し、ラベルの下に配置します。 Text プロパティを Update に変更します。

  6. 製品名ラベルの右にあるテキスト入力を選択します。

  7. 式バーで、Default プロパティが選択されていることを確認し、式を次のように変更します (ギャラリー コントロールの名前は Gallery1 とは異なる場合があります。これに応じて式を変更してください)。

    Gallery1.Selected.Name

    このラベルには、ギャラリーから選択したレコードの名前が表示されます。 これをテストするには、アプリを プレビュー モードにし (または、Alt キーを押しながら)、ギャラリーからいくつかのアイテムを選択します。 異なるギャラリー アイテムを選択すると、表示される製品名がどのように変わるかに注目します。

  8. 新しい説明 ラベルの右側のテキスト入力コントロールで、このプロセスを繰り返します。 Default の式を次のようにします。

    Gallery1.Selected.Description

    続いて、選択したギャラリー アイテムの左側に表示される暗い縦のバーにも注目します。

  9. 更新ボタンを選択します。

  10. ボタンの OnSelect プロパティを次の式に変更します。

    Patch(Items,LookUp(Items, Name = TextInput1.Text), { Description: TextInput1_1.Text })

    注

    テキスト入力コントロールの名前はこの例と異なる場合があります。 必要に応じて式を調整してください。

完了した内容を要約しましょう。 選択した製品の説明を更新する簡単な手段を作成しました。

  • Patch - データ ソースでレコードを変更または作成する方法を提供します (この場合はレコードを変更します)。

  • LookUp - 製品名を使用して、変更する特定のレコードを検索します。 LookUp は、条件 Name = TextInput1.Text に一致する最初のレコードを返します。

  • Power Apps では、一致するレコードが見つかると (LookUp を使用)、新しい説明 のテキスト入力で入力した内容に基づいてデータ ソース内の品目の 説明 が更新されます。

アプリをプレビューしてこれをテストします。 ギャラリーでシナモンという品目を選択し、説明を "シナモン フレーバーのグリーン ティー" に変更して、更新 を選択します。 しばらくすると、ギャラリーの説明が更新された説明に変わります。

シナモンに変更された最終出力フォームのスクリーンショット。

お疲れさまでした。 パッチ経由でデータ ソースを更新する簡単な手法と、コレクションを使用してアプリ内でデータを使用/変更する方法について学習しました。