PowerApps 経費精算アプリにチャレンジしています。

はじめに

皆さんは、de:code ってご存知ですか？

これは、日本マイクロソフト社が行っている開発者向けのカンファレンスです。この中で PowerApps を使って「経費精算」アプリを作るという紹介がありましたので資料を参考に作っている状況です。まだ未完成状態ではありますがとにかく長いので作成出来ている分を投稿してみたいと思います。

経費精算には必要項目の出発地や到着地を外部の「駅すぱあと」アプリを使ったり、スマホのカメラで領収書を撮影し Azure の Vision API を使って画像を文字化したり FLOW を使って Outlook にメールを送ったりなど凄いです。上手く行くかどうかわかりませんがチャレンジしてみたいと思います。

最近、続きを投稿しよと思ったら中々上手く行きません。よって最初から作り直しをして画面も一新しようと思います。途中から以前の画面になるかもしれませんが出来るだけ早く最後までは行きたいと思います。
又、「駅すぱあと」社より資料を頂いて出発地と到着時の自動表示もチャレンジしようと思っていますが理解するのに時間が掛かりそうです。

開発の準備（環境やデータベースの作成）

PowerApps を開くと下記の画面になります。

• サイバーBB(既定)  ———  Office365のライセンス分の環境
• サイバーBB(tecnodb)  —–  Dynamics365のライセンス分環境

が表示されます。皆さんのパソコンではライセンスやドメインなどが違うのでそれぞれの内容で表示されると思います。

ここで、新しい開発用の環境を作成したいと思います。

画面右上の歯車マークをクリックして「管理センター」をクリックします。

「管理センター」が開いたら「＋新しい環境」をクリックします。

• 環境名：お試し環境
• リージョン：Japan(既定)
• 環境の種類：試用版

これで環境が作成されます。
次に「データベースの作成」がありますが、ここでは流れが理解できた方がいいと思うのでスキップで進みます。

新しい「お試し環境」が作成されました。これから作成する「経費精算」などこの環境に作成します。よって「お試し環境」をクリックします。

「自分のデータベースを作成」をクリックします。

ここに注意があります。
「データベースを追加すると、試用版の30日間のカウントダウンがリセットされます。」との事。

30日間で使えなくなったら困る。と思って一旦削除して「運用」モードに変更しました。

「運用」モードでも同じです。
これは「 30日間の無料試用版」を使っている人に、これから日にちがカウントされます。という事のようです。

「自分のデータベースを作成」をクリックします。

面倒くさいよねー。一度に入力させてくれればいいのにー。

• 通貨：JPY
• 言語：Japanease

を指定して「自分のデータベースを作成」をクリックします。

これで環境作りは終わりです。

エンティティの作成

これまで Access や SQL Server では データベースがあり、その中にたくさんのテーブルが存在していましたよね。でも PowerApps ではテーブルに該当する分をエンティティと呼ぶようです。

まだ「キャンパスアプリ」しか経験がないので「モデル駆動型」では一つのアプリに複数のエンティティを使うので又感覚が違うのかもしれませんが今のところテーブル＝エンティティで間違い無いと思います。

画面は一旦閉じて、ログインから開いた画面です。

お試し環境(orq5ed506a1) こういう文字がある分は Common Data Service の最新バージョンの 2 との事です。

• キャンパスアプリ
  得意先データの中からスマホやタブレットの画面で参照しやすい分だけを抽出して作成したアプリ
• モデル駆動型アプリ
  売上伝票、受注伝票、見積など明細付と紐づいたエンティティが扱えるアプリで集計値なども組み込めるアプリ、PowerApps の Plan2 のライセンスが必要です。

左側のデータ欄の▼をクリックして下さい。

「エンティティ」をクリックして下さい。

自分では設定していないエンティティが表示されます。
これらは将来的に各社で共通化できるようにエンティティを目指しているようです。

「＋新しいエンティティ」をクリックして下さい。

「新しいエンティティ」画面が表示されます。

• 表示名：経費精算
• 表示名の複数形：経費精算
• 名前：Expense

と入力して「次へ」をクリックします。

画面上段の「+フィールドの追加」をクリックすると
右側に「フィールドプロパティ」が表示されます。

