JPPC2023 1208_モデル駆動型アプリでローコードカスタマイズ!カスタムページ・モダンコマンドバーとPower Automate

44.3K Views

December 08, 23

スライド概要

JPPC2023 12/8 AP09で登壇させていただいた資料です。
モデル駆動型アプリのカスタムページ・コマンドバーでのPower Fxでのローコードカスタマイズについて色々書いています。

profile-image

Power AppsやPower Automateでシステム開発や技術支援、コンサルなどやっています。 ブログも書いたりしています。https://youseibubu.com

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

モデル駆動型アプリでローコードカスタマイズ! カスタムページ・モダンコマンドバーとPower Automate ヨウセイ • ヨウセイ @youseibubu 2023/12/8 #AP-09 • AP-09

2.

本イベントのスポンサー様 Gold Sponsor Silver Sponsor Facilities & Staff Sponsor ダイキン工業㈱

3.

自己紹介 ヨウセイ 一般職からSharePoint、C#系の技術者へ。そこからPower Platform技術者へ。 主にシステム開発や技術支援をやっています。得意分野は以下です。 Power Apps Power Automate キャンバスアプリ モデル駆動型アプリ Dataverse Power Pages Power Automate for Desktop SharePoint

4.

自己紹介 Microsoft認定: Power Platform Solution Architect Expert 他取得 EXAM:PL‐600、PL‐400、PL‐200、PL‐100、PL‐900 • BLOG:Power Apps Tips ログ (youseibubu.com) • X(旧Twitter):https://twitter.com /youseibubu • Qiita:https://qiita.com /youseibubu • Docswell:https://www.docswell.com /user/yousei

5.

モデル駆動型アプリで ローコードカスタマイズ! カスタムページ・モダンコマンドバー とPower Automate JPPC #AP-09 2023/12/08:ヨウセイ

6.

アジェンタ • 色々あるよね Power Apps • モデル駆動型アプリの豊富な標準機能 • モデル駆動型アプリの機能拡張(ノーコードとプロ開発) • ローコード(Power Fx)カスタマイズで機能拡張! デモ デモ • カスタムページ (とPower Automate) • モダンコマンドバー (とPower Automateとカスタムページ) • ライセンスや開発者環境 • おまけ:コミュニティやゲームアプリ紹介など

7.

色々あるよね Power Apps

8.

色々あるよね Power Apps ・キャンバスアプリ └通常 └Dataverse for Teams └SharePoint カスタマイズフォーム ・モデル駆動型アプリ ・Power Pages(旧ポータル 現在は独立)

9.

色々あるよね Power Apps キャンバスアプリ: デザインに優れたUI、ローコード(Power Fx)で柔軟な開発、色々なコネクタと連 携。機能的なアプリを作成できる キャンバス アプリの構築の概要 - Power Apps | Microsoft Learn

10.

色々あるよね Power Apps キャンバスアプリ:ほかの種類も Dataverse for Teams 版 Teams上で作成。Dataverse for Teamsが使える Microsoft Dataverse for Teamsの概要 - Power Apps | Microsoft Learn SharePoint カスタマイズフォーム SharePointのリストフォームをカスタムできる SharePoint リスト用のフォームをカスタマイズする | Microsoft Learn

11.

色々あるよね Power Apps モデル駆動型: データモデル主体、ビュー、フォームなどを作成しすぐに使用可能 な基本ノーコードのアプリ。Dataverseを使用。豊富な標準機能、拡張性を持つ 主にオフィスワーカーや業務管理者向け Power Apps を使用したモデル駆動型アプリの構築の概要 - Power Apps | Microsoft Learn

12.

色々あるよね Power Apps Power Pages: 外部向けビジネス Web サイトを作成、ホスティング、および管理 テンプレートから作成やプロ開発も可能。データストアはDataverseを使用 ※旧Power Apps ポータルで現在は独立 管理、内部向けはモデル駆動型 デザインスタジオ、テンプレートから作成できる 開発も可能(JavaScript、Liquid 、Web API) Power Pages とは | Microsoft Learn

13.

色々あるPower Apps 達 イメージ図 ざっくり スタンドアロンライセンス範囲 Power Fx キャンバスアプリ プレミアムコネクタ カスタムコネクタ データソース データソース 標準コネクタ キャンバスアプリ Dataverse for Teams版 Dataverse for Teams SharePoint カスタマイズフォーム データ ソース Power Apps カード Power Automate 標準コネクタ など AI Builder データソース など モデル駆動型 アプリ データソース+ ビュー、フォーム グラフ、ダッシュ ボード セキュリティ ロジックなど Power Pages モデル駆動型アプリ プレミアムコネクタ カスタムコネクタ AI Builder 仮想 など データソース・他 データソース など

14.

色々あるPower Apps 達 イメージ図 ざっくり スタンドアロンライセンス範囲 Power Fx キャンバスアプリ プレミアムコネクタ カスタムコネクタ データソース データソース 標準コネクタ キャンバスアプリ 今回は本格的な業務アプリ モデル駆動型 Dataverse for Teams版 Dataverse アプリ for Teams を作らなきゃだわ。 SharePoint カスタマイズフォーム ライセンスも使って高機能 データソース+ ビュー、フォーム グラフ、ダッシュ ボード セキュリティ ロジックなど 仮想 など なアプリにしたいけど色々 Power Apps カード ぱわ代 など AI Builder あるのね。。 データ ソース Power Pages モデル駆動型アプリ 時間もないしいったいどれ Power Automate 標準コネクタ データソース がいいのかしら?? など プレミアムコネクタ カスタムコネクタ AI Builder データソース・他 データソース など

15.

