19
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Microsoft Power AppsAdvent Calendar 2022

Day 12

モデル駆動型アプリにキャンバスアプリを表示する

Last updated at Posted at 2022-12-12

モデル駆動型アプリでも、一部キャンバスアプリの自由なUIのページを作ったりしたいですよね。
そんな時の主な方法をご紹介します。

モデル駆動型アプリでキャンバスアプリを使用する方法

モデル駆動型アプリでキャンバスアプリを使用する方法は2種類あります。
①カスタムページ
②キャンバスアプリコンポーネント

ライセンス的な話でいうと、①カスタムページと②キャンバスアプリコンポーネントはアプリ数としてカウントされません
あくまでもモデル駆動型アプリの中に含まれる機能という位置づけで、1つのモデル駆動型アプリの中で何個カスタムページを作ろうとも、コンポーネントを埋め込もうと、それはモデル駆動型アプリの1個として数えられます。

①カスタムページ

カスタムページとは

カスタムページは、モデル駆動型アプリ内の一つのページタイプです。
左のサイトマップに表示されます。
最大の特徴は、キャンバスアプリのような画面を作ることができるということです。
このカスタムページは、キャンバスアプリなので、モデル駆動型アプリのフォーム、ビュー、ダッシュボードページよりも柔軟性があります。 1つ以上のテーブルを含めることができます。

image.png

具体的に検索ページをカスタムページで作成する方法についても解説している記事がありますので、ぜひ挑戦してみてください。

カスタムページ作成方法

モデル駆動型アプリの編集画面で[ページ]>[ページの追加]>[カスタムページ]から作成することができます。
image.png

新しく作る場合は[新しいカスタムページを作成する]を選択し、ページの名前を入れます。

image.png

キャンバスアプリの編集画面が表示されます。
image.png

編集して、画面右上の公開をすると実際にモデル駆動型アプリで使えるようになります。
image.png

モデル駆動型アプリも公開すると、実際の画面で表示されます。
image.png

モデル駆動型アプリ以外から作りたい場合

ソリューションの中でならモデル駆動型アプリの外から作れます。
ソリューションを開き、左上の[新規]>[アプリ]>[ページ]から作ることができます。
image.png

既存のカスタムページを追加する方法

既存のカスタムページを追加する場合は、[ページ]から追加する方法と、以下の方法でも追加できます。
[ナビゲーション]>[追加]>[サブエリア]で表示されるポップアップ画面でコンテンツタイプのドロップダウンメニューから[カスタムページ]を選択するとできます。
image.png

既存のカスタムページを再度開いて編集する方法

カスタムページはアプリの一覧には表示されません。その為、迷子になってしまうかもしれないので、開き方も記述しておきます。
image.png

①モデル駆動型アプリの編集画面

モデル駆動型アプリの編集画面で[ページ]>(対象のカスタムページ)>[...]>[編集]
で編集ができます。
image.png

②ソリューションのページオブジェクト

ソリューションから作っている場合は以下のようにページオブジェクトからも開けます。
image.png

※自動でソリューションに含まれない場合は、以下のように[既存を追加]>[アプリ]>[ページ]から追加してください。
image.png

②キャンバスアプリコンポーネント

キャンバスアプリコンポーネントとは

キャンバスアプリをモデル駆動型アプリのフォームの中に表示させることができるコンポーネントです。
image.png

キャンバスアプリコンポーネント作成方法

フォームの編集画面にて[コンポーネント]にもキャンバスアプリコンポーネントがあるのですが、2022年12月現在、モダンデザイナーで作成できません、、、。(現在モダンデザイナーとクラシックデザイナー移行の過渡期です。)
その為、クラシックデザイナーから編集します。
image.png

その前にキャンバスアプリを埋め込むタブを追加しておきます。
image.png

クラシックデザイナーを開きます。
右上の三点リーダー>[クラシックに切り替える]をクリックします。
image.png

新しいタブでクラシックデザイナーが開かれます。
キャンバスアプリを挿入したいセクションを選択します。

image.png

「Created On」などの列を選んでドラッグアンドドロップで起きたいところにもっていきます。
image.png

置いたコンポーネントを選択した状態で上の[プロパティの変更]をクリックしてください。
image.png

フィールドプロパティメニューが出てくるので[コントロール]タブに切り替えてください。
この中の[コントロールの追加]を選択します。

[キャンバスアプリ]>[追加]ボタンクリックします。

キャンバスアプリの「Web」「Phone」「Tablet」のラジオボタンをONにします。(Webで開いたとき、Phoneで開いたとき、タブレットで開いたときに優先するコントロールを選択することができます。)
左下の[カスタマイズ]ボタンをクリックしてください。

キャンバスアプリの作成画面が別タブで開かれます。
image.png

もし画面サイズ・比率を変えたい場合は画面上のリボンUIの[設定]>[表示]>[サイズ]から帰ることができます。
image.png

ツリービューで「ModelDrivenFormIntegration」と表示されているものがモデル駆動型アプリのフォームに埋め込まれたアプリであることを示すものです。
このアプリにはモデル駆動型アプリの操作を反映させることができます。
image.png

右上の[保存]>[公開]をクリックします。
image.png

公開したら元のフォームクラシックデザイナー画面に戻って、フィールドプロパティメニューの[OK]ボタンを押します。

こちらも保存と公開をします。
image.png

実際の画面では何度か再読み込みして待っていると反映されます。
image.png

既存のキャンバスアプリコンポーネントを再度開いて編集する方法

アプリの一覧に出てきますのでそちらから開いて編集をしていただくのがいいと思います。
image.png

まとめ

モデル駆動型アプリの中でキャンバスアプリの機能を使う方法をご紹介しました。
うまくここを使いこなして、モデル駆動型アプリの良さとキャンバスアプリの良さをいいとこどりしたすてきなアプリを作りましょう!

19
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?