表示名：申請日

名前：SubmitDate

データ型：（次の画面の通り選択画面が表示されます。）

データ型では「日付のみ」を選択します。選択が終わったら「完了」をクリックします。

項目によっては、必ず何かを入力して頂かないといけない項目もあります。この場合は「必須」にチェックをいれます。又、検索する項目にも「検索可能」も設定しましょう。

これを繰り返し、下記のフィールドを追加してエンティティを完成させます。

入力が終わったら下記の通りになります。表示順序はアイウエオ順かな？と思うように入力順では無いようです。下記画面では「金額」が「通貨」になっていますが今回は「整数」で設定してみました。

「エンティティの保存」をクリックしてから、「ホーム」をクリックして下さい。

アプリ作成の前準備

「＋作成」画面から少し下の方を見ると「データから開始（キャンパスアプリ）」がありますのでこれをクリックします。

一旦、黒い画面でスマホのアプリが表示されます。ここで右側の「このアプリ作成」をクリックして下さい。

下記画面が表示されます。
今回は、Common Data Service を使って携帯電話レイアウトで作成しますので下記をクリックします。

一旦、「接続」の画面が表示されます。
「Common Data Service」を確認して「作成」をクリックします。

下図の画面となります。
テーブルの選択の下には、たくさんのエンティティが表示されます。

検索欄で「経費」と入力して検索します。
「経費精算」が表示されますので、これをクリックして「接続」をクリックします。

「アプリをビルド中」の画面が表示されます。しばらくして下記画面になります。

• BrowseScreen1：登録されているデータの一覧表示画面
• DetailScreen1：選択されたデータの詳細表示画面
• EditScreen1：選択されたデータの編集画面と新規データ入力画面

EditScreen1画面を開くと下図のように「赤〇の×印」が表示されます。多分、バグと思いますので下記の3つの手順で表示しないように対策を行いましょう。

• 赤丸×印の申請者(DataCard2)をクリックします。
• プロパティのロックを解除します。
• プロパティの MaxLength 欄に表示されている内容を削除します。

残念な事に BrowseScreen1、DetailScreen1、EditScreen1 とも自動でエンティティで作成した項目が設定されますが表示して欲しい項目以外が設定されている事が多いです。よって、この項目の変更が必要になります。

BrowseScreen1：一覧表示画面を変更

自動で作成された BrowseScreen 画面では表示して欲しい内容の項目では表示されません。ＡＩだったとしても今の現状では無理ないと思います。でも、ここまで作成してもらっている事に感謝しながら変更を行いましょう。

・画面左側にある BrowseScreen1 の中の 「BrowseGallery1」をクリックします。
・画面右側のデータ：経費精算を確認して、その下の「編集」をクリックします。

すると画面中央に「データソース」画面が開きます。

意味不明の表示されますので、下記のようにデータ一覧表として活用できるように変更します。

• Body1    :ステータス Value　これを　出発地 ＞ 到着地
• Subtitle1:Primary Name　　これを　出張先
• Tatle1    :作成日　　　　　　これを　申請番号 (Primary Name)

Tatle1 ：作成日 から Primary Name に変更します。

出発地、到着地は、ThisItem を使って出発地と到着地を &” > “&で結合しています。 
「 ThisItem.出発地 & ” > ” & ThisItem.到着地 」このような設定になります。 

これで BrowseScreen1 の変更は完了です。

DetailScreen1：詳細表示画面の変更

DetailScreen 画面も同じく自動作成分では使えません。ここでも訂正が必要です。

申請番号、申請者、出張先、申請日、利用日、出発地、到着地、金額、説明の順序で設定します。下図の赤枠欄は、既に設定したもので、緑枠欄が未設定分のエリアです。項目名のを付けると設定され、外すと設定が解除されます。

項目を上下に移動して順番を並べ替えしたい場合は、移動したい項目をクリックし黒い部分をマウスでつまんで移動させて下さい。チョット慣れが必要になります。
面倒に感じる時は、一旦すべての ボックスを OFF にして、表示したい順に項目を選択する方法もあります。BB は、こちらの方法を利用しました。

これで、DetailScreen の設定を完了します。

アプリの保存

