LoginSignup
7
5

More than 5 years have passed since last update.

@IKETA(IKETA)

PowerApps で名刺管理アプリを作ってみる(3)

Posted at

前回は、Microsoft Flow を使用して、データベース処理 + Slack 通知のワークフローを作成した。これでアプリに必要なリソースは全て揃ったので、本稿では 名刺管理アプリの作成に取り掛かる。

これまでの記事
PowerApps で名刺管理アプリを作ってみる(1) PowerApps の環境とデータベースの作成
PowerApps で名刺管理アプリを作ってみる(2) ワークフローの作成

画面設計

名刺管理アプリには、名刺を一覧表示する「名刺リスト画面」と、追加、更新、削除を行う「名刺詳細画面」を用意する。
image

各ボタンクリック時の動作と画面遷移は、以下のようにする。

  • 名刺リスト画面
    • [ + ] ボタンをクリックすると、追加モードで名刺詳細画面を表示する。
    • 各名刺の [ > ] ボタンをクリックすると、編集モードで名刺詳細画面を表示する。
  • 名刺詳細画面
    • 追加,更新ボタンをクリックすると、名刺が追加、または更新される（追加モードの場合は追加、編集モードの場合は更新となる）。その後、名刺リスト画面へ戻る。
    • 削除ボタンをクリックすると、名刺が削除される。その後、名刺リスト画面へ戻る。
    • [ ← ] ボタンをクリックすると、名刺リスト画面へ戻る。

空アプリの作成

まずは PowerApps スタジオを起動し、環境が以前に作成した "My Environment" であることを確認する。その後、[新規] メニューの [空のアプリ] から、[携帯電話レイアウト] をクリックする。
image

空のアプリが作成され、開発画面が表示される。
image

名刺リスト画面の作成

アプリ作成直後は Screen1 が表示されている状態になるので、このまま [レイアウト] から [項目、ヘッダー、説明を参照] をクリックする。
image

これで、Screen1 がリスト表示用のレイアウトになる。
image

データソースに接続

リストに名刺データを表示させるため、名刺エンティティに接続する必要がある。引き続き、Screen1 のオプションから、[データソース] の [データソースの追加] をクリックし、[Common Data Service] をクリックする。
image

エンティティの一覧が表示されるので、[名刺] を選択し、[接続] をクリックする。
image

これで、Screen1 から名刺エンティティを参照できるようになる。
※実際には、アプリ内のすべての画面から参照できるようになる。
image

ワークフローの追加

Microsoft Flow で作成したワークフローをアプリに追加して、使用できるようにする。[アクション] タブの [Flows] をクリックすると、ワークフローの追加画面が表示される。ワークフローについては、前回の記事 を参照されたい。
image

image アイコンをすべてクリックする。
image

Screen1 の OnVisible イベントに、ワークフローを実行するための関数が自動で追加されるが、ここでは不要なので削除する。
image

これで、アプリにワークフローが追加された。データソースの一覧を見ると、追加されていることが確認できる。
image

名刺リストを表示

続いて、BrowseGallery1 を選択する（Screen1 下部の白い空白をクリックすれば、選択状態になる）。
image

詳細設定の [Items] を以下の値にする。

BrowseGallery1.Items
SortByColumns(Search(名刺, TextSearchBox1.Text, "CompanyName", "Name", "Tel", "email"), "CompanyName", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))
  • Search 関数は、名刺エンティティから、TextSearchBox1.Text で指定した検索条件を反映したデータテーブルを返す。CompanyName, Name, Tel, email は検索の対象となる列である。
  • SortByColumns 関数は、データテーブルを CompanyName 列でソートする。
  • If 関数は、第 1 引数が true か false かを判定し、true ならば第 2 引数を、false ならば第 3 引数を実行する。SortDescending1 という変数が true の場合は、ソートオーダーを Descending (降順) にし、false の場合は Ascending (昇順) にする。

次に、BrowseGallery1 のオプションを開き、コンテンツを以下のようにする。
image

これで、名刺リストが表示されるようになった。各データの上が名前で、下が会社名となる。
image

名刺詳細画面の作成

続いて、名刺詳細画面を作成する。メニューバーから [新しい画面] をクリックすると、Screen2 が作成される。
image

レイアウトから、[無限スクロールのキャンバス] をクリックする。
image

詳細表示と編集用フォームの追加

[挿入] タブの [フォーム] - [編集] をクリックし、Screen2 に編集フォームを追加する。
image

追加された Form1 を、青い帯の [タイトル] の真下に移動し、サイズを適当に調整する。
image

