Power Appsで在庫管理アプリを作る方法を解説

この記事では、在庫管理アプリをPower Appを用いて作成する手段を解説していきます。在庫管理業務を効率化したいと考えている製造・小売企業の担当者の方は、ぜひ参考にしてください。

Microsoft Power Appsとは

ローコードで簡単なアプリケーションが作成できる開発キットです。直感的なUIで現場レベルのツール開発ができるため、主に製造・小売企業の業務効率化に利用されています。

Power Appsで在庫管理アプリを作る方法

ここでは、具体的なアプリ作成方法を詳しく解説していきます。

「Dataverse」の設定

◆テーブルの作成

まずはPower Appsの「Dataverseのテーブル」を選択してください。
表示名は、作成するデータソースの名前にします。なお、日本語で入力すると反映されないので注意してください。
「作成」をクリックすれば完成です。

◆列の追加

前項で作成したテーブルを選択します。
「列」を選択します。
「列の追加」を選択します。
「表示名」「名前」「データ型」を追加します。
すべての入力が終わったら「完了」を押しましょう。

◆フォームの追加

「フォーム」を選択します。このときに、「フォームの種類」が「Main」となっている情報を選びます。
初期の状態ではサイドバーがツリービューとなっているので「テーブル列」を選択します。
追加したい列を選択します。
「選択したセクションに追加します」を選択して、前項で作成した管理番号から在庫数までをすべて入力します。
「保存」→「公開」の順にクリックして完了です。

◆ビュー追加

ビューを選択して「アクティブな在庫管理テーブル」を選びます。
テーブル列には前項で作成した列があるので、選択して追加します。
「上書き保存」→「公開」の順にクリックして完了です。

◆レコードの追加

「レコードの追加」から「データ」を選択します。
「新しい在庫管理テーブル」が表示されるので、「保存して閉じる」を選択しましょう。

以降は「値を記入する」→「保存して閉じる」を繰り返せばレコードが蓄積されていきます。

Power Appsの設定

◆リスト表示させる画面の作成

「キャンパスアプリを一から作成」を選択します。
アプリ名を記入します。形式は「電話」をチェックして「作成」を選択します。
初期画面に戻ったら「挿入」→「ボタン」を選択します。
ツリービューから任意の名前に変更します。
ボタンを追加し画面上に2つ表示させます。
「テキスト」からボタンの名前を「在庫管理」と「商品登録」に変更します。
「ラベル」を選択します。
ラベルが画面に表示されたら、ド画面上に移動させてサイズを変えます。
テキストを「在庫管理」に変更します。
フォントサイズ、アライメント、背景色を変更します。
「画面の複製」を選択して4つ複製します。
画面の名前を変更します。（InventoryControlList、InventoryControlDetail、Edit、NewAdd)
「InventoryControlList」を選択します。
画面の複製したボタンを削除します。
「ギャラリー」から「縦方向(空)」を追加します。
「テキスト」→「テキスト入力」と選択します。
「挿入ペインで項目を追加する」を選んでから「テキストラベル」を3つ追加します。
「管理番号」「商品名」「商品登録日」が表示されたら、そのなかの「商品登録日」を選択します。
プロパティ欄でTextを選択したら、関数を「ThisItem：商品登録日」から「ThisItem：在庫数」に変更します。背景色も変更しておくといいでしょう。
「アイコン」→「右」と選択してアイコンを追加します。
テキスト入力できるコンポーネント名をメモします。
既定のテキストを削除したのち、ヒントのテキストに「商品検索」と入力します。
「gallery」を選択します。
プロパティを「Items」にして、関数に「Search(在庫管理テーブル, さきほどメモしたコンポーネント名,“cr08b_product_name”)」と入力します。なお「cr08b_product_name」は検索したい列に合わせて適時変更してください。
プロパティで「OnSelect」を選択します。
関数に「Navigate(InventoryControlDetail,ScreenTransition.Cover)」と入力します。

◆詳細画面の作成

InventoryControlDetailを選択して「フォーム」→「ディプレイ」と進みます。
ディスプレイを最大にして「フィールドの編集」から「在庫管理のテーブル」を選択します。
プロパティを「Item」にして関数に「Gallery3.Selected」と入力します。
フィールドに表示された内容を適時追加・削除します。
「戻る」「ゴミ箱」「編集」の3つのアイコンを追加します。
「戻る」のOnSelectにBack()、「ゴミ箱」にRemove(在庫管理テーブル, Gallery3.Selected);Notify(“削除しました”,NotificationType.Success);Back()、「編集」はNavigate(Edit,ScreenTransition.Cover)関数を入力します。

各々をOnSelectに関数を入力します。

◆編集画面の作成

「フォーム」→「編集」と進みます。
「Dataverse」で作成済みのテーブルを関連させます。
「チェック」と「キャンセル」のアイコンを追加します。
チェックの「OnSelect」にSubmitForm(EditForm1);Notify(“”,NotificationType.Success);Back()を、キャンセルにはBack()関数を入力します。

◆新規商品登録画面の作成

「フォーム」から編集用のフォームを追加します。
作成したDataverseを選択して、データソースを紐づけします。
フィールドには管理番号・商品名・商品登録・在庫数を追加します。
追加ボタンとキャンセルボタンを追加します。
追加ボタンとOnSelectプロパティに関数SubmitForm(Form1_1);Back();Notify(“在庫データに追加しました”,NotificationType.Success)を、キャンセルボタンはBack()を入力します。
在庫一覧ボタンのOnSelectプロパティにNavigate(InventoryControlList)を、商品登録ボタンはNewForm(Form4);Navigate(NewAdd)関数を入力します。