色々あるPower Apps 達 イメージ図 ざっくり スタンドアロンライセンス範囲 キャンバスアプリ Power Fx データソース プレミアムコネクタ カスタムコネクタ それなら豊富な機能が備わった データソース 標準コネクタ AI Builder モデル駆動型アプリ など がオススメだぜ! キャンバスアプリ 今回は本格的な業務アプリ データソース+ モデル駆動型 ビュー、フォーム Dataverse for Teams版 Dataverse アプリ for Teams を作らなきゃだわ。 SharePoint カスタマイズフォーム ライセンスも使って高機能 グラフ、ダッシュ ボード セキュリティ ロジックなど など なアプリにしたいけど色々 Power Apps カード ぱわ代 仮想 あるのね。。 データ ソース Power Pages モデル駆動型アプリ 時間もないしいったいどれ Power Automate 標準コネクタ データソース がいいのかしら?? など プレミアムコネクタ カスタムコネクタ AI Builder データソース・他 データソース パワ谷さん など

16.

モデル駆動型アプリの 豊富な標準機能

17.

モデル駆動型アプリの豊富な標準機能 モデル駆動型: データモデル主体、ビュー、フォームなどを作成しすぐに使用可能 な基本ノーコードのアプリ。Dataverseを使用。豊富な標準機能、拡張性を持つ 主にオフィスワーカーや業務管理者向け

18.

モデル駆動型アプリのデモアプリ デモ用のアプリ: サンプルとして以下のような構成のアプリを作成しました (デモ用の簡易版です) モデル駆動型アプリ 見積依頼 ファイル 見積 取引先 承認 明細 受注情報 見積PDF 発注 見積依頼 > アプリ登録(見積/明細) > 承認 > 見積発行 > 受注情報登録 >・・・

19.

デモ

20.

モデル駆動型アプリの豊富な標準機能 モデル駆動型アプリの基本構成 ⚫ テーブル ⚫ ビュー ⚫ フォーム ⚫ グラフ ⚫ ダッシュボード ⚫ ビジネスプロセスフロー(BPF) ⚫ ビジネスルール (業務ルール) →テーブルを作成しビューとフォームを作成してアプリで指定すると すぐに使用可能!(既存があればアプリで指定のみ)

21.

モデル駆動型アプリの豊富な標準機能 モデル駆動型アプリデザイナー(モダン) 使用するテーブルを追加しビュー、フォームを指定 テーブルを指定、ま たはここからテーブ ルの作成も可能 ビュー、フォームの作成や編集 はテーブルの編集画面で行う

22.

モデル駆動型アプリの豊富な標準機能 テーブルの作成・更新 まずは列やリレーションを定義してテーブルを作成 テーブルの画面で作成や編集 列の追加やリレーションシップを定義 ここからビュー、フォーム、グラフなどの作成が可能 ここからモデル駆動型アプリの作成も出来る

23.

モデル駆動型アプリの豊富な標準機能 ビュー:システムビュー、共有ビューなど各種ビュー ビュー作成画面でサクサクと作成できる 表示する列を指定し、列の順番と幅、 並び替えの設定、フィルターの設定が可能 ※リレーション親テーブルの項目も表示可能

24.

モデル駆動型アプリの豊富な標準機能 ビュー:並び替えとフィルター条件の設定 表示するレコードのフィルター条件を指定する 項目の昇順、降順で 複数定義可能 ○○列が<設定値>に等しい、より大きい や、 日付を範囲で指定、自分が所有者のものなど、さまざま設定可能 関連テーブルやBPFテーブルを条件に含めることも可能

25.

モデル駆動型アプリの豊富な標準機能 ビュー:アプリ上の表示や個人ごとの調整 簡易検索ビューに指定で キーワード検索も可能 標準で列ごとの並び順切替 やフィルターも可能 ユーザー個人用に 列の編集やフィルタを 編集も可能 ユーザーが個人用に編集したビューを 個人ビューとして使用や共有もできる

26.

モデル駆動型アプリの豊富な標準機能 ビュー:その他のグリッド用のコントロールを使えたりもする Power Apps グリッド コントロール その他のグリッド用コント 無限スクロール、イン ロールも使える! ライン編集、選択肢の (要設定) カラー適用などの設定 カレンダービューなども を調整して利用できる 新しい外観(モダンで爽やかなデザイン)がGAされ ビュー、フォーム、コントロールやBPFなどがよりおしゃれに (アプリ設定からオン(既定)→ユーザーごとにオンオフも)

27.

モデル駆動型アプリの豊富な標準機能 フォーム:メイン、カード、クイックビュー(有効なら簡易作成も) フォーム編集画面で レイアウト(タブ、セ クション)や表示する 列、サブグリッドなど レイアウトは1~4列まで可能 標準でレスポンシブ対応 のコンポーネントを配 置してフォームを作成 各種コンポーネント(切替えやWebリソースや、 する キャンバスアプリの埋め込み)なども配置できる AI Builderの名刺リーダーやPower BIもある

28.

モデル駆動型アプリの豊富な標準機能 フォーム:アプリ上での表示 BPFありの表示 ヘッダー部の設定もある タブ切替え表示が可能。 関連タブが最初からある 新しい外観(モダンで爽やかなデザイン)がGAされ ビュー、フォーム、コントロールやBPFなどがよりおしゃれに (アプリ設定からオン(既定)→ユーザーごとにオンオフも) 複数のフォーム作成が可能 セキュリティロールで表示する フォームを分けることも可能

29.

モデル駆動型アプリの豊富な標準機能 モデル駆動型アプリの基本構成 ⚫ テーブル ⚫ ビュー ⚫ フォーム ⚫ ビジネスプロセスフロー(BPF) ⚫ ビジネスルール (業務ルール) ⚫ グラフ ⚫ ダッシュボード →ノーコードのロジック(BPF、ビジネスルール)を追加 →グラフ、ダッシュボードを作成して可視化

30.

モデル駆動型アプリの豊富な標準機能 ビジネスプロセスフロー: 業務のフローをステージごとに表現して一貫した入力を提供 各ステージごとに必要な入力項目を表示 一貫した業務フローを提供 <BPF編集画面> ステージ、ステージ内のステップや必須入力 とするなどの設定 条件分岐で値に応じた分岐が可能 テーブルは5つまで対応、フロー呼び出しや セキュリティロールでの表示制御など

31.