途中ではありますが、ここでアプリの保存を行いたいと思います。画面上段の一番左側の「ファイル」をクリックし「アプリの設定」画面を開きます。

アプリの名前とアイコン

• アプリの名：経費精算
• アイコンの設定：表示されているアイコンに選択したいアイコンが無い場合は、画面では表示されていませんが右側の「参照」ボタンをクリックしてパソコン内の画像などを選択する事が出来るようです。
• 背景色：好きな背景色を選択して下さい。

画面のサイズと向き

詳細設定

左側の「名前を付けて保存」をクリックします。

• クラウド
• このコンピュータ

の選択があります。ここでは「クラウド」を選んで「保存」します。

一旦保存が完了すると下記画面になります。共有についてはアプリが完成してから行います。

その後は自動的に保存されるようになります。

～～～～～～～～～～～～～～～～～
これ以降は前の記事になります。
～～～～～～～～～～～～～～～～～

「共有の設定」画面になります。他にも「詳細」「バージョン」「設定」「分析(プレビュー)」などの設定画面がありますが、ここは飛ばして次に進みます。
上段右側に、「再生」「編集」「削除」があります。ここの「編集」をクリックします。

下記のよう「ロックされています。」のメッセージが出ますが、ここではほとんど編集しているものって無いので無視して「オーバーライド」をクリックします。又、途中で「 PowerApps Studio へようこそ」のメッセージが出ますが、ここではスキップして下さい。

アプリの開発

左側のツリービューの中の１個、１個のコントロールをクリックし、それに該当するコントロールが画面中央のデザイン画面に示されますのでそれぞれのコントロールの様子を是非、確認してみて下さい。設定されている内容がなんとなくわかってくると思います。

表示項目の追加、編集

経費精算一覧表にこれまで登録してあるデータを表示します。
ここでは、表示する項目が設定されていないので下記の手順で行います。

• ツリービュー画面の BrowseGallery1 をクリックしプロパティ画面の「プロパティ」を選択します。
• フィールド欄の「編集」（使用される環境によって「 8 件選択済み」と表示される場合もあります。）をクリックして「データソース」画面を開きます。

• Body1、Subtitle1、Title1 の項目を１個づつクリックして右側の下⇓をクリックして、ID、出張先、出発地など自分が表示させたい項目を選択して下さい。

スタート画面の作成

通常、スタート画面は標準では自動作成されません。「挿入」「新しい画面」「空」をクリックして自由に作成する事になります。
作成すると左側「ツリービュー」の一番下に「Screen1」が追加され「デザインビュー」も真っ白な画面になります。

「Screen1」にマウスを移動し右ボタンをクリックすると「上へ移動」が表示されますのでこれを使って一番上まで移動させて下さい。

「Sucreen1」は一番上に移動されました。

次に「挿入」「メディア」「画像」をクリックします。

画像コントロールが表示されるので適当な位置とサイズに調整します。
右側のプロパティビューの中の画像欄で画像の選択が行えます。適当な画像が無い場合は「画像ファイルの追加」をクリックして自分が使用しているパソコンのフォルダから画像を選択する事が出来ます。

ツリービューの中にある image2 は logo などのように分かりやすい名前に変更して使う事も出来ます。

「挿入」「ラベル」をクリックすると下図のように「テキスト」のコントロールが作成されます。

• プロパティビュー画面で、テキストを「経費精算申請」に変更します。
• 上段の「ファイル」「ホーム」と並んでいる中から「ホーム」を選択しサイズの変更が出来ますので「40」に変更します。
• その横に B が表示されていますのでクリックして「太字」「中太字」「標準」「細字」から「太字」を選択します。
• 更に横に「フィル」から背景色を選択します。

下図のようになります。
画面右上の ▷（アプリのプレビュー）をクリックする事によりアプリを実行させてこれまでの作成状況を確認する事が出来ます。なお、閉じる時は画面右上の × をクリックして閉じて下さい。ここで、Screen1 の名前を HomeScreen と変更します。

新規申請ボタンの追加

• 「挿入」-「ボタン」をクリックしてボタンを適当な位置に配置します。
• テキストを「新規申請」に変更し、背景色などの変更も行います。
• ドロップダウンメニューを OnSelect し、数式バーに  NewForm(EditForm1);Navigate(EditScreen1,Cover) と設定します。

