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



はじめに

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

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

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

初期画面など BB の環境と違うので若干違う画面になるかもしれません。この点は BB の前のサイトなども参考にして下さい。

開発の準備

BB の場合、既にスタート画面にある PowerApps のアイコンからスタートします。
これまで試したサンプルアプリや自分が作成したアプリが表示されます。
左側の「新規」をクリックします。

これまでは、SharePoint や Dynamics365 のデータを使っていましたが、今回は初めて Common Data Service の携帯電話レイアウトを使います。

Common Data Service を確認し、「 web.powerapps.com に移動します。」をクリックします。

データベースの作成

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

「新しい環境」の設定

  • 環境名  :テスト  (自由に名前付可能)
  • リージョン:Japan  (既定)
  • 環境の種類:試用版 (試用版と運用版から選択)

「環境の作成」ボタンをクリックすると確認があり、「データベースの作成」ボタンをクリックします。

結構面倒ですけど大切な設定ですので、円と日本の設定を行い「データベースの作成」をクリックします。

データベースの作成を完了したら「ホーム」に戻り、環境設定の確認を行います。

エンティティの作成

下図の「データ」の「エンティティ」をクリックします。

エンティティ画面になったら「+新しいエンティティ」をクリックします。

入力画面が出てきます。

  • 表示名    :経費精算
  • 表示名の複数形:経費精算
  • 名前     :Expense (費用の意味) 

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

フィールドの作成

経費精算エンティティのフィールド入力画面になります。ここで「+フィールドの追加」をクリックします。すると入力エリアが出てくるので入力を行います。

表示名 名前 データ型
 申請日  SubmitDate  Date only
 利用日  VisitDate  Date only
 出張先  VisitTo  Text
 説明  Description  Text Area
 出発地  LocatuibFrom  Text
 到着地  LocationTo  Text
 金額  Amount  Whole Number
 申請者  Applicant  Text
 承認者  Approver  Text
 承認コメント  Comment  Text
 承認日  ApproveDate  Date only

入力が終わったら下記の通りになります。表示順序はアイウエオ順かな?と思うように入力順では無いようです。又、1行目もそのままでいいようですね。

確認したら「ホーム」ボタンでホームに戻ります。

アプリ作成の前準備

下記図のように「データから開始」で携帯電話マークの下の「このアプリの作成」をクリックします。

画面が戻ってしまいました。間違ったかも知れません。ここで、「 Common Data Service の携帯電話レイアウト」をクリックします。

テーブル欄には知らないたくさんのテーブルが表示されます。ここで、「経費精算」と入力して検索をします。

テーブル選択欄に「経費精算」が表示されたら、それをクリックして「接続」をクリックします。

「 PowerApps Studio へようこそ」が表示されますが、ここでは「スキップ」で進みます。

やっと経費精算のアプリを作る画面になりました。いろんなツールバーやボタンなどが表示されています。直ぐ覚える必要は無いと思いますが一通り見ておいたら今後の開発の役に立つと思います。

アプリの保存

画面上段の一番左側の「ファイル」をクリックし下記画面が表示されたら「アプリの設定」をクリックして下さい。

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

名前を付けて保存をクリックします。

「経費精算」と名前を付けて保存します。

アプリ名を確認し、「保存」をクリックします。一旦保存が完了すると、その後は自動的に保存されるようになります。

当然、社内で共有すると思いますので「このアプリを共有する」をクリックします。

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

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

アプリの開発

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

表示項目の追加、編集

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

  • ツリービュー画面の BrowseGallery1 をクリックしプロパティ画面の「プロパティ」を選択します。
  • フィールド欄の「編集」(使用される環境によって「 8 件選択済み」と表示される場合もあります。)をクリックして「データソース」画面を開きます。
  • Body1、Subtitle1、Title1 の項目を1個づつクリックして右側の下⇓をクリックして、申請日、出張先、金額など自分が表示させたい項目を選択して下さい。

スタート画面の作成

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

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

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

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

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

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

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

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

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

新規申請ボタンの追加

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

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

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

データ入力画面の作成

EditScreen の名前を分かりやすいように EntryScreen と変更します。

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

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

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

既定値の設定

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

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

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

申請者欄に既定値としてユーザーのメールアドレスを自動的表示

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

申請ボタンの追加

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

SubmitForm 関数
特定のフォームに対し、入力されているフォームの内容を設定しているデータソースへ送るという働きを行います。
詳しい設定は後日調べて行います。

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

  • EditForm1 をクリックし、ドロップダウンメニューを OnSuccess する。
    (下記画面では隠れてNavigate が表示されています。)
  • 「アクション」「→移動」をクリックする。そして FinishScreen と ScreenTransition.Cover を選択する。

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

詳細データの表示

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

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

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

登録完了用の空白画面を作成する。

「ホーム」「新しい画面」「空」をクリックして作成し、ツリービューに表示される Screen1 を FinishScreen に変更する。

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

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

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