知識ゼロからはじめるローコーディング開発

Power Platformでのアプリ開発について、いろいろと書きたいと思います。

Power Apps で日用品管理アプリを作る

足りなくなったら常に補充をしておきたい日用品ってありますよね。洗剤とか調味料などです。こうした日用品は仕事帰りに買って帰る方も多いと思うのですが、何かにメモをしていても、書いたことが思い出せなかったり、メモがどこかにいったりしてわからなくなったりすることがあります。こうしたメモは一箇所に集めておいて、見る習慣をつけるのが良いのではないかと思いますが、どうせなら普段よく目にする自分のスマホで管理するのがベストですよね。というわけで、早速作ってみましたので作り方を書かせて頂きますね。

f:id:island3m:20211007153856p:plain

今回のアプリも Power Apps で作成します。データソースは Dataverse を使います。Dataverseを使用するには Power Apps の有償ライセンスが必要になるのですが開発者プランでも使用出来ますので、試してみたい方は下記URLの内容を参考に環境を作成してみて下さい。

■Power Apps 開発者向けプラン を試してみる

 

 

Dataverseでテーブルを作成するには、Power Apps のホームより「データ」「テーブル」を選択して「+新しいテーブル」を選択します。設定画面が表示されますので、必要事項を入力して作成ボタンを押します。今回は以下のように設定していますので参考にしてみて下さい。ここではテーブルの表示名は「DailyNecessities」と設定しています。テーブルの名前はデフォルトのままにしています。プライマリ名の列は表示名を「No」としています。

・表示名:DailyNecessities ※表示名の複数形、名前は自動的にセットされます。
・プライマリの列名の表示名:No ※名前は自動的にセットされます。

f:id:island3m:20211007154224p:plain

 

続いて列を作成します。「+列の追加」で列が作成出来ます。各列の設定内容は下図を参考にしてください。列の設定が出来たら、キーも忘れずに設定をします。

f:id:island3m:20211007154303p:plain

 

アプリを作成します。ホームから「Dataverse」を選択します。

f:id:island3m:20211007154339p:plain

 

接続画面より「作成」を選択します。

f:id:island3m:20211007154416p:plain

 

テーブル選択より先程作成したテーブル「DailyNecessities」を選択して「接続」ボタンを押します。

f:id:island3m:20211007154458p:plain

 

テーブル「DailyNecessities」のデータを一覧で確認をしたり、編集をしたりすることが出来るアプリが自動で作成されます。

f:id:island3m:20211007154525p:plain

 

自動作成されたアプリの内容を編集します。最初の画面「BrowseScreen1」から修正します。この時点で基本的な機能は作成済みですので一覧の表示内容だけ修正します。初期状態だと、Title1、SubTitle1、Body1の3つがあるはずです。ここのテキストラベルをもう一つ挿入追加して在庫状況を表示させます。在庫状況は0から3の数値で登録する仕様にしますので、Switch関数でそれぞれの数値にあったテキストを表示するようにします。

f:id:island3m:20211007154608p:plain

 

詳細画面「DetailScreen1」を修正します。フォーム[DetailForm1] を選択して「フィールドの編集」から下図のようにカードの内容を設定します。カードの各項目名は任意で設定して下さい。カード[Status] のテキストラベルは一覧と同じようにSwitch関数でテキストを表示させます。

f:id:island3m:20211007154659p:plain

 

編集画面を設定します。こちらもフォーム「EditForm1」の内容を「フィールドの編集」から下図のようにカードの内容を設定します。カード[Status]には挿入でスライダーを追加します。 スライダーの幅は最大3、最小0です。プロパティ「Default」には初期値の値をセットします。If文で新規登録時は3、編集時は登録してある値をセットします。
スライダーの値によって、テキストを表示するため、テキストラベルを追加します。こちらも詳細画面と同じようにSwitch関数をセットしていますが、参照する値がスライダーの値になっていることに注意をして下さい。

f:id:island3m:20211007154758p:plain

 

最期に好きな色でアプリをデザインすれば完成です。テキストの背景色を変えるだけでも全体のイメージはずいぶん変わりますので、色々と試してみて下さい。
下図は一例ですが、台所の画像を背景を置いて、テキストの背景を半透明にしてみました。ステータスは数値の値で色が変わるように設定しています。これはプロパティ「Fill」にSwitch関数で条件を設定するだけで出来ます。

f:id:island3m:20211007154834p:plain

 

実際に動かすとこのようになります。