- 操作環境：
- OS：Windows 11
- Webブラウザー：Edge
- 使用プラン：Microsoft 365 Business Premium(試用版)
- アプリ使用環境：
- OS：Android 14
- アプリ：PowerApps
要件・処理の流れ・項目の整理
この例では、以下のような要件にもとづき、アプリを実装します。
- 組織内で保有している書籍について、データを登録し、保有状況や借用・返却の状態を組織内メンバーが把握できるようにする。
- 新規登録時の入力補助として、書籍のバーコード(ISBNコード)を読み込み、書籍検索APIにより書籍名・著者等の情報を取得できるようにする。
- 組織内メンバーは誰でも全データの検索・更新(借用・返却のステータス変更含む)ができるようにする。
*本来は書籍データの削除をデータ管理者に限定する等した方が良いですが、この例では極めてシンプルな要件としました
このアプリの処理の流れは以下の通りとします。
なお、このアプリはSharePointリストのデータを元に作成できるギャラリーアプリを使用します。ギャラリーアプリにバーコード読込・情報取得機能と借用・返却機能を付加するという、手軽なアプリ作成のイメージとなります。
このアプリで扱う項目は以下の通りとします。
| 項目名(説明) | データ種類 | 必須 | 初期値等 | データ取得 | 特記事項 |
|---|---|---|---|---|---|
| category(カテゴリ) | 選択肢 | ○ | |||
| status(ステータス) | 選択肢 | ○ | 貸出可 | 借用時:貸出中/返却時:貸出可 | |
| borrower(借用者) | 一行テキスト | (自動) | 借用時:利用者/返却時:空文字、データ:UPN/表示:DisplayName | ||
| borrowed_date(借用日) | 日付 | Blank() | (自動) | 借用時:今日/返却時:Blank | |
| isbn_code(ISBNコード) | 一行テキスト | ○ | バーコード | ||
| published_date(借用日) | 日付 | ○ | Today() | 書籍検索API | |
| book_name(書籍名) | 一行テキスト | ○ | 書籍検索API | ||
| author(著者) | 一行テキスト | ○ | 書籍検索API | ||
| publisher(出版社) | 一行テキスト | ○ | 書籍検索API | ||
| memo(メモ) | 複数行テキスト | 書籍検索API | |||
| thumbnail(サムネイルURL) | ハイパーリンク | 書籍検索API | 一覧&詳細画面上は画像として表示 | ||
| ID | 数値 | ○ | (自動) | 書籍検索API | 詳細&編集画面の見出しにラベル表示し、項目自体は非表示とする |
アプリの完成イメージ
先に完成イメージを紹介します。
まずは新規登録を行ってみます。
バーコードリーダー関連で二点補足します。
- バーコードの読込はWebブラウザーやTeamsデスクトップアプリからのアプリ表示では機能しません。スマートフォンにPowerAppsアプリを導入して使用する形となります。
- バーコードが読込中のままでISBNコードが取得できない場合、PowerAppsアプリ起動時の左上アイコンからメニューを開き、[キャッシュをクリア]を選択すると改善します。
新規登録の続きです。
今度は、新規登録した書籍の借用処理を行ってみます。
さらに、同じ書籍の返却処理を行ってみます。
なお、詳細画面からこの書籍データの削除や変更を行うこともできます(変更時は編集画面に遷移します)。
なお、編集画面は新規登録時と変更時で共通のフォームを使用していますが、変更時はバーコード読込や情報取得のボタンが表示されないようにしています。
SharePointリスト用意
SharePointの任意のサイト(*)にアクセスし、左メニューの[サイトコンテンツ]を選択し、[新規>リスト]を選択します。
今回は移行データがないので[空白のリスト]を選択します。
SharePointリストの名前を適宜入力し、[サイトナビゲーションに表示]のチェックを外し(今回はSharePointリストのデータを直接更新するのではなく、アプリ越しにデータ更新するため)、[作成]を選択します。
[列の追加]より、この記事の最初の方の表で整理した取扱い項目を追加します。
なお、表の最終行の[ID]はシステム内で自動作成される項目ですので、[列の追加]からの設定は不要です。
追加した列の設定はこのようになっています。
対応必須ではありませんが、作成したSharePointリストの列の順序を整えておきます。
右上の設定アイコンを選択し、[リストの設定]を選択します。
アプリの詳細画面や編集画面の表示項目の順番に変更します。
自動作成するタイトルは今回作成するアプリでは使用しないため、順序は一番最後で問題ありません。
これも対応必須ではありませんが、一覧画面上も列の順番を同じように調整しておくと分かりやすいです(ドラッグ&ドロップで列の順番を移動できます)。
ギャラリーアプリ作成
Power Appsの画面にアクセスし、左メニューの[作成]を選択し、[SharePoint]を選択します。
前の工程で作成したSharePointリストがあるサイトを選択します(表示されない場合はURL指定)。
対象のSharePointリストを選択し、[接続]を選択します。
SharePointリストを元に、ギャラリーアプリが作成されました。
まだ色々と調整が必要ですが、データの一覧検索・新規追加・変更・削除ができる状態になっています。
まずは上メニューの[…>設定]を選択し、共通的な設定を行います。
左メニューの[全般]設定において、アプリの名前、アイコン、色などを適宜調整します。
同じ画面の下の方にある、[データ行の制限]を500から2000に変更します。細かい説明は割愛しますが、 SharePointリストのデータ件数がこの設定値を超えると、検索方法によっては全件取得できなくなります(設定の最大値が2000)。
アイコンの色に合わせてテーマも変更しておくと、統一感があって良いでしょう。見た目は用途や好みで適宜調整します。
少しだけ完成イメージに近づきました。
次の記事で編集画面(バーコード読込・情報取得機能含む)、その次の記事で詳細画面(借用・返却機能含む)と一覧画面の調整を進めていきます。
当ブログ内の連載記事
