Microsoft Power AppsでMicrosoft SharePointリストを使った案件管理アプリを作ろう

1.はじめに

Microsoft Power Appsは、Microsoft社が提供するローコード開発プラットフォーム「Microsoft Power Platform」内のサービスの1つです。ボタンやフォームを配置するだけで、簡単にアプリ画面を作成できます。
今回は、Microsoft Power AppsとMicrosoft SharePointリストを連携させた案件管理アプリを通して、アプリ開発の方法を紹介します。

2.案件管理アプリの作成ガイド

2-1.案件管理アプリの概要

Microsoft Power AppsとMicrosoft SharePointリストを連携させ、キャンバスアプリでデータの閲覧・編集機能を持つアプリケーションを作成します。
※事前にMicrosoft Power Apps、Microsoft SharePointの利用権限が必要です。

図1:処理全体のアプリケーションの流れ

2-2.Microsoft SharePointの事前準備

今回は、Microsoft SharePointリストに格納されたデータを使用するため、事前に下記の形式でMicrosoft SharePointサイト・リストを作成します。

・Microsoft SharePointサイト名：ANKEN_SPO
・Microsoft SharePointリスト名：Anken_Table

表1:Anken_Tableの定義

表2:ステータスの選択肢

図2:Microsoft SharePointリスト完成図

2-3.Microsoft Power Appsでの案件管理アプリ作成ガイド

・キャンバスアプリの作成
1. Microsoft Power Apps左メニューの【作成】をクリックし、アプリ作成画面を開きます。

図3:Power Apps左メニュー

2. 作成するアプリの種類、アプリ名、アプリの形式を設定していきます。

①「アプリを作成する」の【空のキャンバスを使用して開始】をクリックします。
②今回はタブレットPC用アプリを作成するため、作成画面で【タブレットPCのサイズ】を選択します。
③Microsoft Power Apps Studio画面が開かれます。保存ボタンをクリックして「案件管理アプリ」と入力し、「保存」をクリックします。

図4:【空のキャンバスを使用して開始】をクリック

図5:【タブレットPCのサイズ】を選択

図6:アプリ名を入力

・Microsoft SharePointとの接続
1. 「2-2.Microsoft SharePointの事前準備」で作成したMicrosoft SharePointリストとMicrosoft Power Appsを接続します。
①「データ」タブから「データの追加」をクリックします。
②検索欄でMicrosoft SharePointを検索し、クリックします。
③作成したMicrosoft SharePointサイト名「ANKEN_SPO」を選択します。
④「Anken_Table」にチェックを入れ、「接続」をクリックします。

図7:Microsoft SharePointとの接続

・ホーム画面(案件一覧画面)の作成
1. Microsoft SharePointリストのデータを表示するホーム画面(案件一覧画面)を作成します。
①画面名を「案件一覧画面」に変更します。
➁画面上部の「挿入」から四角形のオブジェクトとテキストラベルを選択し挿入します。
③四角形とテキストラベルでヘッダーを作成します。
④5つのテキストラベルで列名を作成します。

図8:ホーム画面(案件一覧画面)の作成

2. 次に、データを表示するために「垂直ギャラリー」コントロールを配置し、データソースの選択画面で「Anken_Table」を設定します。

図9:データソースの選択

3. ギャラリー内で表示する項目を、それぞれ表3、図10のとおり設定します。

表3:ギャラリーの定義

4. ギャラリーのプロパティ：レイアウトで「タイトルとサブタイトル」を選択します。

図10:ギャラリーのレイアウト変更

・データ詳細表示画面(案件詳細画面)の作成
1. 選択したデータを表示する詳細画面を作成します。
「ツリービュー」タブから「新しい画面」→「空」をクリックします。

図11:データ詳細表示画面(案件詳細画面)の作成

2. 案件一覧画面で選択したデータの詳細を表示する画面(案件詳細画面)を作成します。
①画面名を「案件詳細画面」に変更します。
②四角形とテキストラベルを組み合わせて、ヘッダーを作成します。
案件一覧画面からヘッダーをコピーして貼り付け、画面名を「案件詳細画面」に変更します。
③画面上部の「挿入」から「編集フォーム」を選択します。データソースの選択画面で「Anken_Table」を設定します。
④「編集フォーム」コントロールのプロパティ ＞ フィールド から「タイトル」、「コンテンツタイプ」を削除します。

図12:編集フォームの作成

3. 各オブジェクトのプロパティを以下の表4と図13のとおり設定します。
複数行入力できるよう、「案件概要」「経緯」のテキスト入力欄をドラッグして広げておきます。

表4:編集フォームの定義

図13:編集フォームの設定内容

4.戻るボタンと登録ボタンを作成します。
①画面上部の「挿入」から「ボタン」を挿入し、画面に配置します。
②それぞれのプロパティ「OnSelect」に以下の関数を設定します。

➂戻るボタン
数式バーに下記の関数を入力します。
Refresh(Anken_Table);
Navigate(案件一覧画面);

図14:戻るボタンの設定

④登録ボタン
戻るボタンと同様に登録ボタンを配置し、数式バーに下記の関数を入力します。
SubmitForm(Form1);
Refresh(Anken_Table);
Navigate(案件一覧画面);

図15:登録ボタンの設定

・案件一覧画面の「＞」ボタンの設定
最後に、案件一覧画面に戻り、「＞」をクリックした時に、選択したデータが案件詳細画面に表示されるように
「＞」ボタンのプロパティ「OnSelect」に以下の関数を設定します。

①「＞」をクリックします。
②プロパティ「OnSelect」に以下の関数を設定します。
➂「＞」ボタン
戻るボタン、登録ボタンと同様に関数バーに下記の関数を入力します。
Set(SelectedItem,ThisItem);
Navigate(案件詳細画面)

図16:「＞」ボタンの設定

図17:案件管理アプリ完成図

以上で案件管理アプリは完成です。案件詳細画面でデータを編集するとMicrosoft SharePointのリストが変更されるのでご確認下さい。

3.終わりに

Microsoft Power AppsとMicrosoft SharePointリストを連携させ、データを表示する方法をご紹介しました。
ぜひMicrosoft Power AppsとMicrosoft SharePointを活用し、業務効率化を進めてみてはいかがでしょうか？
tdiはローコード開発に力を入れています。Microsoft Power Platformについてはこちらからお気軽にお問い合わせ下さい。

Microsoft Power Platform | 情報技術開発株式会社

https://www.tdi.co.jp/solution/powerplatform

OutSystems と Microsoft Power Platformを取り上げ、その特徴や製品を選択するうえで押さえておくべきポイントを解説、また それぞれのアプリケーションで取り扱うデータを連携することで、さらなる効率化を実現します。