Navigate関数
Navigate（スクリーン名、アニメーション（None、Face、Cover、Uncover）の種類）

NewForm()関数
NewForm(スクリーン名) で、スクリーン画面を新規モードの画面で表示する

経費精算データの登録完了画面の作成

スタート画面と同じ方法で登録完了用の空白画面を作成する。

「ホーム」「新しい画面」「空」をクリックして作成しします。

完了メッセージを表示させる。

「挿入」「アイコン」「絵文字 – 笑顔」を選択します。（もちろん画像は別のものでも大丈夫です。）
次に「挿入」「ラベル」をクリックしてテキスト欄に「申請完了しました。」も追加します。

Screen1 の名前 を FinishScreen に変更する。データ入力画面の作成

この EditScreen の EditForm1 には、まだ全てのコントロールが表示されていなかったり、表示されている順番が違ったりしています。ここでこれらを整理したいと思います。

• EditForm1 をクリックします。
• プロパティ欄に「 8 件選択済み 」と表示されています。この部分をクリックします。
• 左側にコントロールの追加設定ができる画面が表示されます。
• コントロールの並び順を実務に合わせた並び順に変更します。
  （通常はコントロールをカーソルでドラッグして行えるのですが、今回自分の場合はどうしても出来ません。それぞれのコントロールの Y の値を変更して並べ替えました。）

下記のようになりました。又、意味は無いのですが、ツリービューに表示されるコントロール名を変更し入力順に番号を付けてみました。これの並べ替えは出来ないようです。
Primary ID の表示をクリックして、鍵マークが付いていたら鍵マークをクリックして解除し、Primary ID を「申請番号」に変更します。

既定値の設定

申請者番号に現在日付と時間を自動表示

Primary ID をクリックし、「詳細設定」をクリックします。ここで、もし鍵マークが表示されたらマークをクリックして解除します。今後も変更したい時に鍵マークの解除をお願いします。

下記 ← の数式バー欄の Parent.Default を Text(Now(),”[$-ja-jp]yyyymmdd-hhmmss”) に変更します。すると20180709-114606 を日付と時間を結合した文字列が表示されます。（この時に日付と時間 2018/07/09 11:46:06 ）

申請者欄に既定値としてOffice365に登録されている名前を自動的表示

申請者欄の DataCardValue10 （入力用）コントロールをクリックしドロップダウンメニューを Default にして、数式バー User(). と入力すると下にウインドウが開き、Email、FullName、Image が自動的に表示されます。ここでは FullName をクリックします。 すると自動的に BB の場合は 弘行 井手 と表示されます。

申請ボタンの追加

• EditForm1 をクリックして枠の下側に空欄を設けます。
• 「挿入」-「ボタン」をクリックしてボタンを配置し、適当な位置に移動してテキスト欄に「新規申請」と表示されます。
• ドロップダウンメニューを OnSelect し、数式バーに  SubmitForm(EditForm1) と設定します。

SubmitForm 関数
特定のフォームに対し、入力されているフォームの内容を設定しているデータソースへ送るという働きを行います。ここでは Common Data Service の「経費精算システム」のデータベースに入力したデータを追加します。

申請登録成功時の処理を追加する

• EditForm1 をクリックし、ドロップダウンメニューを OnSuccess する。
• 「アクション」「→移動」をクリックする。そして FinishScreen と ScreenTransition.Cover を選択する。

詳細データの表示

経費申請で入力したデータを表示する画面を作成します。
まず、DetailScreen1 の名前を ViewScreen に変更します。

現在、表示されている項目は不要なものがあったり、必要な項目が不足しています。上図の「 11 件選択済」欄をクリックして編集を行います。
又、ViewScreen 内のコントロール名も 52 番から順に変更してみました。（ EntryScreen で使用した 02sinseisya は既に使っているので同じ名前では使えません。52sinseisya のようにしました。後では並べ替えが出来るようになって欲しいです。）

BB は、コントロール名に番号を付けましたがあまり意味が無いようですので参考にしている方はそのままのコントロール名をお勧め致します。

これ以降は、しばらくお待ち下さい。