モデル駆動型アプリの豊富な標準機能 ビジネスルール:条件(列の値など)に応じて値を設定、非表示、エ ラー表示などの業務ロジックを適用できる スコープをテーブルにするとサーバー 側でも実行する。(一括登録やキャン <ビジネスルールのアクション> • 列の値を設定 • 列の値をクリア • 列の要件レベルを設定 • 列を表示または非表示 • 列を有効化または無効化 • データ検証、エラーメッセージ表示 • ビジネス レコメンデーションを作成 表示例:商品1の場合は詳細列を表示と必 須にする、それ以外は表示なし バス側にも一部効く)フォームの場合 はクライアント側のみ実行 BPFステージを条件に追加も可能 AND+OR条件やIFネストなど複雑化 するものは対応不可。ファイル列な ど対象外の列も一部あり

32.

モデル駆動型アプリの豊富な標準機能 グラフ:データを可視化するグラフを数種類から作成可能 ビュー上に表示やダッシュボードに表示など ビュー上でグラフを開ける フィルターとして使用も可能 テーブルからグラフを作成 ドリルダウンもできる

33.

モデル駆動型アプリの豊富な標準機能 ダッシュボード:標準、対話型ダッシュボード、Power BIも対応 グラフやビューなどを配置して可視化 標準のダッシュボードを 個人用に作成も可能 対話型ダッシュボード

34.

モデル駆動型アプリの豊富な標準機能 モデル駆動型アプリのさらなる機能(データ連携・統合・その他) ⚫ Excelインポート・エクスポート・Online編集 ⚫ Excelテンプレート・Wordテンプレート ⚫ 仮想テーブル(SQLとSharePointはすぐに) ※以下割愛 ⚫ データフロー(他データソースから連携 ※Power Query) ⚫ SharePointドキュメント統合 ⚫ Exchange同期など・・ ⚫ Dataverse検索、モバイルオフライン、Copilot などなど・・

35.

モデル駆動型アプリの豊富な標準機能 Excelインポート・エクスポート・Online編集 ビュー上でエクセル直接編集などが可能。動的エクスポートも可能 Online編集や動的なエクスポート エクセル/CSV/XMLでのインポー ト操作が可能 Excel Onlineでビューをそのまま一 括編集(新規/編集/削除)が可能!

36.

モデル駆動型アプリの豊富な標準機能 Excelテンプレート・Wordテンプレート ビュー:Excel、フォーム:Wordのテンプレートを事前作成して出力ができる フォームデータを差し込み データを出力+ピポットやグラフを サブグリッドの繰り返し出力も可能 使ったテンプレートで可視化 データ分析の Excel テンプレートを作成および共有 - Power Platform | Microsoft Learn Word テンプレートを使用して標準化ドキュメント を作成 - Power Platform | Microsoft Learn

37.

モデル駆動型アプリの豊富な標準機能 環境・ソリューション・ALM・セキュリティ機能など ⚫ 環境設定・マネージド環境など ⚫ ソリューションでコンポーネント管理など ⚫ マネージド、アンマネージドソリューションなど ⚫ Dataverseのセキュリティ: 環境、セキュリティロール、部署、チーム、共有 テーブル、レコード、列レベルのセキュリティ、監査機能など この辺に・・ 情シスさんや専門部隊などで 設計のイメージ

38.

モデル駆動型アプリの機能拡張 (ノーコードとプロ開発)

39.

モデル駆動型アプリの機能拡張(ノーコードとプロ開発) ノーコードのロジック その他アクションやバックグラウンド ⚫ ビジネスプロセスフロー ワークフロー※Automateへ置き換え ⚫ ビジネスルール 推奨 などもあり ⚫ リアルタイムワークフロー(クラシック:同期的) ローコードのロジック ⚫ Power Automate連携 →Dataverseトリガーを使用した自動化 自動化の主流と思われる データ処理の自動化やBPFを一括で進 めるなどの処理も可能 →ファイル作成や取込みなどの機能的な実装 →コネクタを使用した外部連携など ⚫ キャンバスアプリの埋め込み フォーム埋め込みのみ 別途共有が必要 だったりレイアウト調整が微妙、設定が 直観的でないなど不都合な点もあり。。

40.