Form1 のオプションから、フォームのカスタマイズの image をクリックして、データソースとして名刺エンティティを選択する。

名刺エンティティのフィールドが表示されるので、[CampanyName], [Name], [Tel], [email], [URL] の各 image を、順にクリックする。Form1 に入力フィールドが追加される。
image

操作用アイコン（ボタン）の追加

この画面では、追加,更新、削除、前のページへ戻る用の 3 つのアイコンを追加する。
まずは、戻る用アイコンを追加してみる。[挿入] タブの [アイコン] - [左矢印] をクリックする。
image

icon1 が追加されるので、詳細設定から以下のようにプロパティの値を変更する。

icon1.property
Color: RGBA(255,255,255,1) 
Width: 48, Height: 48
X: 12, Y: 20

同様に、追加,更新用の編集アイコン (icon2) と、削除用ごみ箱アイコン (icon3) を追加し、以下のプロパティ値とする。

icon2.property
Color: RGBA(255,255,255,1) 
Width: 48, Height: 48
X: 580, Y: 20
icon3.property
Color: RGBA(255,255,255,1) 
Width: 48, Height: 48
X: 516, Y: 20

アイコンの配置後は、以下のようになる。
image

プロパティとアクションの設定

これで 2 つの画面が作成できたので、続いて各画面のコントロールのプロパティの設定と、アイコンにアクションを設定し、アプリに "動き" を付けていく。

名刺リスト画面のプロパティとアクション

アイコン (IconNewItem1)

image をクリックすると、名刺詳細画面に "追加モード" で遷移するようにする。image アイコンを選択し、アクションの OnSelect イベントを以下のよう設定にする。

IconNewItem1.OnSelect
NewForm(Form1); Navigate(Screen2, ScreenTransition.Fade)
  • NewForm 関数は、指定したフォーム（ここでは名刺詳細画面の Form1）を "追加モード" にする。
  • Navigate 関数は、第 1 引数で指定した画面（ここでは Screen2）に遷移する。第 2 引数の ScreenTransition は画面遷移するときの視覚効果である。Navigate 関数の説明と合わせて、こちら を参照されたい。
  • アクション内で複数の関数を順番に実行したい場合は、関数と関数の間を ; で区切る。

アイコン (IconRefresh1)

image をクリックすると、名刺リストを最新の情報に更新するようにする。image アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

IconRefresh1.OnSelect
Refresh(名刺)
  • Refresh 関数は、データソースを最新の情報に更新する。アプリのデータソースは、接続されているデータベース（ここでは Common Data Service の 名刺テーブル）とリアルタイムで同期を取っているわけではないので、何かのタイミングで同期を取る必要がある。

アイコン (NextArrow1)

image をクリックすると、名刺詳細画面に "編集モード" で遷移するようにする。image アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

NextArrow1.OnSelect
EditForm(Form1); Navigate(Screen2, ScreenTransition.Fade)
  • EditForm 関数は、指定したフォーム（ここでは名刺詳細画面の Form1）を "編集モード" にする。

画面のタイトル (LblAppName1)

LblAppName1 の Text プロパティの値を以下のように設定する。
image

image

名刺リスト画面 (Screen1) の OnVisible イベント

OnVisible イベントは、この画面が表示されたときに実行されるイベントである。名刺リスト画面が表示されたときに、最新の名刺リストを表示させたいので、IconRefresh1 の OnSelect イベントと同じようにここでも Refresh 関数を実行する。
image

名刺詳細画面のプロパティとアクション

アイコン (Icon1)

image をクリックすると、名刺リスト画面に戻るようにする。image アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

Icon1.OnSelect
Back(ScreenTransition.Fade)
  • Back 関数は、遷移元の画面に戻る。

アイコン (Icon2)

image をクリックすると、追加モードの場合は新しい名刺の追加、更新モードの場合は編集中の名刺が更新されるようにする。image アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

Icon2.OnSelect
If(Form1.Mode=FormMode.New, 
    'BusinessCard-Insert'.Run(DataCardValue1.Text, DataCardValue2.Text,
        DataCardValue3.Text, DataCardValue4.Text, DataCardValue5.Text));
If(Form1.Mode=FormMode.Edit,
    'BusinessCard-Update'.Run(BrowseGallery1.Selected.PrimaryId, DataCardValue1.Text,
        DataCardValue2.Text, DataCardValue3.Text, DataCardValue4.Text, DataCardValue5.Text));
