【PowerApps】 Microsoft LearnのPower Apps に関する入門情報のポイント抜粋

# 概要

Microsoft365 Business Basicを個人的に契約し、PowerAppsなどの検証を色々とやっていこうと思っている暇人です。
この記事は、Microsoft LearnのPowerApps関連の学習コンテンツで、[Power Apps に関する入門情報](https://docs.microsoft.com/ja-jp/learn/modules/get-started-with-powerapps/)を一通り学習したので、そのポイントを抜粋して学習メモとして残すことを目的としています。

# PowerAppsに関する入門情報ポイント抜粋

## OneDrive for BusinessにアップされたExcelデータからアプリを作成する

[FlooringEstimates.xlsx](https://az787822.vo.msecnd.net/documentation/get-started-from-data/FlooringEstimates.xlsx)をダウンロードして、OneDrive for Businessにアップロードする。
![スクリーンショット 2020-12-30 17.48.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/f8de1563-726e-4d15-3ba6-8af07157e4c0.png)

PowerAppsのページに遷移して、作成 -> 他のデータソースを選択
![スクリーンショット 2020-12-30 17.49.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/c155436e-5e81-2792-1abf-b6227644b974.png)

新しい接続を選択
![スクリーンショット 2020-12-30 17.51.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/18700aee-69ee-d84c-2bb1-f3cb5a1b9050.png)

OneDrive for Business -> 作成ボタンを押下
![スクリーンショット 2020-12-30 17.51.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/4ffbffd1-3054-4932-f6a9-7936275a2a01.png)

追加したOneDrive for Businessの接続先を選択して、FlooringEstimates.xlsxファイルを選択
![スクリーンショット 2020-12-30 17.52.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/83a5e89f-d897-25d3-dd0c-8ffdc282273b.png)

テーブルの選択で`FlooringEstimates`というテーブルを選択して接続ボタンを押下。
※Excelをデータソースとして利用する場合、Excelの書式設定の機能で`テーブルとして書式設定`という設定を事前に行っておかないと、テーブルの選択には表示されません。Microsoft Learnで用意されているExcelデータは、この書式設定が完了しているため、ここで選択できるようになっています。
![スクリーンショット 2020-12-30 17.54.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/f5ac20eb-9166-849f-0b86-25b5e3ad1815.png)

以上の手順で、OneDrive for BusinessにアップロードしたExcelデータからPowerAppsのアプリを作成できます。
![スクリーンショット 2020-12-30 17.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/f9e60150-ba1b-5acf-94cc-ca90e1a7488f.png)

## Garallyのデザインを変更する

BrowseGallery1を選択 -> 画面右ペインのプロパティ -> レイアウトのコンボボックスを選択
![スクリーンショット 2020-12-30 18.00.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/5ca29bb0-8ef4-22a1-4881-748c3dbaf62a.png)

デザインの候補が表示されるので好みのデザインを選択
![スクリーンショット 2020-12-30 18.01.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/7da8508c-7217-d124-c238-98bc6a0afaa7.png)

ここでは、`イメージ、タイトル、サブタイトル`を選択しました
![スクリーンショット 2020-12-30 18.03.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/af72198a-4212-380b-17b4-088edbf786a8.png)

## Garallyに表示されている項目を変更する

Garallyに表示されている`Carpet`の部分を選択して、画面上部の数式バーに表示されている`ThisItem.Category`を`ThisItem.Name`に変更することで、表示される項目を変更できます。
![スクリーンショット 2020-12-30 18.04.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/5b7b42b9-51a5-2c22-a935-38124ed4166e.png)
![スクリーンショット 2020-12-30 18.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/a3cc5d69-03c6-274e-1bc5-4fb705ac07be.png)

`ThisItem.Name`の項目を`ThisItem.Price`に変更
![スクリーンショット 2020-12-30 18.06.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/98530131-bef2-e232-8508-67e075d028da.png)
![スクリーンショット 2020-12-30 18.07.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/b4313ff8-0fca-9b7c-5b63-dbc3e9954457.png)

Priceの項目の数式を`Text(ThisItem.Price, "$#.#9")`このように設定することで、ドル表示に表示形式をカスタマイズできます。
![スクリーンショット 2020-12-30 18.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/d843ad1d-2a22-7a6f-64bb-e188c7a00320.png)

Priceの項目を選択 -> プロパティから色を選択すると、数式バーには`RGBA(0, 0, 0, 1)`と表示されています。
フォントの色が黒色＋透過なしという状態です。
ここに、条件付き書式のような設定を入れることもでき、`If(ThisItem.Price > 5, Color.Red, Color.Green)`こうすることで、５ドルより大きい場合は赤字に、５ドル以下の場合緑のフォントにすることができます。
![スクリーンショット 2020-12-30 18.11.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/f92f52d2-ee06-2878-8a71-b4e41acf562e.png)
![スクリーンショット 2020-12-30 18.14.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/5ae2ed96-6f1f-8bd5-3271-cc928b2f3598.png)

## 詳細画面の項目順序を変更する

DetailForm1を選択 -> プロパティのフィールドの編集リンクを押下
![スクリーンショット 2020-12-30 18.15.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/0c707ca7-648a-6d7d-fee6-6da21488d216.png)

ここではImageの項目をドラッグ＆ドロップで一番下に移動します。
![スクリーンショット 2020-12-30 18.16.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/8290917e-3d78-96c0-b7ee-621428f4a0c2.png)
![スクリーンショット 2020-12-30 18.16.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/0336ce05-7fd3-b802-3469-391dc2880266.png)

## 編集画面の複数行入力可能な項目に変更する

Overview_DataCard2を選択 -> プロパティのフィールド 編集リンクを押下
![スクリーンショット 2020-12-30 18.18.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/4d821b31-fe68-2faa-177e-5aa64d9a9f40.png)

Overviewの`コントロールの種類`を`テキストの編集`から`複数行テキストの編集`に変更することで、複数行入力可能な項目として変更できます。
![スクリーンショット 2020-12-30 18.19.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/2ea1c7c4-ace1-e427-19a7-870c03ed3b1a.png)
![スクリーンショット 2020-12-30 18.21.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246556/f9eed3fc-2489-ac54-9de8-b84365be04e5.png)