前へ

次へ

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

完了

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

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

データ ソースを追加する

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

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

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

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

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

   

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

   

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

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

9. Items テーブルを選択してから、接続を選択します。

   

ギャラリーが OneDrive for Business の Excel テーブルに接続されたため、ギャラリー コントロールにデータを表示できます。

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

1. 追加したギャラリーを選択します。

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

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

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

   • Body: Description

   • Image: Image

   • Subtitle: UnitPrice

   • Title: Name

   

5. データ ダイアログ ボックスを閉じます (右上の X を選択します)。

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

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

   "$" & ThisItem.UnitPrice

   

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

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

10. プロパティを Fit から Fill に変更すると、画像が展開されて画像コントロールの寸法が入力されるのがわかります。

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

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

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

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

3. ボタンの テキストをAdd to Collectionに変更し、フォント サイズを 15 から 12に変えて、テキストがボタンに 1 行で収まるようにします。

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

    Collect(colItemsCollection, Items)`
   

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

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

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

   

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

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

   

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

   

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

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

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

2. 挿入ボタンを選択し、データを検索して、データ テーブルを選択します。

   

3. 新しいデータ テーブルのデータ ソースの選択ダイアログ ウィンドウで、colItemsCollection を選択します。

   

   以上で、Excel シートの品目テーブルではなく、このコントロールのデータ ソースとしてコレクション colItemsCollection を作成しました。 次に、表示するフィールドの定義を行います。

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

5. フィールドの追加を選択します。

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

   

7. データ ペインを閉じます (データの右側にある X を選択します)。

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

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

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

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

    このボタンを選択すると、colAddCollection という新しいコレクションが作成され、colItemsCollection コレクションのデータが取得されます。また、AddColumns 関数を使用して、Revenue という新しい列が追加されます。この列は UnitPrice * UnitsSold として計算されます。

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

    Collect(colDropCollection, DropColumns(colItemsCollection, "UnitPrice"))
    

    このボタンを選択すると、colDropCollection という新しいコレクションが作成され、colItemsCollection コレクションのすべてのデータがコピーされますが、DropColumns 関数を使用して UnitPrice 列が削除されます。

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

    Collect(colShowCollection, ShowColumns(colItemsCollection, "Name"))
    

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

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

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

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

    完了すると、次のようなボタンが表示されます。

    

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

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

    colAddCollection

    
    colDropCollection

    colShowCollection

    colRenameCollection

    

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

Patch 関数の使用

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

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

   ヒント

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

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

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 - 製品名を使用して、変更するレコードを検索します。 これは、条件 Name = TextInput1.Text に一致する最初のレコードを返します。

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

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

お疲れさまでした。 データ ソースを更新する方法について学習しました。

続行