演習 - キャンバスアプリを使用してデータを成形する
この演習では、キャンバス アプリでデータを成形します。
この演習を完了するには、スプレッドシート をダウンロードする必要があります。 リンクが表示されたら、[ダウンロード] を選択します。 Excel スプレッドシートを抽出し、スプレッドシートを自分の OneDrive にアップロードします。
データ ソースの追加
Power Apps にサインインします。
新しい Power Apps のキャンバス アプリを一から作成し、それを「ShapeData」と名付けます。 タブレット形式を選択します。
この Excel スプレッドシート が OneDrive に追加されていることを確認します。
挿入タブで ギャラリー を選択した後、縦方向のギャラリーのオプションを選択します。
右側のプロパティ ペインで、Data source プロパティのドロップダウン メニューを選択します。
検索ボックスに OneDrive for Business と入力し、一覧から OneDrive for Business を選択します。 また、コネクタを展開して、OneDrive for Business コネクタが見つかるまで、使用可能なすべてのコネクタをスクロールすることもできます。
+ 接続の追加を選択します。
OneDrive for Business の下部にある接続を選択します。
Excel ファイルの選択を求められたら、手順 3 でダウンロードした Excel ファイルの保存場所に移動して選択します。
Items テーブルを選択してから、接続を選択します。
OneDrive for Business リストの Excel テーブルに接続したので、ギャラリー コントロールにデータを表示できます。
ギャラリーのデータの書式設定
追加したギャラリーをクリックします。
右側のプロパティ ペインで、Layout プロパティのドロップダウン メニューを選択します。
イメージ、タイトル、サブタイトル、本文のレイアウトを選択します。
右側のプロパティ ペインで、列プロパティの [編集] を選択し、次の点を設定します。
Body1: 説明
Image2: イメージ
Subtitle2: UnitPrice
Title2: 名前
データの右側にある X をクリックして終了します。
ギャラリーで、最初の行の価格を選択します。
数式バーで、[テキスト] が選択されていることを確認して、次のように入力します。
"$" & ThisItem.UnitPriceギャラリーで、最初の行のイメージを選択します。
右側のプロパティ ペインで、Image Position プロパティのドロップダウン メニューを選択します。
画面サイズに合わせるをクリックすると、領域がイメージで埋め尽くされます。
これで、ギャラリー内のデータの構成と操作が完了しました。
ギャラリーでのデータのフィルター処理
ギャラリーを選択します
数式バーで Items プロパティが選択されていることを確認します。
式を次のように変更します。
Filter(Items, Origin = "China")この時点で、ギャラリーには発送元が中国である 2 つの品目のみが表示されていることに注意してください。
同じ処理を And 演算子で実行してください
Filter(Items, Origin = "China" And UnitsSold > 25)この時点で、ギャラリーには上記の両方の条件と一致する品目が 1 つだけ表示されていることに注意してください。
次に、Items プロパティを品目データ ソースに戻します。 このフィルター機能については、後で確認します。
Items
Search 関数の使用
挿入タブで、入力を選択してから、テキスト入力を選択します。テキスト入力をギャラリーの上に配置します。
左側のパネルの [ツリー ビュー] > [画面] > [Screen1] > 右側の 3 つのドットを選択し、名前の変更を選択して、テキスト入力の名前を SearchInput に変更します。後で参照できるように、このコンポーネントの名前を変更します。
次は、ギャラリーをクリックします。 数式バーで Items プロパティが選択されていることを確認してから、次の式を記述します。
Search(Items, SearchInput.Text, "Name")次のものがあります。
Search(Items...) - 文字列の列に対してより柔軟なクエリを実行できるようにする関数。
SearchInput.Text - searchinput テキスト入力コントロールに入力されたテキストを取得します。
"Name" - 列、または検索を実行する列を表します
この式からは、テキスト入力コントロール SearchInput に入力された値が名前列に含まれるすべての行が返されます。
複数の列を検索する場合は、式の末尾に列名を追加することができます。
Search(Items, SearchInput.Text, "Name", "Description")
データ成形関数を組み合わせる
ユニット 3 で説明したように、アプリケーションのより複雑な機能に対して関数を組み合わせることができます。 Filter 関数と Search 関数のテストを実施しましたので、今度はそれらを 1 つの関数に結合します。
まず前の手順で完了した Search 関数から始めます。
品目をフィルター(品目、発送元 = "中国") に置き換えると、式は次のようになります。
Search(Filter(Items, Origin = "China"), SearchInput.Text, "Name", "Description")
Search 関数の場合、提供する必要がある最初のオプションはデータのテーブルです。 Filter 関数では、データのテーブルが返されます。 つまり、Search 関数のデータ ソースとして、Filter 関数を使用することができます。 ギャラリー コントロールの Items プロパティの式としてこれを追加することにより、追加された検索機能を使用してユーザーに必要なデータを表示できます。
Power Apps 内では、1 つの関数を使用してさまざまな場所で別の関数に情報を提供することができます。
コレクションとデータ ソースの間でデータを移動する
挿入タブで、ボタンを選択し、ギャラリーの下にボタンを配置します。
ボタン上のテキストをコレクションに追加に変更します
ボタンをクリックして、数式バーで false を次の式に置き換えます。
Collect(ItemsCollection, Items)ItemsCollection - コレクション名を示します
Items - データ ソース名を示します
Collect - Items から ItemsCollection コレクションにすべての行をコピーします
アプリを実行します。 ボタンをクリックします。 アプリの実行を停止します。
表示タブで、コレクションを選択してから、ItemsCollection を選択します。 Items データ ソースのすべての行が ItemsCollection コレクションに追加されていることがわかります
コレクションで使用できる他の関数を確認する
挿入タブで新規画面を選択してから、空白をクリックします
挿入タブで、データ テーブルを選択し、ギャラリーの横に配置します。
数式バーで、[品目] が選択されていることを確認してから、ItemsCollection と入力します。
これは、テーブルのデータ ソースが Excel シートの品目テーブルではなく、ItemsCollection コレクションであることを意味します。
右側のプロパティ ペインで、列プロパティの列の編集を選択します。
+ 列の追加を選択します。
使用できるすべての列を選択してから、追加を選択します。
データの右側にある X をクリックして終了します。
挿入タブでボタンを選択し、テーブルの下にボタンを配置します。 このプロセスを 4 回繰り返します。
4 つのボタンすべてのテキストをそれぞれ列の追加、列の削除、列の表示、列の名前の変更に変更します。
列の追加ボタンを選択します。
数式バーを次の式に更新します。
Collect(AddCollection, AddColumns(ItemsCollection, "Revenue", UnitPrice * UnitsSold))ここでは、AddCollection という新しいコレクションを作成し、このコレクションで ItemsCollection コレクションのすべてのデータをコピーしますが、さらに、AddColumns 関数を使用して売上という新しい列を追加します。この列は、単価 * 販売個数として計算されます。
列の削除を選択します。
数式バーを次の式に更新します。
Collect(DropCollection, DropColumns(ItemsCollection, "UnitPrice"))ここでは、DropCollection という新しいコレクションを作成し、このコレクションで ItemsCollection コレクションのすべてのデータをコピーしますが、さらに、DropColumns 関数を使用して単価の列を削除します。
列の名前の変更を選択します。
数式バーを次の式に更新します。
Collect(RenameCollection, RenameColumns(ItemsCollection, "Name", "Product"))ここでは、RenameCollection という新しいコレクションを作成し、このコレクションで ItemsCollection コレクションのすべてのデータをコピーしますが、さらに、RenameColumns 関数を使用して名前列の名前を製品に変更します。
列の表示を選択します。
数式バーを次の式に更新します。
Collect(ShowCollection, ShowColumns(ItemsCollection, "Name"))ここでは、ShowCollection という新しいコレクションを作成し、このコレクションで ItemsCollection コレクションのすべてのデータをコピーしますが、さらに、ShowColumns 関数を使用して名前列のみを表示します。
アプリを実行します。 4 つのボタンをすべて選択します。 アプリの実行を停止します。
表示タブでコレクションを選択してから、作成した追加の各コレクションを選択して、関数による影響を確認します。