初めてのPowerAppsのアプリを作成（第2部）


この記事は第1部の続きなので、まだ読んでいない方は[こちら](http://qiita.com/firehouse-harris/items/bd0df78ac90c9e48336e)。

## PowerAppsのアプリを自動的に構築

前回、エンティティを作成して、データを読み込みました。今回は、そのデータを管理するスマホアプリを作成します。

[PowerAppsにサインイン](https://powerapps.microsoft.com/ja-jp/)して、ホーム画面を開きます。一応、画面の上のメニューでまだ前回作成した環境を利用しているのを確認してください。

![check-env.png](https://qiita-image-store.s3.amazonaws.com/0/153003/8364681a-fdca-706a-b890-ff7f2e6e964e.png "check-env.png")

「アプリの作成」の見出しの下にある`作成の開始`のボタンを押します。

![create-app-button.png](https://qiita-image-store.s3.amazonaws.com/0/153003/c0c3fbfa-9d25-64c7-f09c-17f9ff2fbe22.png "create-app-button.png")

次のダイアログで、Windows用のPowerApps StudioまたはWeb用のPowerApps Studioのいずれかを選択してください。どちらでも無料です。Windowsのアプリは[こちら](https://www.microsoft.com/ja-jp/store/p/powerapps/9nblggh5z8f3)でダウンロードすることができます。この記事では、Windowsのアプリを使います。

![choose-studio.png](https://qiita-image-store.s3.amazonaws.com/0/153003/fa3a7048-3337-9a72-944c-afcdfc0bf76b.png "choose-studio.png")

PowerApps Studioで左側のメニューの`新規`のリンクをクリックして、Common Data Serviceの下にある`携帯電レイアウト`のボタンを押します。

![choose-data-source.png](https://qiita-image-store.s3.amazonaws.com/0/153003/99bc33b5-9e9b-92a6-1df8-91facf96b3a1.png "choose-data-source.png")

次の画面で前回作成した`サポートメール`のエンティティを選択して、`接続`のボタンを押します。

![スクリーンショット 2016-12-23 11.33.23.png](https://qiita-image-store.s3.amazonaws.com/0/153003/621b9523-b76c-9b5b-8020-ce655f94d8d9.png "スクリーンショット 2016-12-23 11.33.23.png")

これで、PowerApps Studioは選択したエンティティを分析して、自動的にアプリを構築します。

![building.png](https://qiita-image-store.s3.amazonaws.com/0/153003/2d6f4a8f-ba32-b652-60c1-f638a36e3ddd.png "building.png")

完成すると、以下のような画面が見えます。PowerAppsが作成したアプリに3つの画面は自動的に付いています。

1. BrowseScreen1: サポートメール一見の画面
2. DetailsScreen1: 選択するサポートメールの内容を見る画面
3. EditScreen1: 選択するサポートメールを編集する画面

![first-look.png](https://qiita-image-store.s3.amazonaws.com/0/153003/fa75391d-ec82-e83f-deb3-2f87ae9e4d32.png "first-look.png")

## サポートメール一見の画面

まず、`BrowseScreen1`をもう少し工夫しましょう。左側のメニューの１行目の`BrowseScreen1`の画面を選択します。ホームメニューのタグのボタンを押して、名前を`BrowseSupportEmails`に変更します。

![change-browse-name.png](https://qiita-image-store.s3.amazonaws.com/0/153003/6d30eddb-6f93-10d9-eb5a-4cbd77d71bcf.png "change-browse-name.png")

この画面に様々な項目があります。項目を選択すると、ホームメニューと右側のメニューで項目の名前と設定が現れます。

画面の上にアプリの題名、データを再読み込むボタン、並べ替えるボタン、新規サポートメールのボタン、メールを検索するテキストボックスがあります。

その下に`BrowseGallery1`というギャラリーがあります。ギャラリーは２つ以上の項目を表示することができるが、一番上の項目だけ編集することもできます。この項目はテンプレートなので、その下の項目は全部同じよう形になります。

ギャラリーの最初の項目の一番上のテキストボックスを選択して、右側のオプションメニューで`件名`のフィールドに変更します。そして、青いテキストボックスのフィールドを受信日時に変更します。３行目のテキストボックスを本文にします。

![change-browse-fields.png](https://qiita-image-store.s3.amazonaws.com/0/153003/c6aec8db-fcca-b401-1a5e-b3255778c5c1.png "change-browse-fields.png")

それから、ギャラリーの最初の項目の一番下のテクストボックスを選択して削除します。本文のテキストボックスの下に残っているスペースを使うために、マウスで本文の枠をドラッグして大きくします。

本文のテキストボックスを選択したまま、右側の詳細設定メニューを開きます。データ見出しの下の`Text`のプロパティを編集して、以下の値を与えます。

```
PlainText(ThisItem.Body)
```

[PlainText](https://powerapps.microsoft.com/en-us/tutorials/function-encode-decode/)とはHTMLタグを除いでプレーンテキストにするフォーミュラです。PowerAppsのフォーミュラはExcelのフォーミュラと結構似ていると思います。英語版しかないですが、全てのPowerAppsのフォーミュラ参照は[こちら](https://powerapps.microsoft.com/ja-jp/tutorials/formula-reference/)。

![list-screen.png](https://qiita-image-store.s3.amazonaws.com/0/153003/0e2816f2-4429-9be4-64e9-523fcc3bb43b.png "list-screen.png")

最後に、サポートメールは`Received`のフィールドで並ぶように、`BrowseGallery1`のボックスを選択して、`Items`のプロパティを編集します。以下のフォーミュラを入力します。

```
SortByColumns(Search(サポートメール, TextSearchBox1.Text, "Body","CreatedByUser","LastModifiedByUser","MessageId"), "Received", If(SortDescending1, Descending, Ascending))
```

これで、サポートメール一見の画面はとりあえず完成です。

## サポートメール詳細の画面

左側のメニューの２行目の画面を選択します。この画面はユーザーが選択するサポートメールのフィールドを全て表示します。

ホームメニューのタグのボタンを押して、名前を`SupportMailDetails`に変更します。

![details-screen-name.png](https://qiita-image-store.s3.amazonaws.com/0/153003/c97dcb00-5bc1-8457-6988-b7b8110fb9c6.png "details-screen-name.png")


この画面で、各フィールドはカードがあります。各カードの中に1つのラベルのテキストボックスと1つの値のテキストボックスがあります。

カードは`DataCard1`のような名前があります。ラベルは`DataCardKey1`、価値は`DataCardValue1`のような名前があります。

![card-names.png](https://qiita-image-store.s3.amazonaws.com/0/153003/1a167820-b919-6ff0-3b35-274a555e35d6.png "card-names.png")

この記事の第1部では、各メールのメールIDを入手しましたが、とりあえず要らないので、メールIDのカードを削除します。

後は、本文のフィールドがHTMLを表示しているけれども、テキストを表示したいので、本文のカードを削除します。

画面の下にある`カスタムカードの追加`のリンクをクリックします。

![add-card.png](https://qiita-image-store.s3.amazonaws.com/0/153003/78ec8b6d-c3f8-da18-52d0-0e3f507ff74a.png "add-card.png")

追加したカードを選択して、右側の詳細設定のメニューで、以下の値を与えます。

- DataField: `"Body"`
- DisplayName: `"本文"`

このカードが選択されたまま、挿入メニューのテキストボックスのボタンを押します。

![text-menu.png](https://qiita-image-store.s3.amazonaws.com/0/153003/37e2f294-c68f-6796-c7f8-e1f435d21ae4.png "text-menu.png")


挿入したテキストボックスを選択して、ホームメニューののタグのボタンを押して名前を`BodyLabel`に変更します。それから、他のカードと合っているように右側の詳細設定メニューで以下の値を与えます。

- Text: `Parent.DisplayName`
- Color: `RGBA(101,128,187,1)`
- PaddingTop: `24`
- PaddingLeft: `0`
- PaddingBottom: `18`
- PaddingRight: `0`
- Width: `Parent.Width - 60`
- X: `30`
- Y: `0`

![atts.png](https://qiita-image-store.s3.amazonaws.com/0/153003/51672114-b38a-28db-1353-2f544cece78c.png "atts.png")

`Parent`はその項目が入られている項目を参照する変数です。この場合、追加した本文のカードの`DisplayName`と`Width`のプロパティを手に入れます。

それから、追加した本文のカードを選択して、挿入メニューの`テキスト`ボタンを押して、出るメニューの`HTML テキスト`を押します。

追加したHTMLテキストの項目を選択して、右側の詳細設定のメニューで以下の値を与えます。

- HtmlText: `ThisItem.Body`
- AutoHeight: `true`
- PaddingTop: `0`
- PaddingLeft: `0`
- PaddingBottom: `0`
- PaddingRight: `0`
- Width: `Parent.Width - 60`
- X: 30
- Y: `BodyLabel.Height`

これで、この画面はいい感じになりました。

![details-done.png](https://qiita-image-store.s3.amazonaws.com/0/153003/958ec626-35bd-1249-8f85-6572c78b1b97.png "details-done.png")

## アプリを保存

アプリはまだ完成していませんが、着々進んでいるので、今までできた部分を保存しましょう。

ファイルメニューをクリックして、左側に現れるメニューの`アプリ設定`を選択します。名前を付けて合っているアイコンを選択します。

![app-settings.png](https://qiita-image-store.s3.amazonaws.com/0/153003/b5ac4eba-c927-d9ea-5e0d-396cc3321ab4.png "app-settings.png")

それから、左側のメニューの`名前を付けて保存`を押します。クラウドを選択して、名前を入力してから`保存`のボタンを押します。

![save-screen.png](https://qiita-image-store.s3.amazonaws.com/0/153003/c33af02d-def6-56d1-f59a-01556760f524.png "save-screen.png")

## まとめ

今回はPowerApps Studioを初めて利用して、前回作成したエンティティを利用するアプリを作りました。

アプリはまだできていないので、第３部で今回保存したアプリの開発を続けます。