Power Apps モデル駆動型アプリで「ねこ管理アプリ」を作ってみる｜第6回 キャンバスアプリの埋め込み

2021.03.30

練習がてらモデル駆動型アプリを使って「ねこ管理アプリ」を作ってみたシリーズ第6回。

今回でこのシリーズは一旦の最終回ということで、これまで作ったモデル駆動型アプリに「キャンバスアプリ」を埋め込んでみる。

前回の記事はこちら

スポンサーリンク

モデル駆動型アプリにキャンバスアプリを埋め込む

モデル駆動型アプリは細かなデザインを実装することができない。

その点をカバーするためか、モデル駆動型アプリにはキャンバスアプリを埋め込むことができる。

ただ、キャンバスアプリ埋め込みにはいくつが制限というかガイドラインがあるみたいなので、製品に埋め込む場合にはこちらに目を通した方がよいかも。
埋め込みキャンバス アプリを使用するときのガイドラインおよびトラブルシューティング - Power Apps
Power Apps で埋め込まれたキャンバス アプリを操作するための推奨される方法を理解する
learn.microsoft.com

クラシック表示で埋め込んだ方がやりやすい？

キャンバスを埋め込む際、日本語の説明サイトだとクラシック表示から埋め込む方法しか書いてないよう。
埋め込み型キャンバス アプリケーションをモデル駆動フォームに追加する - Power Apps
Power Apps でキャンバス アプリをモデル駆動型フォームに埋め込む方法について
learn.microsoft.com
ちなみに英語版だとクラシックじゃない作成の仕方も書いてあったりするｗ
Add an embedded canvas app on a model-driven form - Power Apps
Learn how to embed a canvas app into a model-driven form in Power Apps
learn.microsoft.com

そのうち日本語サイトにも反映されるかな。

キャンバスアプリの埋め込み

それでは早速キャンバスアプリを埋め込んでいく。

今回はモデル駆動型アプリに「ねこの名刺」をキャンバスで埋め込んでみる。

名刺に表示する項目は

  • 顔写真
  • 名前
  • 年齢（年月表記）
  • （最新の）体重

というイメージ！

事前準備

まずは名刺にのせる顔写真として、「サムネイル」列をねこテーブルに追加して、
フォームの編集を開いてサムネイルを設定できるようにする。
実際にフォームを開いてみるとこんな感じで表示されて、
画像を設定するとこんな感じで表示される！

これで準備は完了。

キャンバスアプリ実装

まずはモデル駆動型アプリのアプリデザイナーを開いて、ねこテーブルにメインフォームを「新規作成」する。
ひとまず名前を「名刺フォーム」に設定して「保存」を押下。保存すると「クラシックに切り替える」ボタンが押せるようになるのでクラシック表示に切り替える。
するとこんな感じでフォーム編集画面がクラシック表示で開くので、「誕生日」列や「サムネイル」列といった非必須の列をひとまず削除。
そしたら「名前」列のような必須列を選択して、「プロパティの変更」を押下する。
するとポップアップが開くので、「コントロール」タブの「コントロールの追加」を押す。
下の方に「キャンバスアプリ」があると思うので、追加！
そしたらWebで表示するコントロールを、既定のテキストボックスからキャンバスアプリへと変更し、「カスタマイズ」ボタンを押下する。
するとこんな感じでPower Appsの編集画面が開くので、まずはファイルタブを押して
アプリのサイズをいい具合に変更する。今回は名刺なので600×400くらいかなと。
ついでにFormScreenの大きさもこんな感じで変更しておく。
そしたらキャンバスアプリ編集画面に戻って、元からあるForm1を削除！
ここから名刺の形を整えていく。まずは顔写真を表示したいので「画像」コントロールを追加。
モデル駆動型アプリ上のキャンバスアプリでは、「ModelDrivenFormIntegration」のItemプロパティを使うとデータにアクセスできるので、「ModelDrivenFormIntegration.Item.サムネイル」を画像コントロールに設定。
続いて「名前」を表示。さっきと同様「ModelDrivenFormIntegration」を使ってデータにアクセス。
そしたら「年齢」を表示。モデル駆動型アプリの「計算列」と違って、キャンバスアプリならこのくらいの計算は楽勝！
※計算列でもできるかもしれないけどｗ
最後に「体重」を表示（名刺に体重はいるか？とは思うけれどｗ）する。「体重履歴」テーブルと繋いであげて、
こんな感じの数式で「現在表示しているねこの最新の体重」を体重履歴テーブルからひっぱってくる。
あとは名刺っぽく周りを黒枠で囲ってあげて、
「ファイル」タブから「名前を付けて保存」。
再度クラシック表示のフォーム編集画面に戻って、「既定のコントロールを表示しない」にチェックを入れて、「表示」タブへ移動。
「フォームでラベルを表示する」のチェックを外したら、OKを押下。
ここでようやく「保存」→「公開」。
念のためモダン表示のフォーム編集画面でも「公開」を押しておく。

これで実装はいったん完了！

動作確認

ねこ管理アプリのアプリデザイナーを開いて、「名刺フォーム」が追加されていることを確認したら、「再生」を押下。
適当なねこを選択してフォームを開くと、「情報フォーム（元からあるフォーム）」と、「名刺フォーム」を選ぶことができるようになっているので、「名刺フォーム」を選んでみる。
表示された！！！
ただ、よくわからないスペースがキャンバスアプリの下の方にできてしまった。。。

この不明なスペースの直し方は判明し次第追記するとして、ひとまずキャンバスアプリの埋め込みは完了！

ちょっとだけまとめ

ということで全6回にわたってモデル駆動型アプリを実装してきて、やっぱりキャンバスに比べると多少ハードルが高いな、というのが正直な感想。

今回紹介しきれなかったモデル駆動型アプリ（というかDynamics365？）の機能はたくさんあるし、全機能を把握して使いこなすにはそれなりに時間がかかりそう。。。

とはいえ、ある程度の規模でデータが複雑なシステムを作ろうとなった場合、バックオフィス側のアプリはこのモデル駆動型で作成したほうがよいんだろうな、と思うことができた今回の「ねこ管理アプリ」でした。

おまけ：ねこのフォームから「名刺フォーム」が選べない場合

もし、ねこのフォームにプルダウンが表示されず、「名刺フォーム」が選べない場合、名刺フォームの編集画面を開いて、
フォームの設定を押下。
「フォームの順序」から名刺フォームを一番上に持ってきて「保存して公開」を押すと表示されるようになる、はず。。。

コメント

タイトルとURLをコピーしました