メインコンテンツへスキップ

Power Appsとデータソース【第２回】：データ連携（Azure SQL Database編）（2022年６月）

mceclip0.png

 

目次
  • アプリケーションの構成
  • 開発環境とライセンス
  • データソースの準備
  • アプリケーションの作成
  • 動作確認
  • まとめ

 

前回はPower AppsからSharePointリストをデータ操作（CRUD）するアプリケーションを作成しました。

第２回目ではPowerAppsのキャンバスアプリで「コネクタ」を用いてAzure SQL Databaseとデータ連携する方法を解説します。

アプリケーションの構成

作成するアプリケーションの構成は以下の通りです。

今回はPower AppsとAzure SQL Databaseを使用して「商品一覧」テーブルの「一覧情報」と「詳細情報」をPower Appsで表示します。

mceclip0.png

 

開発環境とライセンス

Power Appsでデータソースとデータ連携させる「コネクタ」は「標準コネクタ」「プレミアムコネクタ」「カスタムコネクタ」の３種類があります。

Power Appsのライセンス（Microsoft アカウント）によって使用できる「コネクタ」が異なります。

Azure SQL Database用のコネクタは「プレミアムコネクタ」となります。したがって今回作成するPower Appsのアプリケーションでは以下のいづれかのライセンスが必要となります。

・ Power Appsの試用版ライセンス

・ PowerApps per app プラン

・ PowerApps per user プラン

Power Apps と Power Automate のライセンスに関する FAQ

https://docs.microsoft.com/ja-jp/power-platform/admin/powerapps-flow-licensing-faq

またPower AppsからAzure SQL Databaseへアクセスする際の以下のAzure SQL Databaseのアカウント情報をご用意ください。

・ SQL server name

・ SQL database name

・ Username

・ Password

データソースの準備

今回はAzure SQL Databaseにサンプルとして以下のような「商品一覧」テーブルを作成してデータソースとして利用します。

 

id

product_name

manufacturer

os

display_size

price

1

iPhone 13

Apple

iOS

6.1

110000

2

iPhone 12 Pro

Apple

iOS

6.1

123000

3

AQUOS sense5G

SHARP

Android

5.8

38000

4

Galaxy A21

Samsung

Android

6.5

18000

5

OPPO Reno3 A

OPPO

Android

6.4

32000

 

まずは以下のSQLを参考にしてSQL Serverに「商品一覧」テーブルを作成しましょう。

CREATE TABLE PRODUCT_LIST (

  id  INT NOT NULL PRIMARY KEY,

  product_name  NVARCHAR(50) NOT NULL,

  manufacturer  NVARCHAR(20) NOT NULL,

  os  NVARCHAR(20) NOT NULL,

  display_size  FLOAT NOT NULL,

  price  INT NOT NULL

);

次に作成した商品一覧テーブルに以下のサンプルの5つのレコードを挿入します。

INSERT INTO PRODUCT_LIST VALUES (1, 'iPhone 13', 'Apple', 'iOS', 6.1, 110000);

