この記事は第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を初めて利用して、前回作成したエンティティを利用するアプリを作りました。
アプリはまだできていないので、第３部で今回保存したアプリの開発を続けます。