Back(ScreenTransition.Fade)
  • このアクションは、本アプリで一番難しい処理になるが、追加モード (FormMode.New) と更新モード (FormMode.Edit) で処理を分け、それぞれで 追加用 (BusinessCard-Insert) と更新用 (BusinessCard-Update) のワークフローを呼び出している。ワークフローは、'ワークフロー名'.Run で実行できる。
  • DataCardValue1.Text から DataCardValue5.Text は順に、会社名, 名前, 電話番号, メールアドレス, URL であり、それぞれ ユーザーがテキストボックスに入力した値である。
  • 'BusinessCard-Update'.Run 関数の引数に指定されている BrowseGallery1 とは、名刺リスト画面のリストコントロールであり、Selected は、リストから現在選択されているアイテム（名刺テーブルのレコード）を表す。つまり BrowseGallery1.Selected.PrimaryId とは、「編集中の名刺の PrimaryId の値」ということになる。
  • ワークフローの処理が終わったら、Back 関数で名刺リスト画面に戻るようにする。

アイコン (Icon3)

image をクリックすると、編集中の名刺が削除されるようにする。image アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

Icon3.OnSelect
'BusinessCard-Delete'.Run(BrowseGallery1.Selected.PrimaryId);
Back(ScreenTransition.Fade)
  • 'BusinessCard-Delete' は、同じく前回の記事で作成した名刺削除用のワークフローである。
  • ワークフローの処理が終わったら、Back 関数で名刺リスト画面に戻るようにする。

また、削除アイコンは 追加モードの場合は表示させたくない。そこで、Visible プロパティを以下のように設定する。

Icon3.Visible
If(Form1.Mode=FormMode.New, false, true)
  • Visible プロパティが false の場合は、削除アイコンが表示されなくなるので、If 関数を使用して、追加モードのときだけ false、それ以外は true となるようにする。

画面のタイトル (LblAppName2)

名刺詳細画面のタイトルは、追加モードと編集モード表示を分ける必要がある。そこで、LblAppName2 の Text プロパティを以下のように設定する。

LblAppName2.Text
If(Form1.Mode=FormMode.New, "追加", Concatenate("更新 (", BrowseGallery1.Selected.PrimaryId, ")"))
  • If 関数を使用して、追加モードのときは "追加" と表示されるようにし、編集モードのときは "更新 (編集対象名刺の PrimaryId)" と表示されるようにする。
  • Concatenate 関数は、複数の文字列を結合して、ひとつの文字列とする。

編集フォーム (Form1) の Item プロパティ

編集フォームには、名刺リスト画面で選択した名刺のデータが表示されるようにしたいので、BrowseGallery1.Selected と指定する。
image

この Item プロパティの値は、追加モードのときは無視される。よって、If 関数でモード別の処理を書く必要はない。

設定値まとめ

これまで説明したプロパティ、アクションの設定値を、画面とコントロールごとにまとめておく。

画面 コントロール プロパティ（アクション） 設定値
名刺リスト BrowseGallery1 Items SortByColumns(Search(名刺, TextSearchBox1.Text, "CompanyName", "Name", "Tel", "email"), "CompanyName", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))
IconNewItem1 OnSelect NewForm(Form1); Navigate(Screen2, ScreenTransition.Fade)
IconRefresh1 OnSelect Refresh(名刺)
NextArrow1 OnSelect EditForm(Form1); Navigate(Screen2, ScreenTransition.Fade)
LblAppName1 Text "名刺リスト"
Screen1 OnVisible Refresh(名刺)
名刺詳細 Icon1 Color RGBA(255,255,255,1)
Witdh 48
Height 48
X 12
Y 20
OnSelect Back(ScreenTransition.Fade)
Icon2 Color RGBA(255,255,255,1)
Witdh 48
Height 48
X 580
Y 20
OnSelect If(Form1.Mode=FormMode.New, 'BusinessCard-Insert'.Run(DataCardValue1.Text, DataCardValue2.Text, DataCardValue3.Text, DataCardValue4.Text, DataCardValue5.Text)); If(Form1.Mode=FormMode.Edit, 'BusinessCard-Update'.Run(BrowseGallery1.Selected.PrimaryId, DataCardValue1.Text, DataCardValue2.Text, DataCardValue3.Text, DataCardValue4.Text, DataCardValue5.Text)); Back(ScreenTransition.Fade)
Icon3 Color RGBA(255,255,255,1)
Witdh 48
Height 48
X 516
Y 20
OnSelect 'BusinessCard-Delete'.Run(BrowseGallery1.Selected.PrimaryId); Back(ScreenTransition.Fade)
Visible If(Form1.Mode=FormMode.New, false, true)
LblAppName2 Text If(Form1.Mode=FormMode.New, "追加", Concatenate("更新 (", BrowseGallery1.Selected.PrimaryId, ")"))
Form1 Item BrowseGallery1.Selected

