いきなりPowerApps！ 第四回 簡単地図アプリ
みなさんこんばんは。世の中は夏季休暇ですが私も夏季休暇を取りたいなぁと思う今日この頃です。
今回はなんだかんだで四回目になりますが、いよいよ地図を使ったアプリを作成してみたいと思います。
事前準備
用意するもの
今回は事前に下記を用意している想定で話を進めます。
| Dynamics 365 | 住所データを取得するデータソースとして使用します |
| Bing Maps | RESTで地図を取得するのでGing Map Keyの取得が必要です |
アプリの作成
新規作成
まずは「新しいアプリの作成」をクリックします。
空のアプリを作成
アプリのテンプレートから空のアプリにある「携帯電話レイアウト」を選択します。
データソースの作成
Dynamics 365から住所データを取得するため「データに接続」をクリックします。
新しい接続
「＋新しい接続」をクリックします。
接続の種類
一覧から「Dynamics 365」を選択します。
データソースの作成
「作成」ボタンをクリックします。
データソースの選択
作成したデータソースをクリックします。※ここではアーティサン株式会社（ブログ用）
エンティティの選択
今回は取引先企業からデータを取得したいので一覧から「取引先企業」にチェックを付けて「接続」をクリックします。
リスト画面の挿入
挿入タブから「新しい画面」をクリックし、「リスト画面」を選択します。
リストデータの設定
「BrowseGallery1」を選択し、データの各項目を下図のように設定します。
| データソース | 取引先企業 |
| レイアウト | タイトル |
| Title3 | name |
詳細画面の追加
ホームタブから「新しい画面」をクリックし、「フォーム画面」を選択します。
詳細データの設定
「EditForm2」を選択し、データソースを選択します。
項目を選択
フォームに表示する項目を選択します。
| データソース | 取引先企業 |
| レイアウト | 横 |
| フィールド | 取引先企業名
住所１:郵便番号 住所１:国/建物 住所１:都道府県 住所１:市区町村 住所１:番地 |
画像を挿入
地図は画像として表示させるためフォームに地図を挿入します。
挿入タブから「メディア」をクリックし、「画像」を選択します。
画像の表示位置を調整
下図のように表示位置を調整します。
画像のURL設定
画像のソースにBing MapsのRESTサービスURLを指定します。
keyに指定する値は事前にBing Maps Dev Centerから取得してください。
リストから詳細へ移動する設定
「BrowseGallery1」の「NextArrow2」をクリックし、詳細設定タブの「OnSelect」を下図のように設定します。
詳細画面のレコードを指定
リスト画面で選択されたレコードの詳細を表示するための設定を行います。
「EditForm1」をクリックし、詳細設定タブの「Item」を下図のように設定します。
プレビュー
最後に再生ボタンを押して作成したアプリを動かしてみましょう。
最後に
どうでしょうか、無事に地図は表示されちゃんと住所の場所を示しているでしょうか？
今後地図とDynamics 365を連携するお仕事がありそうなのでPower Appsで作るのも簡単でいいなぁ・・・
さて！夏休み夏休み！！
この記事を書いた人
