前回は、Microsoft Lists を使って会議室予約システムのデータ構造を設計しました。
「会議室マスタ」と「予約リスト」を分け、会議室そのものの情報と、日々発生する予約情報を別々に管理する構成にしています。
ここまでで、システムのデータを保存する土台ができました。
今回から、いよいよ Power Apps を使って実際に利用するアプリを作っていきます。
ただし、いきなり予約機能を作り始めるのではなく、まずはアプリ全体の画面構成を考え、Microsoft Lists と接続してデータを表示できるところまで進めます。
今回のゴール
今回のゴールは以下の3つです。
- Power Apps でアプリを作成する
- Microsoft Lists と接続する
- 会議室マスタのデータを画面に表示する
まずは「Listsに保存されているデータをPower Appsから利用できる」という、アプリの基本部分を作ります。
まずは画面構成を考える
Power Apps を開いてすぐにコントロールを配置してもアプリは作れます。
ただ、今回の目的は単に動くものを作ることではありません。
ある程度きちんとした業務アプリとして作り込むことを目標にしているため、まずは必要な画面を整理しました。
現時点では、以下のような画面を考えています。
- ホーム画面
- 会議室一覧・空き状況確認画面
- 予約登録画面
- 自分の予約確認画面
- 予約詳細・編集画面
今後作りながら変更する可能性はありますが、まずはこの構成をベースに進めます。
Power AppsとMicrosoft Listsを接続する
今回のアプリでは、前回作成したMicrosoft Listsをデータソースとして利用します。
Power Apps側から、
- 会議室マスタ
- 予約リスト
の2つを接続します。
これによって、Power AppsからListsに登録されているデータを参照したり、逆にPower Appsから予約データを登録したりできるようになります。
ここでようやく、
「Microsoft Listsをデータベースとして使い、Power AppsをGUIとして使う」
という、最初に考えていた構成が実際に形になってきます。
こちらがホーム画面を開いた状態
新規作成をクリック
デザインは一番左のレスポンシブを選択
空のアプリが作成されました
まずは、一番上の設定メニューから基本的な設定をしておきます
ここでは、アプリの名称を変更しておきます
今回は、名前を「会議室予約アプリ」、説明欄にアプリの説明を入力しました。
終わったら、右下の閉じるをクリックします
続いて、データに接続します
左のメニューペインから、＋の下のマーク（四角形の集合体みたいなやつ）をクリック
データの追加をクリックしたら、SharePointをクリックします
前回作成した会議室予約システムをクリック（テナント名）
ここで、会議室マスタ、予約リストの２つにチェックを入れて、下の接続をクリックして完成
まずは会議室一覧を表示してみる
データソースへの接続ができたら、最初に会議室マスタの情報を表示してみます。
Power Appsには「ギャラリー」という、複数のデータを一覧表示するためのコントロールがあります。
今回はこのギャラリーを使って、
- 会議室名
- 階数
- 定員
- 利用可否
などを表示します。
ここではまだ予約処理は作りません。
まずは、
「Listsに登録した会議室情報をPower Appsから正しく取得して表示できる」
ところまで確認します。
一番上の挿入をクリックして、垂直ギャラリーを選択します
ギャラリーのデータソースは、「会議室マスタ」を選択する
垂直ギャラリーが表示されて、会議室マスタの内容が表示されました。
ここから、少し駆け足になります。不要な画像はクリックして、Deleteキーで削除
また、会議室名の下の数字は階数を表しているのですが、このままだと何のことか分かりません
階数が表示されてる、ラベルをクリック
数式を直します「”階数:” & ThisItem.階数」
こうすることで、ラベルの前に階数:が追加されて意味がわかりやすくなります。
また、利用可否も表示したいですよね
既存の階数:1と表示されているラベルをコピーして、そのまま貼り付けします。
貼り付けたラベルの数式を「”利用可否” & ThisItem.利用可否」と直すと、以下のように利用可否が表示されます
続いて、定員も追加してみます
ラベルをコピペして、数式を以下のようにすると、店員:4人と表示されましたね
ただ表示するだけでは終わらせない
今回のシリーズでは、Power Appsの操作方法を覚えるだけではなく、実際に利用する業務アプリとしてどう作るかも考えていきます。
そのため、一覧が表示できた後は、
- 利用停止中の会議室をどう見せるか
- 階数で絞り込めるようにするか
- 定員をどのように表示するか
- スマートフォンでも使いやすい画面にするか
といったUIについても考えていく予定です。
Power Appsは比較的簡単に画面を作れますが、「作れること」と「使いやすいこと」は別です。
このあたりも、実際に作りながら試行錯誤してみます。
今回の設計メモ
今回採用する方針
- Power AppsをGUIとして利用する
- Microsoft Listsをデータソースとして利用する
- 最初に画面構成を考えてから実装する
- まずは会議室マスタの参照から作る
今回まだ作らないもの
- 予約登録
- 予約変更
- 予約キャンセル
- 重複予約チェック
- Teams通知
- Power Automateによる自動処理
最初から全部作るのではなく、機能を小さく分けて、一つずつ動作を確認しながら作っていきます。
次回
次回は、今回作ったPower Appsに「予約する」機能を追加します。
会議室と利用日時を選択して予約を登録し、その内容をMicrosoft Listsの予約リストへ保存するところまで作ってみます。
ここから、単なるデータ表示アプリではなく、実際にデータを登録・更新する業務アプリらしい機能に入っていきます。
コメントを残す