動作確認

以上で、アプリの作成は完了であるが、アプリが正常に動作するか確認してみよう。PowerApps スタジオのウィンドウ上で動作確認するには、PowerApps スタジオの画面右上にある image をクリックすることでアプリが起動する。
動作確認はどの画面からでもスタートできるので、名刺リスト画面 (Screen1) が表示されている状態で image をクリックする。
image

動作確認のアプリが起動する。
image

追加 → 更新 → 削除 の流れを試してみよう。まずは image アイコンをクリックして、追加モードで名刺詳細画面に遷移する。各フィールドに適当な値を入力して image アイコンをクリックする。
image

名刺リスト画面に戻り、追加した名刺が表示されていることが確認できる。
※名刺リスト画面に戻ってもリストが更新されない場合は、image アイコンをクリックする。
image

Slack に、名刺を追加したことが通知されていることを確認する。
image

続いて、作成した名刺の image アイコンをクリックして、編集モードで名刺詳細画面を表示する。各フィールドには、この名刺のデータが表示されているので、適当に値を変更して image アイコンをクリックする。
image

名刺リスト画面に戻り、更新した名刺が表示されていることを確認する。
image

Slack に、名刺が更新されたことが通知されていることを確認する。
image

検索テキストボックスに、更新した名刺のメールアドレスを指定する。名刺が条件により絞られることを確認する。
image

最後に、この名刺の image アイコンをクリックして、編集モードで名刺詳細画面を表示し、image アイコンをクリックする。
image

名刺リスト画面に戻り、この名刺が表示されなくなる（削除されている）ことを確認する。
image

Slack に、名刺が削除されたことが通知されていることを確認する。
image

動作確認が終了したら、image をクリックして、アプリを閉じる。

アプリの保存

アプリを保存するには、[ファイル] をクリックし、[アプリ名] に適当な名前を付けて、[保存] をクリックする。ここではアプリ名を "BusinessCardList" とする。
image

アプリの共有と実行

作成したアプリを組織内で共有する場合は、PowerApps スタジオの [ファイル] タブをクリックし、メニューから [共有] をクリックする。
image

Web ブラウザで PowerApps ポータルが表示されるので、組織内のユーザーを指定する。組織全体に共有したい場合は、[組織と共有] をクリックする。
image

アプリを実行するには、再生ボタンをクリックする。
image

Web ブラウザ上で、アプリを動かすことができる。
image

また、PowerApps スタジオの [開く] メニューからも、アプリを実行できる。
image

PowerApps スタジオでアプリが動作する。
image

スマホで PowerApps アプリを実行する場合は、スマホ用の PowerApps をダウンロードする。

以下は iPhone で実行したときの画面である。このアプリは携帯電話レイアウトで作成しているので、ちょうど綺麗にディスプレイに収まるようになっている。
image

まとめ

PowerApps で名刺管理アプリを作成して思ったことは、とてもスピーディーに作成できることだ。もちろん、PowerApps のルールについてある程度勉強する必要はあるが、スクラッチ開発でプログラムを組みよりは、早くアプリを展開できるのではないかと感じた。
また、Microsoft Flow や様々なデータソースと簡単に接続できる点も魅力的である。既存のサービスと連携するアプリを開発することは容易ではないが、PowerApps ならば、あらかじめ用意されたデータソースの接続を利用するだけである。
作成したアプリをチーム内で共有することも、とても簡単でうれしいポイントである。アプリはもともとクラウド上に作成されるので、利用者への配布などは考える必要なく、アプリの実行も PowerApps を通して行うので、アプリをストアへ登録する必要もない。
ビジネスアプリの開発が必要になった場合は、PowerApps を検討するのも良い選択だろう。

参考文献

Customize a layout in PowerApps
https://powerapps.microsoft.com/ja-jp/tutorials/customize-layout-sharepoint/

EditForm, NewForm, SubmitForm, and ResetForm functions in PowerApps
https://powerapps.microsoft.com/ja-jp/tutorials/function-form/

Formula reference for PowerApps
https://powerapps.microsoft.com/ja-jp/tutorials/formula-reference/

Start a flow in an app
https://powerapps.microsoft.com/ja-jp/tutorials/using-logic-flows/

Share an app
https://powerapps.microsoft.com/ja-jp/tutorials/share-app/

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
5