PowerAppsで一般的なクラウドサービスにあるような業務アプリを作ったので記事にしました。この記事を読んで実際にアプリを作ってみることでPowerApps開発におけるハードルを下げる事ができれば幸いです。

本記事で構築する業務アプリ画面です。簡単に作れてすぐに使える
　

PowerAppsのとっつきにくさはディグってもよく分からない事が多い！に尽きると思います。キーワード検索でHitしたものを読んだところで（公式サイトすら）意味が分からなくて、癖も強いので結構ハマります。結局、trial&errorで色々やって問題が解決して、あーそういうことかって後から理解が追いつくような方は多いと思います（学習コストが高い）。なので敬遠してSalesforceやkintoneといった世のクラウドサービスを活用しようという思考に行きがちですが、今度はそのサービス利用に係る学習コスト、無駄なアカウント管理、ランニングコスト、データ移行、Office365連携が必要ならwebAPIを作ったり...メリット感が少ないので結局PowerAppsが優位になるケースが多いと思います

If you have an environment where you can use Office 365,
there is no reason not to use PowerApps.

構築手順

手順1：PowerAppsのホーム画面にて作成タブ内の「空のアプリ」を選択します。
　

手順2：「空のキャンバスアプリ」で作成をクリックし、「アプリ名」を入力して作成をクリックします。
　

モデル駆動型アプリとキャンバスアプリについて
モデル駆動型アプリは、Microsoft Dataverseデータベースを必要とします。モデル駆動型アプリのビューや詳細画面は、Dataverseのデータ構造に拠ってデザインされます。このため、アプリの作成者のスキルに依存せず、一貫性のある外観を作成可能です（自由度は低い）。
キャンバスアプリはDataverseを使用せずとも構築できます。データとサービスへのアクセスはコネクタを利用します。キャンバスアプリは、アーティストのキャンバスのような空白の画面で始まり、各要素の配置をして自由にレイアウトを作成することができます。Excelをデータベースとしてアプリを構築したい場合（本記事の場合）、こちらを選択します。

手順3：キャンバスアプリからExcelに接続するための準備

・事前準備としてExcelファイルを作成し、Excelファイル上にテーブルを定義します。

・作成したExcelファイルをOneDriveやSharePointに格納します。

手順4：アプリ編集画面でデータソースの追加でExcel（テーブル）を接続します。最後に識別子（主キー）を選択しますが、本記事では、日付列を識別子（ユニークキー）としました。

手順5：接続したExcelのデータをアプリ上に表示します。

・アプリ編集画面の挿入タブから「データテーブル(プレビュー)」をクリックし、「データソースの選択」でテ―ブル1を選択します。

・フィールドの編集から、データテーブルにフィールドを追加します。

・このようにExcelデータがアプリ編集画面上に表示されます

手順6：入力フォームからExcelのデータ（テーブル）をアプリから更新します。
　　　　本記事ではデータテーブルで選択している行の来客と売り上げを更新します。

・左サイドバーからコンポーネントを選択して更新用の入力欄を作成します。

・来客と同様に売り上げも入力欄を作成します。
　

・左サイドバーからコンポーネントを選択してボタンを作成します。
　
・ボタンを配置したら、onselectイベントを設定します。

ボタンを押すとonnselectに記載した以下の式を実行します
Patch(テーブル1,LookUp(テーブル1,日付=DataTable1.Selected.日付),{来客: TextInput1.Text,売り上げ:TextInput2.Text});

・テーブル1＝Excelに設定したテーブル
・DataTable1.Selected.日付＝薄い青で示されている行の日付を示す（上記のテストでは「2024/1/4」）
・TextInput1.Text＝来客の入力欄に記載した文字列（ TextInput1は部品の名前）
・TextInput2.Text＝売り上げの入力欄に記載した文字列（ TextInput2は部品の名前）

開発画面で動作を実行したい場合、ALT押しながらクリックかボタンをクリックします。

来客の入力がないときはボタンを非活性にして更新不可の制御を行います。
・非活性（入力必須）の設定
　ボタン>詳細設定＞DisplayModeに以下を設定します。
　If(TextInput1.Text<>"",DisplayMode.Edit,DisplayMode.Disabled)

ボタンなどマウスフォーカス部分にツールチップを表示する場合
・ツールチップの設定
　ボタン>詳細設定＞Tooltipに以下を設定します。
"選択したレコードを更新します”

手順7(appendix)：レスポンシブレイアウトの設定

レスポンシブレイアウトについて
レスポンシブとは、画面サイズやフォームファクタに対して自動的にアプリを合わせるデザインです。マルチデバイス、フォームファクター、画面サイズで優れた UI と UX を提供する機能を指します。

・レスポンシブレイアウトを適用しない場合

・レスポンシブレイアウトを適用する場合

・レスポンシブにする手順
　（事前準備）例としてアプリのタイトルとユーザ名の部品を作成します。

・アプリの設定を変更します。
　

・まだレスポンシブの設定をしていないので、このようなレイアウトになります。

・サイドバーから水平コンテナーを選択して「Width」にscreen1.widthを入力します。

・水平コンテナーを画面の上部に移動させて、「アプリのタイトル」と「ユーザ名」を水平コンテナーの中に配置します。

・「アプリのタイトル」「ユーザ名」の設定を変更
　- プロパティ>幅（伸縮可能）をオンにする　※ユーザ名も同じようにする
　- プロパティ>最小幅を0にする　※ユーザ名も同じようにする

・iphone用に文字の大きさを調整します（画面の幅によって変数「widthtype」を）動的に変更）
　APPでプルダウンからFomulasを選択して下記のように設定します。
　なお、Fomulas内に書いた構文はアプリ起動時に実行されます。

widthtype=If(App.Width<=800,"Small",App.Width<=900,"Medium",App.Width<=1200,"Large","Extra Large");</INS>

・「アプリのタイトル」「ユーザ名」について「詳細設定」から「size」を以下のよう変更します。

Switch(widthtype,"Small",15,"Medium",20,25)

・以上の設定を行うことで、動的にサイズを変更するレスポンシブデザインが可能となります。

※縦方向に並ぶ場合は垂直コンテナーを用います。
　「部分を塗りつぶす」を変更することでコンテナー内の比率が変わります。
　うまくいかない時はscreen1の画面サイズの設定を変更してみてください。
Width：Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
Height：Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

以上です。ご精読いただき、ありがとうございました。

こちらの記事を参考にさせていただきました。有難うございました。

Power Appsのレスポンシブレイアウトをやってみた　～コンテナ解説編～
Power Apps：キャンバスアプリでレスポンシブレイアウト対応のアプリを作成する際の設計方針(1)