この記事は第1部の続きなので、まだ読んでいない方はこちら。

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

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

PowerAppsにサインインして、ホーム画面を開きます。一応、画面の上のメニューでまだ前回作成した環境を利用しているのを確認してください。

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

次のダイアログで、Windows用のPowerApps StudioまたはWeb用のPowerApps Studioのいずれかを選択してください。どちらでも無料です。Windowsのアプリはこちらでダウンロードすることができます。この記事では、Windowsのアプリを使います。

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

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

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

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

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

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

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

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

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

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

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

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

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

PlainText(ThisItem.Body)

PlainTextとはHTMLタグを除いでプレーンテキストにするフォーミュラです。PowerAppsのフォーミュラはExcelのフォーミュラと結構似ていると思います。英語版しかないですが、全てのPowerAppsのフォーミュラ参照はこちら。

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

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

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

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

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

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

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

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

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

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

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

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

DataField: "Body"
DisplayName: "本文"

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

挿入したテキストボックスを選択して、ホームメニューののタグのボタンを押して名前を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

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

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

アプリを保存

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

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

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

まとめ

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

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