モデル駆動型アプリの機能拡張(ノーコードとプロ開発) プロ開発系の機能拡張 ⚫ プラグイン(C#.NET) 高速・高機能なロジック実装が必要な場合 プラグイン ⚫ PCF( Power Apps component framework ) 大規模、高速、高機能なロジックが 必要な場合など 大量処理などでPower Automateで は速度やコール数が問題となるなど プロ開発者とタッグを組んでの実装 CSS/Typ eSc r ip tで再利用可能なコンポーネントを開発 Power Apps component framework ⚫ クライアントスクリプト(JavaScript ) Web リソースでJavaSc r ip tでロジック実装。ビジネスルールで補えない場合など クライアント スクリプト ⚫ Azure Functions( C#、Java、JavaScr ipt、Power Shell、Pythonなど ) AP I Manag ement にホストしロジックを実行 Azure Functions

41.

モデル駆動型アプリの機能拡張(ノーコードとプロ開発) ⚫ PCF( Power Apps component framework )のサンプル

42.

モデル駆動型アプリの機能拡張イメージ モデル駆動型アプリ データソース+ ビュー、フォーム グラフ、ダッシュ ボード セキュリティなど ノーコード ロジック プロ開発 ロジック BPF プラグイン PCF ビジネス ルール Azure Functions リアルタイム ワークフロー クライアント スクリプト ローコードロジック Power Automate 標準コネクタ データソース など プレミアムコネクタ カスタムコネクタ AI Builder データソース など

43.

モデル駆動型アプリの機能拡張イメージ モデル駆動型アプリ ノーコード ロジック より機能的なロ プロ開発 ロジック ジック追加の際 BPF データソース+ ビュー、フォーム グラフ、ダッシュ ボード セキュリティなど にはハードルが プラグイン 上がる? PCF ビジネス ルール Azure Functions リアルタイム ワークフロー クライアント スクリプト ローコードロジック Power Automate 標準コネクタ データソース など プレミアムコネクタ カスタムコネクタ AI Builder データソース など

44.

モデル駆動型アプリの機能拡張イメージ モデル駆動型アプリ もうちょっと機能を拡張し たいわ。キャンバスアプリ データソース+ を頑張ったのにあんまり使 ビュー、フォーム グラフ、ダッシュえないのね。。 ボード セキュリティなど プロ開発のリソースもない しどうしたものかしら。。 ぱわ代 ノーコード ロジック より機能的なロ プロ開発 ロジック ジック追加の際 BPF にはハードルが プラグイン 上がる? PCF ビジネス ルール Azure Functions リアルタイム ワークフロー クライアント スクリプト ローコードロジック Power Automate 標準コネクタ データソース など プレミアムコネクタ カスタムコネクタ AI Builder データソース など

45.

モデル駆動型アプリの機能拡張イメージ モデル駆動型アプリ もうちょっと機能を拡張し たいわ。キャンバスアプリ データソース+ を頑張ったのにあんまり使 ビュー、フォーム グラフ、ダッシュえないのね。。 ボード セキュリティなど プロ開発のリソースもない しどうしたものかしら。。 ぱわ代 ノーコード ロジック 安心してください! より機能的なロ プロ開発 ロジック ジック追加の際 にはだいぶハー パワれますよ! BPF ドルが上がる? ビジネス ルール プラグイン PCF Azure Functions リアルタイム ワークフロー クライアント スクリプト ローコードロジック Power Automate 標準コネクタ データソース など プレミアムコネクタ カスタムコネクタ AI Builder データソース ぴーたくん など

46.

ローコード(Power Fx) カスタマイズで機能拡張!

47.

カスタムページと Power Automate

48.

カスタムページ カスタムページ:キャンバスアプリ(ほぼ同等)をモデル駆動型アプ リのページとして作成できるイメージ デザイナーからページの追加・選択が可能 カスタム ページを使用して、モデル駆動型アプリとキャンバ ス アプリを統合する - Power Apps | Microsoft Learn モデル駆動型アプリにカスタム ページを追加する - Power Apps | Microsoft Learn ページとして作成され、ソリューションに含ま れます。上記からも編集が可能です

49.

カスタムページ ページの編集画面でキャンバスアプリ同様にページを作成。同様のコ ネクタを使用可能。コントロールは一部異なる レスポンシブ レイアウトが基本 基本1画面で作成するが 設定で複数画面にも出来る コネクタは同様に使用可能 コントロールが一部少ない テーブルから自動生成も出来る(ちょっと異なる) (ドロップダウン、PDF キャンバスアプリ同様にいろいろカスタムできる ビューア、AI Buliderなど)

50.

カスタムページ サポートされるコントロール一覧 モダンコントロール も使える (機能オンで) 一部少ないが主要なコント 通常のキャンバスアプリとは異なりFluent UIコン ロールはおおむね存在 トロールになっている。プロパティも一部違う (DefaultやSelectedDateがValueだったり) 最新のモダンコントロールとも異なる。

51.

カスタムページ 既存キャンバスアプリからの移行 カスタム ページを使用して、モデル駆動型アプリとキャンバス アプリを 統合する - Power Apps | Microsoft Learn 公式には既存キャンバスアプリからの移植 としてコピーして貼り付ける手順が記載あ るので出てこないコントロールも使えると いうことでよいのかも? ※通常キャンバスのコントロールもちょっ と違うけど貼り付けて使えるしそれでもい いよってことなのか?

52.

カスタムページとPower Automate 今回のサンプル ① ファイル(エクセル)インポート機能 カスタムページ+ Power Automate ② ファイル一覧画面 カスタムページ + Power Automate ※補足あり ③ さらに機能的な画面 カスタムページ + AI Builder ※補足あり

53.

デモ

54.

① ファイル(エクセル)インポート機能 ファイルから取り込み新規レコードを作成 ファイルを取込みAutomateへ渡す Automate内で解析してレコード作成 結果を戻して表示。 そのままレコードへ遷移も可能

55.

① ファイル(エクセル)インポート機能 ファイルから取り込み新規レコードを作成 基本項目や明細部分(1:Nデータ)も 同時に取込みしている 取込みファイルも保持させる ※必要なら併せて履歴テーブルに登録なども可能

56.

②ファイル一覧画面 ファイルのみを一覧で表示、ダウンロードや一括処理など PDFビューアでファイル表示 ※通常出てこないのでキャンバスから移植 (この部分は実験的な実装とお考え下さい) ビューではファイル有無しか表示できないので、カ スタムページで一覧からファイルを操作(ダウン ロード、更新など)出来るようにしたサンプル

57.

②ファイル一覧画面 ファイルのみを一覧で表示、ダウンロードや一括処理など 複数選択してファイルのダウンロードのサンプル (OneDriveなどにフォルダ、ファイル作成し配置)

58.

③ さらに機能的な画面:AI Builder サンプル AI Builder のテキスト認識(OCR)を実装(実験的) クリップボードへコピー (Copy関数) テキストに保持して 修正して使用などのサンプル AI Builderのテキスト認識(OCR) ※通常出てこないのでキャンバスから移植 (この部分は実験的な実装とお考え下さい)

59.

AI Builder では他にも色々出来る AI Builder :事前構築済みやカスタムモデルを使用できる モデルのトレーニングなども可能。Apps、Automateから利用できる Power Apps Premiumは 500、Power Automate Premiumは5,000クレ ジット×1ライセンスがテ ナントで使える。足りな い分は容量アドオンで 色々なモデルあり ※OCRは1枚3クレジット →Azure AI Services さらにプロンプトビルダーも (プレビュー:米国) →Azure Open AI AI Builder の概要 | Microsoft Learn プロンプト ビルダーでカスタム プロンプトを作成す る (プレビュー) | Microsoft Learn

60.

Power Automate のDataverseコネクタ Dataverseトリガー、アクションは優秀 Webhook:すぐ動作する ※ポーリングではない ・種類:新規、更新、削除、新規+更新など選択 ・スコープ:全体、部署など指定可能 ・列を選択で対象の列(更新された列)を指定できる! ・行のフィルターでトリガー条件をここに書ける! ・所有者以外に実行したユーザーを指定もできる! 通常テーブル以外にもBPFテーブルをトリガー にしてステージ更新の自動化なども可能

61.

Power Automate のDataverseコネクタ Dataverseトリガー、アクションは優秀 一覧取得時 ・列を選択:取得列を指定できる ・行のフィルター:通常どおり出来る ・クエリの展開:親テーブルの項目を同時に取得出来る! ・Fetch Xmlクエリでのフィルタも出来る(参照先を条件 にするなどより複雑なもの) バインドしていないアクションを実行 →レコードの割り当てや共有などの処理も呼び出せる

62.

Power Automate で Graph API プレミアムならGraph API (ユーザーやドライブ、ファイルなど)を使える! HTTP With Microsoft Entra ID(旧Azure AD)を使うとアプリケーション登録 もなく自分の権限で実行可能 Http With Microsoft Entra IDコネクタ Dataverse を使えばAzureへのアプリケーション登 Web APIも! 録なく実行できる(自分の権限で) Graph APIのファイル操作 →Excel Onlineコネクタと比較して以下が優秀! ・セルや範囲でも取得や更新が可能(テーブルのみではない) ・処理が高速(特に書き込みが一瞬!ループ不要) ・反映までのタイムラグもほぼなし(~1分位待つがない) ・マクロファイルも扱える

63.

カスタムページ サイドリンクの設定:※カスタムページ問わず テーブルの特権などを使用して表示するユーザーを制御可能! 通常のビューにも設定がありますが、 ページやビューの詳細設定から テーブルの特権(その他特権も)を指定し てその権限があるユーザーのみに表示させ ることが可能! →担当部門、管理者のみに表示させるなど セキュリティロールによって表示制御がで きます。

64.

カスタムページ ライセンスや共有:モデル駆動型に内包されているので個別の共有は 不要。ライセンスも内包されているので不要 カスタム ページを使用して、モデル駆動型アプリとキャンバス アプリを統合 する - Power Apps | Microsoft Learn ・埋め込みキャンバスアプリは別途共 有が必要だがカスタムページは不要 ・ライセンスはモデル駆動型分のみ →別途キャンバスアプリで作った場合、 per app planや従量課金だと×2ライ センス必要となるところを1つで済む。

65.

カスタムページとPower Automate ポイント! • コネクタは同様に使用可能。コントロールは一部異なる • 基本は1画面で作る。が複数画面にも出来る • アプリのサイドリンクに追加して表示できる • キャンバスからの移植も可能と公式にあり • ビューやフォームへの遷移が可能 • 別途の共有やライセンスは不要! ※埋め込みキャンバスは別途共有が必要 • サイドリンクは特権などに応じて表示制御可能(ビューも対応) • Power Automate Dataverseコネクタは優秀

66.

モダンコマンドバーと Power Automateやカスタムページ

67.

モダンコマンドバー コマンドバー:ビューやフォームなど画面に応じて、上部にコマンド バーがあり色々なアクションが出来る(標準的な既存コマンドバー) ビュー、メインフォーム、 サブグリッドなどの上部にある コマンドバー部分 コマンド デザイナーの概要 - Power Apps | Microsoft Learn

68.

モダンコマンドバー コマンドバー:新規で作成するコマンドをPower Fx かJavaScriptで 実装することが可能(クラシックは編集不可) コマンドバー編集画面 ★既存のコマンド(クラシック)は編集不可 コマンドバーの場所 →従来はソリューションをZipで出して customization.xml を修正して入れなおす、また はコミュニティツール:RIBBON WORKBENCH を使う必要があった(クラシックはこれで調整) コマンド デザイナーの概要 - Power Apps | Microsoft Learn コマンドとリボンのカスタマイズ (モデル駆動型アプリ)

69.

モダンコマンドバー コマンドバー:普通やドロップダウンなど選択可能。順番や名前、ア イコンを指定する ラベル(表示名) やアイコン有無、 普通 ドロップダウン 分割ボタン 表示する位置 アイコンを選択 を調整 グループ から種類を選択 コマンド バーをカスタマイズする - Power Apps | Microsoft Learn

70.

モダンコマンドバー コマンドバー:Power Fxで実装する場合はOnSelectに式を実装 表示制御はVisibleに実装 Power Fx コマンドを使用する - Power Apps | Microsoft Learn Power Fxで実装。カスタムページ用のConfirm関数(確認ダイア ログを出せる!)や Notify関数、Navigate関数で指定のビューや フォーム、カスタムページへの遷移も実装できるPatchやForAllを 使ってテーブル更新などを行える 列の値や複数選択されていたらや レコード権限有無などの条件に応 じて表示・非表示を切り替えれる

71.

モダンコマンドバー コマンドバー:一部の関数のみがサポートされている Dataverse以外のコネクタやAutomate呼び出しなどは出来ない 基本的には、PatchやForAll、Navigateや Notify、Confirmなどで実装するイメージ Confirmは今のところコマンド バーのPower Fx専用の関数 是非普通キャンバスにも欲しい!

72.

モダンコマンドバー コマンドバー:JavaScriptの場合はWebリソースにJSファイルをアッ プしてライブラリ(ファイル名)と呼び出す関数を指定する JavaScriptファイルをWeb リソースとしてアップ、ラ イブラリで指定するとコマ ンドクリック時に動作する クライアントスクリプトと して実装が出来る

73.

モダンコマンドバー コマンドバー:コンポーネントライブラリとして作成・保持される ここからのコード編集も可能(別テーブルを追加する場合など) コンポーネントライブラリの編集画面 ここからのコード編集も可能 別テーブルを追加する際もここから行うこと で追加が可能(最初は作成したテーブルのみ を参照できる)

74.

モダンコマンドバーとPower Automateやカスタムページ 今回のサンプル ① ビュー:他画面遷移、カスタムページ遷移 ② ビュー:操作系(申請、一括承認) ③ ビュー:ダイアログでカスタムページを開く! ④ フォーム:操作系(関連レコード作成) ⑤ フォーム:Power Automateを関節的にキックして処理 ⑥ フォーム:ダイアログでカスタムページを開く!

75.

デモ

76.

① ビュー:他画面遷移、カスタムページ遷移 カスタムページへ遷移 Navigateでカスタムページを指定のみ

77.

① ビュー:他画面遷移、カスタムページ遷移 別のビューへ遷移(別テーブル指定なども可能) Navigateでテーブルとビューを指定 ※ビュー切替えで出来るので無くてもいいが よく使うビューであれば操作性がアップする

78.

② ビュー:操作系(申請、一括承認) 申請、承認/一括承認の操作を実装 確認ダイアログを出して、ステー タスをPatch、成功Notifyで通知 する。 表示は1件選択されている場合の み表示。ステータスが○○の場合 などの調整も出来る 複数選択の対応はForAllでPatch 分割ボタン(プルダウン 成功時に対象件数も表示している +既定のボタンあり)で 表示も1件、1件より大きい場合で 承認(1件)と一括承認 承認、一括承認を表示分け を1コマンドで実装

79.

② ビュー:操作系(申請、一括承認) 申請、承認/一括承認の操作を実装 表示や実行の制御は本来なら ステータスが○○の場合、やテーブ ル、レコードへの権限などで制御 データを更新する処理 Confirm関数でダイアログを出し て確認が出来る! Notifyで通知が出来る!

80.

② ビュー:操作系(申請、一括承認) 申請、承認/一括承認の操作を実装 一括でデータ(ステータス)を更新 確認ダイアログと通知で件数も一緒に表示 コマンドは単一選択時は承認、複数選択時は一 括承認を表示させるようにしている

81.
[beta]
③ ビュー:ダイアログでカスタムページを開く!
ダイアログでカスタムページを開き、機能的なページをビュー上で実

現する!ダイアログでの表示にはJavaScriptを使用する
// Centered Dialog
function openDialog()
{
var pageInput = {
pageType: "custom",
name: "new__a8842",
};
var navigationOptions = {
target: 2,
position: 1,
width: {value: 50, unit:"%"},
title: "見積ファイル取込み"
};
Xrm.Navigation.navigateTo(pageInput,
navigationOptions)
.then(
function () {
// Called when the dialog closes
}
).catch(
function (error) {
// Handle error
}
);
};

実際のスクリプト
中央にダイアログ表示する実装
nameはページの名前
(ソリューションで確認する)

カスタム ページをダイアログとして開き、クラウド フローを使
用する - Power Apps | Microsoft Learn

82.

③ ビュー:ダイアログでカスタムページを開く! ダイアログでカスタムページを開き、機能的なページをビュー上で実 現する!ダイアログでの表示にはJavaScriptを使用する この実装は以下の公式ページに JavaScriptのサンプルがあるので そのまま使用すればOK! (外側を関数名で囲む必要あり) その他にもレコード情報を渡して カスタムページ側で受け取り処理 することも出来る! モデル駆動型アプリのカスタム ページとの間を、クライアント API を使用して移動する - Power Apps | Microsoft Learn

83.

③ ビュー:ダイアログでカスタムページを開く! イチオシ! ダイアログでカスタムページを開き、機能的なページをビュー上で実 モデル駆動型とキャンバスの 現する!ダイアログでの表示にはJavaScriptを使用するよりシームレスな結合 作成していたファイル取込みのカスタム ページをダイアログで表示! モデル駆動型のビュー上から移動せずに処 理を実行できる! ※カスタムページはサイドリンクに 表示せずにダイアログのみで使ってもよい

84.

④ フォーム:操作系(関連レコード作成) 関連レコードを作成し初期値を入力、その画面へ遷移する。 別テーブルのレコードを作成して 初期値(関連付けやその他列値) を入れてそのまま画面遷移させる

85.

⑤ フォーム:Power Automateをキックして処理 トリガー用の列を更新してAutomate(Dataverseトリガー)をキッ クし処理を実行させる コマンドバーからはフローを直接キックできない →トリガー用の列を用意して更新して Dataverseトリガーフローを動かす! Webhookなのですぐ動く 実行後の結果をアプリ上に表示したり完了後に自動 で画面更新は出来ないので実行した旨などを通知 (しばらくしてリロードしてください的な)

86.

⑤ フォーム:Power Automateをキックして処理 トリガー用の列を更新してAutomate(Dataverseトリガー)をキッ クし処理を実行させる エクセルファイルからデータ取込みと 同様の処理。既存レコードに対して再 度取込みデータを更新する ※しばらくしてリロードで画面反映 ※フロー内では最後(成功エラー どちらも)フラグをオフに戻す

87.

⑤ フォーム:Power Automateをキックして処理 トリガー用の列を更新してAutomate(Dataverseトリガー)をキッ クし処理を実行させる データからPDFファイルを作成し てファイル列に入れる この列からダウンロードできる ※デモではフロー実装部分はサ ンプル実装です

88.
[beta]
⑥ フォーム:ダイアログでカスタムページを開く!
ビューと同様に機能的なページをフォーム上で開く。ダイアログでの

表示にはJavaScriptを使用する
// Centered Dialog
function openDialog()
{
var pageInput = {
pageType: "custom",
name: "new_ocr_421f9",
};
var navigationOptions = {
target: 2,
position: 1,
width: {value: 80, unit:"%"},
title: "OCR解析"
};
Xrm.Navigation.navigateTo(pageInput,
navigationOptions)
.then(
function () {
// Called when the dialog closes
}
).catch(
function (error) {
// Handle error
}
);
};

さきほどとの違いはページ名やタイトル、幅の指定

参考リンクなどは「③ ビュー:ダイアログでカスタム
ページを開く!」を参照

89.

⑥ フォーム:ダイアログでカスタムページを開く! イチオシ! ビューと同様に機能的なページをフォーム上で開く。ダイアログでの 表示にはJavaScriptを使用する モデル駆動型とキャンバスの よりシームレスな結合 機能的な画面(サンプルではOCR)をモデル駆動型 のフォーム上から移動せずに処理を実行できる! →カスタムページ側にフォームを表示してそのまま 更新するなどの処理も実装できる ※ダイアログ表示時にレコード情報を渡せる フルで開くアイコンで 全画面もできる

90.

レスポンシブに対応しておけばスマホでもOK カスタムページがレスポンシブ対応であれば スマホレイアウトでもちゃんと使える スマホアプリで開いた場合

91.

モダンコマンドバーとPower Automateやカスタムページ ポイント! • コマンドバー(モダン)はPower FxかJavaScriptで作れる • 基本的なPower Fx関数やNavigateやNotify、Confirm関数が使用 できる クラシックも徐々に対応できるようになると公式にあり • クラシックなコマンドバーは操作不可(XML操作かツールで) • 表示制御は色々な条件を使って制御が出来る • Dataverse更新時トリガーを使い間接的にフローをキック出来る! • JavaScriptを使ってカスタムページをダイアログ表示できる!

92.

モデル駆動型アプリの機能拡張イメージ モデル駆動型アプリ データソース+ ビュー、フォーム グラフ、ダッシュ ボード セキュリティなど ノーコード ロジック プロ開発 ロジック BPF プラグイン PCF ビジネス ルール Azure Functions リアルタイム ワークフロー クライアント スクリプト ローコードロジック Power Automate 標準コネクタ データソース など プレミアムコネクタ カスタムコネクタ AI Builder データソース など

93.

モデル駆動型アプリの機能拡張イメージ モデル駆動型アプリ ノーコード ロジック BPF データソース+ ビュー、フォーム グラフ、ダッシュ ボード セキュリティなど ローコード Power Fx プロ開発 ロジック カスタム ページ プラグイン ビジネス ルール リアルタイム ワークフロー コマンド バー PCF Azure Functions クライアント スクリプト Power Fxでのローコード 計算列も カスタマイズを選択肢に追加! ローコードロジック Power Automate 標準コネクタ データソース など プレミアムコネクタ カスタムコネクタ AI Builder データソース など

94.

色々あるPower Apps 達 イメージ図 スタンドアロンライセンス範囲 Power Fx キャンバスアプリ プレミアムコネクタ カスタムコネクタ データソース データソース 標準コネクタ キャンバスアプリ Dataverse for Teams版 SharePoint カスタマイズフォーム Dataverse for Teams Power Fx 標準コネクタ モデル駆動型 アプリ カスタムページ コマンドバー データ ソース Power Apps カード Power Automate など AI Builder データソース など データソース+ ビュー、フォーム グラフ、ダッシュ ボード セキュリティ ロジックなど Power Pages モデル駆動型アプリ プレミアムコネクタ カスタムコネクタ AI Builder 仮想 など データソース・他 データソース など

95.

色々あるPower Apps 達 イメージ図 スタンドアロンライセンス範囲 これなら今まで頑張った Power キャンバスアプリ Fx キャンバスアプリの知識 データソース 標準コネクタ データソース プレミアムコネクタ カスタムコネクタ も使えるわ! など AI Builder ありがとうぴーたくん! キャンバスアプリ Dataverse for Teams版 SharePoint カスタマイズフォーム Dataverse for Teams Power Fx モデル駆動型 アプリ データソース+ ビュー、フォーム グラフ、ダッシュ ボード セキュリティ ロジックなど カスタムページ コマンドバー データ ソース Power Apps カード ぱわ代 Power Pages Power Automate 標準コネクタ など プレミアムコネクタ カスタムコネクタ パワれますよ! AI Builder など モデル駆動型アプリ 安心してください! データソース 仮想 データソース・他 データソース ぴーたくん など

96.

モデル駆動型アプリのデモアプリ デモ用のアプリ:モデル駆動型アプリをベースに標準機能と Power Fxと Power Automate のローコードで機能拡張! モデル駆動型アプリ 見積依頼 ファイル エクセル 取込み 承認 見積 画像(PDF) 解析 見積PDF 明細 受注情報 ファイル 一括確認 PDF作成 発注 取引先 受注作成 一括DL 見積依頼 > アプリ登録(見積/明細) > 承認 > 見積発行 > 受注情報登録 >・・・

97.

ローコードプラグインもプレビュー中! Power Fxでプラグインが作成できるようになってきています! 現在プレビュー中。使用できる関数もまだ少ない 手動、イベントトリガーの2種 Apps、Automateなどから使える Dataverse ローコード プラグインを使用 する - Power Apps | Microsoft Learn ローコード プラグイン Power Fx Power Apps | Microsoft Learn

98.

ライセンスや開発者環境

99.

開発者プラン、開発者環境でまずは作れます スタンドアロンライセンスが必要な範囲でも開発者プラン、開発者環 境で作成することが出来ます。 この辺りの記事をご参考に開発者環境で Power Apps 開発者プランで開発環境を作成する Power Platform | Microsoft Learn Microsoft 365 開発者プログラムに参加して Power Apps, Power Automate の開発者環境を取得しよう #Microsoft - Qiita 環境まわりの設定でも自動で開発者環境が作成 される機能などが使えるようになっています (ご自身のテナント状況をご確認ください) プレミアム機能を使って開発や検証が出来ます。 ※管理者が開発者環境を使える設定にしている前提 ※AI Builderはいまは対象外だがそのうちに2万クレ ジット使えるようになるらしい! 既定の環境ルーティング (プレビュー) - Power Platform | Microsoft Learn Building a JIT app for elevated permissions on Microsoft Power Platform | Microsoft Power Apps

100.

ライセンス(ざっくり) Power Apps のライセンスは数種類あり Power Automateもコンテキスト範囲は関連付ければ使用可能! ・Power Apps ライセンスプラン Premium :いくつでも作成・利用が可能 ※2023年12月時点 ・・20ドル per app :アプリ1つの使用につき一人一つ必要 ・・ 5ドル 従量課金 :ひと月に使った人数分が課金 ・・10ドル その他APIコール数や追 加データ量などに差あり アプリを4つ使うように なったらPremiumの方 Power Appsライセンスがあれば がお得! Power Automateも範囲内で使えます! (アプリから呼ぶ、同じデータソースを使用) →アプリと関連付けてあげればOK Power Platform のライセンスに関する FAQ Power Platform | Microsoft Learn

101.

ライセンス(ざっくり) アプリが少ないうちは作成側のみPremium 、使用者はper app や従 量課金で進めて規模が大きくなれば使用者にもPremium付与など ① ①アプリ ②アプリ Premium Premium ⑨アプリ ⑥ ② ③ ⑩アプリ ⑦ ④ ⑧ … ③アプリ ⑤ AA … ①アプリ Premium … Per app 従量課金 Per app 従量課金 1アプリで全員Premiumだと割高感→作成者、利用者で分けて付与 将来的に10アプリになれば1つ当たり250円。さらにアプリを増や していけばどんどんコスパよくなりライセンスの価値が上がる!

102.

まとめ

103.

全体のまとめ ① ライセンスを使用するならモデル駆動型アプリを使わないと もったいない! ② モデル駆動型アプリには豊富な標準機能があるよ! ③ ローコード Power Fx でもさらに機能拡張が出来るよ! ④ 豊富な標準機能とローコードの組み合わせで、より機能的なア プリをスマートに早く作れるよ! ⑤ さらに機能拡張が必要な場合はプロ開発も出来るよ! モデル駆動型アプリには豊富な選択肢がある!

104.

Power Fx 数式リファレンス(カテゴリ別) Power Fx をカテゴリ別にまとめた記事をアップしています Power Apps Power Fx 数式リファレンス カテゴリ別チートシート | Power Apps Tips ログ (youseibubu.com) 定期的に更新しています 初学者の方の学習や更新の チェックなどに活用ください モデル駆動型関連の記事はまだ少ないですが今後増やしていきます BLOG:Power Apps Tips ログ (youseibubu.com)

105.

おまけ:コミュニティやゲー ムアプリ紹介など

106.

いろんなPower Platform のコミュニティ いろんなコミュニティに参加するとタメになるお話を聞けたり、 同志に出会えたり、自分もアウトプットしていこうと思えるように Power Apps Weekly News - connpass やまさんとアキラさんがPower Appsの最新アッ プデート情報をYouTube Liveで確認してくれる 気ままに勉強会 - connpass たなさん主催、豪華運営陣でPower Automateや その周りの情報を共有、勉強会してくれる おうじゃさんといっしょ - connpass おうじゃさん主催のPower Apps系 わいわいもく もく会 Japan Power Platform Game Builders - connpass コルネさん主催のPower Platformでゲームを作っ てみたり発表したりできる会 ほかにもいろいろ! Connpassで検索してみよう!

107.

Qiita Advent Calendar 2023 Qiita Advent Calendar 2023開催中! Power Apps、Power Microsoft Power Appsのカレンダー | Advent Calendar 2023 - Qiita Automate、Power BI の有識者の記事がたくさん! Microsoft Power Automateのカレンダー | Advent Calendar 2023 - Qiita 色々あるよねPower Microsoft Power BIのカレンダー | Advent Calendar 2023 - Qiita 色々あるPower Apps について (Microsoft Power Apps Advent Calendar 2023/12/1) | Power Apps Tips ログ (youseibubu.com) Appsの部分の記事も

108.

JPPGB ゲームコンテスト 【JPPGB】ゲーム作成コンテスト #0 でパワスロを作って大賞・デザ イン賞をいただきました! 【JPPGB】ゲーム作成コンテスト #0の 作品が公開されました! - コルネの進捗 や備忘録が記されたなにか (hatenablog.com) 【パワスロ】JPPGB ゲーム作成コンテ スト #0 パワスロで大賞ならびにデザイ ン賞をいただきました! | Power Apps Tips ログ (youseibubu.com) 記事からアプリのダウンロード (GitHubから)もできます

109.

JPPGB ゲームコンテスト キャンバスアプリで作られたゲームがたくさん!日本人すごい! 【Power Apps】ボンバーマンを作ってみよう! プレイヤー を配置する - コルネの進捗や備忘録が記されたなにか (hatenablog.com) 主催コルネさんが以前に作 成されたボンバーマン 【仕様紹介編】Power AppsでChatGPTと協力して リバーシを作ってみた | PPログ (powerplatformnikki.com) PPログさんのリバーシ CPUなどのロジックがすごい!

110.

JPPGB ゲームコンテスト https://x.com/MMishima_3/status /167370126 8509065219?s=20 Masahiro Mishimaさんのラジコン! すごすぎてアゴが外れます おうじゃさんのチーズキャット ハンズオンもやっていただけました! (23) 【JPPGB #7】Makoto Maedaさんことおうじゃ さんによるCheeseRatのハンズオン! - YouTube Power Appsで横スクロールア クションゲームを作る ジャン プ編 - Power Appsの使い方 (hateblo.jp) おうじゃさんの5年ほど前に作られ た横スクロール!コインドック

111.

ゲーム作りは役に立つ!(はず) https://twitter.com/Kodam aJn/status/162039623199 3491456 児玉さんのSlide Puzzle with rolling ball 他にもたくさん! DaiさんのAIに夢を乗せたドリームプロレス! 試合の流れや対戦結果をAIに生成させて夢の対戦が実 現!インタビューや新聞記事までも生成したり読み上 げたりというこだわりようです! (個人所有物の個人範囲の利用のみ) JPPGB #8 - connpass

112.

ゲーム作りは役に立つ!(はず) 海外の有識者の方々がゲーム作ったりしてますが、いやいや日本 の皆さんすごいです! ゲームを作ると、デザイン面や動きのある実装、ロジカルな処理 などのお勉強にもなります。(きっと) そのまま業務アプリに利用できるものや考え方など応用できる実 装があったりします(おそらく) 無駄にはならないと思いますので、お時間があるときにでも試し に作ってみたりするのものいいかもしれません(たぶん)

113.

全体のまとめ ① ライセンスを使用するならモデル駆動型アプリを使わないと もったいない! ② モデル駆動型アプリには豊富な標準機能があるよ! ③ ローコード Power Fx でもさらに機能拡張が出来るよ! ④ 豊富な標準機能とローコードの組み合わせで、より機能的なア プリをスマートに早く作れるよ! ⑤ さらに機能拡張が必要な場合はプロ開発も出来るよ! モデル駆動型アプリには豊富な選択肢がある!