演習 - キャンバスアプリを使用してデータを成形する

15 分

この演習では、キャンバスアプリでデータを成形します。

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

データソースの追加

Power Apps にサインインします。
左側の + 作成 を選択します。
空白のキャンバスから開始 を選択します。
タブレットサイズを選択します。
右上隅の保存アイコンを選択し、それに "ShapeData" という名前を付けます。
この Excel スプレッドシートが OneDrive に追加されていることを確認します。
挿入ドロップダウンで、垂直ギャラリー を選択します。
表示されたポップアップメニューの検索ボックスに OneDrive for Business と入力し、一覧から OneDrive for Business を選択します。また、コネクタを展開して、OneDrive for Business コネクタが見つかるまで、使用可能なすべてのコネクタをスクロールすることもできます。
+ 接続の追加 を選択します。
OneDrive for Business の下部にある接続を選択します。
Excel ファイルの選択を求められたら、手順 3 でダウンロードした Excel ファイルの保存場所に移動して選択します。
Items テーブルを選択してから、接続を選択します。

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

ギャラリーのデータの書式設定

追加したギャラリーをクリックします。
右側のプロパティペインで、レイアウト プロパティのドロップダウンメニューを選択します。
イメージ、タイトル、サブタイトル、本文 のレイアウトを選択します。
右側のプロパティペインで、Fields プロパティの横にある紫色の 8 選択済みというテキストを選択し、次の点を設定します。
- Body1: 説明
- Image2: 画像
- Subtitle2: UnitPrice
- Title2: 名前
データの右側にある X を選択して終了します。
ギャラリーで、最初の行の価格を選択します。
数式バーで、[テキスト] が選択されていることを確認して、次のように入力します。
```
"$" & ThisItem.UnitPrice
```
ギャラリーで、最初の行のイメージを選択します。
右側のプロパティペインで、画像の位置 プロパティのドロップダウンメニューを選択します。
画面サイズに合わせるを選択すると、領域が画像で埋め尽くされます。

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

ギャラリーでのデータのフィルター処理

ギャラリーを選択します。
数式バーで 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 Text Input コントロールに入力されたテキストを取得します。

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 コレクションにすべての行をコピーします
右上隅の再生アイコンを使用してアプリを再生 (プレビュー) します。 コレクションに追加 ボタンを押します。右上隅の X をクリックして、再生プレビューを閉じます。
左側の変数タブを選択し、コレクションを展開してから、ItemsCollection を選択します。 Items データソースのすべての行が ItemsCollection コレクションに追加されていることがわかります。
挿入ドロップダウンで データテーブル を選択し、ギャラリーの横に配置します。
数式バーで、[品目] が選択されていることを確認してから、ItemsCollection と入力します。

これは、テーブルのデータソースが Excel シートの Items テーブルではなく、ItemsCollection コレクションであることを意味します。
プロパティペインの右側で、Fields プロパティの横にある紫色の 2 選択済みというテキストを選択して、フィールドを調整しましょう。
+ フィールドの追加 を選択します。
使用できるすべての列を選択してから、追加を選択します。
データの右側にある 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 つのボタンをすべて押します。右上隅の X をクリックして、再生プレビューを閉じます。
左側の変数タブを選択し、コレクション を展開すると、ボタンを選択した結果を含むコレクションが表示されます。