INSERT INTO PRODUCT_LIST VALUES (2, 'iPhone 12 Pro', 'Apple', 'iOS’, 6.1, 123000);

INSERT INTO PRODUCT_LIST VALUES (3, 'AQUOS sense5G', 'SHARP', 'Android’, 5.8, 38000);

INSERT INTO PRODUCT_LIST VALUES (4, 'Galaxy A21', 'Samsung', 'Android’, 6.5, 18000);

INSERT INTO PRODUCT_LIST VALUES (5, 'OPPO Reno3 A', 'OPPO', 'Android’, 6.4, 32000);

これで商品一覧テーブルの準備は出来ました。

アプリケーションの作成

次にPowerAppsのアプリケーションを作成しましょう。

まずPowerAppsのホームから「空のアプリ」を選択します。

mceclip1.png

作成メニューで「空のキャンパスアプリ」の「作成」を押下します。

今回はPowerAppsのキャンバスアプリを空の状態から作成していきます。

mceclip2.png

「アプリ名」を入力して「形式」で「電話」を選択します。

この形式とは「タブレット」は「横長」画面、「電話」は「縦長」画面を表します。

※ Power Appsのキャンバスアプリでは画面の形式をアプリケーション作成時に決定する必要があります。

mceclip3.png

これで空のキャンバスアプリが作成されました。

ツリービューには「Screen1」という画面のみが配置されているのが分かります。

mceclip4.png

 

次にデータソースの追加を行います。

左のメニューの「データ」を選択して「データの追加」を押下し、「データソースの選択」から「SQL Server」を選択します。

 

mceclip5.png

SQL Serverの「接続の追加」を押下します。

※ 過去に接続したことがあるデータソースは「接続の追加」の下に一覧で表示されます。

mceclip6.png

 

SQL Serverへの接続は４つの方式がありますが、今回は「SQL Server Authentication」を使用します。

「Authentication type」で「SQL Server Authentication」を選択してください。

mceclip7.png

 

接続環境（クラウドまたはオンプレミス）を選択して「SQL server name」「SQL database name」「Username」「Password」を入力し、「接続」ボタンを押下します。

 

mceclip9.png

 

「テーブルの選択」に接続したデータベース内のテーブル一覧が表示されるので「PRODUCT_LIST」テーブルを選択して「接続」を押下します。

mceclip10.png

 

これでSQL Serverへ接続するための「コネクタ」が作成されました。

mceclip12.png

それでは画面上にGUIパーツを配置していきます。

左のメニュー「挿入」を選択して「垂直ギャラリー」を押下し、「データソースの選択」で先程作成したコネクタ「PRODUCT_LIST」を選択します。

mceclip14.png

これで「Gallery1」のデータソースにコネクタ「PRODUCT_LIST」が設定されました。

さらに「Gallery1」のプロパティで「レイアウト」を「イメージ、タイトル、サブタイトル」から「タイトルとサブタイトル」に変更します。

mceclip15.png

 

同様にツリービューで「Subtitle2」を選択して「Subtitle2」のプロパティの「テキスト」を「ThisItem.os」から「ThisItem.manufacturer」に変更してください。

mceclip16.png

 

これで「一覧画面」が完成しました。

今回のアプリケーションでは「一覧画面」と「詳細画面」の２画面を作成するので「Screen1」の名称をプロパティより「一覧画面」に変更します。

 

mceclip17.png

 

次に「詳細画面」を作成していきます。

メニューの「新しい画面」を押下して「空」の画面を選択します。

 

mceclip18.png

 

これで新しい画面「Screen2」が追加されました。

先程と同様に「Screen2」の名称もプロパティより「詳細画面」に変更しましょう。

mceclip19.png

「詳細画面」から「一覧画面」へ戻るための「戻る」ボタンを追加します。

左のメニューで「挿入」を選択して「ボタン」を押下し、画面上にボタンを追加しましょう。

 

mceclip20.png

「Button1」のプロパティの「テキスト」を「戻る」に変更します。

 

mceclip21.png

次に詳細情報を表示するための「表示フォーム」を追加します。

左のメニューで「挿入」を選択して「表示フォーム」を押下し、画面上に追加された表示フォームを下図のようにボタンの下に配置してください。

 

mceclip22.png

 

この表示フォームのデータソースにSQL Serverのコネクタを接続します。

表示フォーム「FormViewer2」のプロパティの「データソース」でコネクタ「PRODUCT_LIST」を選択してください。

 

mceclip26.png

 

表示フォーム内で表示させるデータソースのフィールドを選択します。

表示フォーム「FormViewer2」のプロパティの「フィールドの編集」を押下して、「フィールドの選択」で各フィールドにチェックを入れ、「追加」ボタンを押下します。

mceclip28.png

 

表示フォーム「 FormViewer2 」にデータソースの詳細情報が表示されるようになりました。

さらに「一覧画面」のギャラリー「Gallery1」で選択した詳細情報が表示フォーム「 FormViewer2 」に表示されるように、表示フォーム「 FormViewer2 」の詳細設定の「Item」を「Gallery1.Selected」に変更します。

mceclip29.png

最後に「一覧画面」と「詳細画面」の画面遷移を実装します。

まずは「詳細画面」から「一覧画面」への画面遷移を作成しましょう。

「詳細画面」のボタン「Button1」の詳細設定の「OnSelect」で「Navigate（一覧画面）」と入力してください。

この「OnSelect」ではボタンを押下した時の処理を記述します。

またNavigate関数はカッコ内で指定した画面への遷移を行う関数です。

したがって上記の記述は「詳細画面」 で「戻る」ボタンを押下した際に「一覧画面」に戻る処理となります。

mceclip30.png

次は「一覧画面」から「詳細画面」への画面遷移を作成します。

ツリービューから「一覧画面」の「Gallery1」を選択して、 「Gallery1」の詳細設定の「OnSelect」で「Navigate(詳細画面)」と記載します。

これで「一覧画面」のギャラリーで任意の項目を選択した際に「詳細画面」へ遷移し、選択した詳細内容を「詳細画面」へ表示することができるようになりました。

mceclip31.png

 

動作確認

 

では画面右上のプレビュー実行のボタンを押下して動作確認を行いましょう。

「一覧画面」では商品一覧テーブルの一覧が表示されます。

ここで任意の項目を押下すると「詳細画面」へ遷移します

 

mceclip32.png

 

「詳細画面」では「一覧画面」で選択した項目の詳細情報が表示されます。

また「戻る」ボタンを押下すると「一覧画面」に画面遷移します。

 

mceclip33.png

 

まとめ

今回はPowerAppsのキャンバスアプリで「コネクタ」を用いてAzure SQL Databaseとデータ連携するアプリケーションを作成しました。

本アプリケーションでは「一覧表示」と「詳細表示」の機能のみを実装しましたが、「新規作成」「編集」の機能は少し複雑になりますがPatch関数を用いれば実装可能です。興味がある方はぜひチャレンジしてみてください。

次回はPowerAppsとCosmos DBとのデータ連携の方法を解説します。

 

「掲載日：2022年6月1日」

 

【第１回】データ連携（SharePointリスト編）

【第３回】データ連携　 (Cosmos DB編）

 

関連記事