PowerAppsハンズオン / 20220527_PowerApps_Handson

2022/5/27 PowerAppsハンズオンの資料です。
開発者プランの個人用環境を作成する事前準備はこちらを参照
https://speakerdeck.com/shotayano/20220527-powerapps-preparation

Transcript

1. PowerAppsハンズオン
2. 自己紹介 • 株式会社KIS • 矢野翔大 【興味あること】 • ARとかVRとか電子部品 【最近やってること】 • ３Dスキャン 【活動中】 • KumaMCN • Code for Kumamoto 寿司を3Dにしてみた Spatial Anchors リアルアバター作成
3. Power Platformとは
4. Power Platformとは • ローコードでWebアプリを構築できるサービス。 • データソースにはDataverseやSharepointなどを使用する。 PowerApps • プロセスの自動化のためのサービス。 • 定型業務などのワークフローを作成できる。 PowerAutomate • データ分析のためのインサイトを提供するサービス。 • レポートとダッシュボードを使ってデータを可視化する。 PowerBI • コードなしでチャットボットを作成できるサービス。 • データサイエンティストがいなくても作成できる。 Virtual Agents
5. 今日やるもの • ローコードでWebアプリを構築できるサービス。 • データソースにはDataverseやSharepointなどを使用する。 PowerApps • プロセスの自動化のためのサービス。 • 定型業務などのワークフローを作成できる。 PowerAutomate • データ分析のためのインサイトを提供するサービス。 • レポートとダッシュボードを使ってデータを可視化する。 PowerBI • コードなしでチャットボットを作成できるサービス。 • データサイエンティストがいなくても作成できる。 Virtual Agents
6. Power Apps
7. PowerAppsの3つのアプリ • キャンバスアプリ • モデル駆動型アプリ • ポータルアプリ ⇒ Power Pagesに進化
8. キャンバスアプリ • 自由に画面を設計できる • マルチデバイス対応 • EXCELの式を入力するように開発
9. モデル駆動型アプリ • 使用するテーブルと列を選ぶだけ • レイアウトはおまかせ • テーブルやビュー、ビジネスルール を決めるだけで良い
10. 【New】画像からアプリを作成する • 2025/5/25 MS Buildで発表されたキャンバスアプリの1種 • 画像から画面を作成することができる • 手書きで大まかなレイアウトを書く • 写真撮ってあとはAIが認識してフォームを作成 • ボタンとか背景つければ出来上がり
11. 【New】Power Pages • 2025/5/25 MS Buildで発表されたポータルアプリの進化版 • テンプレートから選んでWebサイトを構築 • 細かいところは自分でカスタマイズ
12. Power Apps なんちゃってサポートデスク的な簡単なアプリを作成します
13. 環境の確認 個人環境(名前’s Environment)になっていること
14. テーブルの作成
15. テーブルの作成 • 左のメニューからDataverse＞テーブルの順にクリック • DataverseはPowerPlatform用のデータベース
16. テーブルの作成 • 新しいテーブルをクリック
17. テーブルの作成 下記の値を入力して作成ボタンをクリック • 表示名：SUPPORT_DESK
18. テーブルの作成 プライマリ列をクリックし下記の値を入力して作成ボタンをクリック • 表示名：SupportDeskID • 入力後保存
19. テーブルの作成 • この画面が出るまで待つ
20. テーブルに項目を追加する • SupportDeskIDの列を編集する • 列の編集をクリック
21. テーブルに項目を追加する • SupportDeskIDの列を編集する • データの種類を「オートナンバー」に変更 • 保存ボタンクリック ※ほかの項目は変更なしでOK
22. 「ステータス」列の追加 • 新しい列を追加 • ＋マークをクリック
23. 「ステータス」列の追加 以下を入力する • 表示名：ステータス • データの種類：選択肢 • 動作：シンプル • 必須：必要なビジネス • 検索可能：チェックする • グローバル同期：はい • 入力後新しい選択をクリック
24. 「ステータス」列の追加 以下を入力する • 表示名：SupportStatusList • 選択肢： • 新規 • 対応中 • 完了 • 取り下げ • ※新しい選択から追加可能 • 入力後保存ボタンをクリック
25. 「ステータス」列の追加 以下を入力する • 同期する相手：SupportStatusList • 先ほど作成したもの
26. 「ステータス」列の追加 以下を入力する • 既定の選択肢：新規 • 高度なオプションをクリック
27. 「ステータス」列の追加 以下を入力する • スキーマ名：supportstatus • cr1dbという値は環境で違う • 入力後保存ボタンクリック
28. 「登録日」列の追加 • 新しい列をクリック
29. 「登録日」列の追加 以下を入力する • 表示名：登録日 • データの種類：日時と時刻 • 書式：日付と時刻 • 必須：必要なビジネス • 動作：シンプル • 検索可能チェック：ON • 入力後「高度なオプション」をクリック
30. 「登録日」列の追加 以下を入力する • スキーマ名：createdon • その他はそのまま • 入力後保存ボタンクリック
31. 「タイトル」列の追加 • 新しい列をクリック
32. 「タイトル」列の追加 以下を入力する • 表示名： タイトル • データの種類：1行テキスト • 書式：テキスト • 必須：必要なビジネス • 検索可能チェック：ON • 高度なオプションをクリック
33. 「タイトル」列の追加 以下を入力する • 表示名： SupportTitle • その他はそのまま • 入力後保存ボタンクリック
34. 「詳細」列の追加 • 新しい列をクリック
35. 「詳細」列の追加 以下を入力する • 表示名： 詳細 • データの種類：複数行テキスト • 書式：テキスト • 必須：必要なビジネス • 検索可能チェック：ON • 高度なオプションクリック
36. 「詳細」列の追加 以下を入力する • 表示名： SupportDetail • その他はそのまま • 入力後保存ボタンクリック
37. 「質問者」列の追加 • 「列の追加」をクリック
38. 「質問者」列の追加 以下を入力する • 表示名： 質問者 • データの種類：1行テキスト • 書式：テキスト • 必須：必要なビジネス • 検索可能チェック：ON • 高度なオプションをクリック
39. 「質問者」列の追加 以下を入力する • スキーマ名： SupportQuestioner • 他はそのまま • 入力後保存ボタンクリック
40. 「質問者メールアドレス」列の追加 • 「列の追加」をクリック
41. 「メールアドレス」列の追加 以下を入力する • 表示名： メール • データの種類：1行テキスト • 書式：電子メール • 必須：必要なビジネス • 検索可能チェック：ON • 高度なオプションをクリック
42. 「メールアドレス」列の追加 以下を入力する • 表示名： SupportMail • その他はそのまま • 入力後保存ボタンをクリック
43. 「回答者」列の追加 • 「列の追加」をクリック
44. 「回答者」列の追加 以下を入力する • 表示名： 回答者 • データの種類：1行テキスト • 書式：テキスト • 必須：任意 • 検索可能チェック：ON • 高度なオプションをクリック
45. 「回答者」列の追加 • 以下を入力する • 表示名： SupportResponder • その他はそのまま • 入力後保存ボタンクリック
46. 「回答」列の追加 • 「列の追加」をクリック
47. 「回答」列の追加 以下を入力する • 表示名： 回答 • データの種類：複数行テキスト • 書式：テキスト • 必須：任意 • 検索可能チェック：ON • 高度なオプションをクリック
48. 「回答」列の追加 以下を入力する • 表示名： SupportResult • その他はそのまま • 入力後保存ボタンクリック
49. テーブル定義完成
50. キャンバスアプリの作成
51. 新しいアプリを作成 • ホームに戻る • 空のアプリをクリック
52. 新しいアプリを作成 • 空のキャンバスアプリを作成 • 作成ボタンクリック
53. 新しいアプリを作成 • アプリ名を入れて作成ボタンクリック
54. 補足：このメッセージが出たらスキップでよい
55. これが開発画面
56. チケット作成の画面を作る
57. 画面タイトルの作成 • 左のメニューの「＋(挿入)」をクリック • 四角形をクリック
58. 画面タイトルの作成 • 青い四角形をマウスで操作して広げてください
59. 画面タイトルの作成 • 高さは80にする
60. 画面タイトルの作成 • ＋マークをクリック • テキストラベルをクリック
61. 画面タイトルの作成 【以下の通りに設定】 ラベルの大きさ：青い四角形に合わせる プロパティは以下の通り ・テキスト：チケット作成 ・フォントサイズ：20 ・フォントの太さ：太字 ・文字色：白
62. フォームの作成 • ＋マークをクリック • 編集フォームをクリック
63. フォームの作成 【以下の通りに設定】 大きさ：タイトルの下すべて
64. フォームの作成 • データを追加する • データマークをクリック • データの追加をクリック
65. フォームの作成 • データを追加する • 作成したテーブルをクリックする
66. フォームの作成 • データを追加する • こうなったら追加完了
67. フォームの作成 • ツリービューを開いてフォームを選択 • 画面で直接フォームの部品をクリックしてもいい ここをクリック してもいい
68. フォームの作成 • フォームのプロパティを開く • データソースでテーブルを選択
69. こうなったらOK
70. フォームの作成 • フォームのプロパティを開く • フィールドの編集をクリック
71. フォームの作成 • 不要な項目を削除する • 作成日の三点リーダをクリック • 削除をクリック • 同様にSupportDeskIDも削除する
72. フォームの作成 • フィールドの追加を行う • タイトル • メール • 詳細 • 質問者 にチェックを入れる • チェック後追加ボタンクリック
73. フォームの作成 • 項目の並び替えを行う
74. フォームの作成 • この順番になっていたらOK • ×でフィールドを閉じる
75. フォームの作成 • 列を2に変更する • 既定モードを新規に変更する
76. フォームの作成 • タイトルをクリック • カードを一番右まで拡張する
77. フォームの作成 • こうなればOK
78. フォームの作成 • 同じように詳細のカードも拡張する
79. フォームの作成 • ＋（挿入）をクリック • アイコンの中の「送信」をクリック（結構下のほうにある）
80. フォームの作成 以下の通りに設定する • タイトルの一番左端に配置 • サイズ：幅と高さが80 • パディング：すべて5 • 色：白
81. フォームの作成 詳細設定を開いて以下の通りに設定する • OnSelect：SubmitForm(Form1); • Submitform：フォーム送信用関数 • アイコンクリックで入力データを送信する（データをテーブルに登録する）
82. フォームの作成 • ツリービューからフォームを選択
83. フォームの作成 • フォームの詳細設定を開いて以下の通り設定する • OnSuccess： • ResetForm(Form1);NewForm(Form1); ※OnSuccess：フォームの送信に成功したときの処理 ※ResetForm：フォームの入力値を初期化する関数 ※NewForm：新しいフォームを開く関数 ※複数の関数を使う場合はセミコロンで区切る ※入力する際は、Shift+Enterで改行できる
84. ここで一度保存しておく • ファイルを選択
85. ここで一度保存しておく • 名前を付けて保存
86. ここで一度保存しておく • 開発画面に戻る
87. フォームに項目追加 • ユーザに入力させたい項目は追加できた • あとはテーブルの必須項目を隠し項目として画面に埋め込む • ツリービューからフォームを選択する
88. フォームに項目追加 • フォームのプロパティで以下を設定する • フィールドの編集からフィールドを追加する • ステータス • ステータスが2つあるので注意 • スキーマ名がsupportstatusのほうを選択 • マウスオーバーでスキーマ名を確認できる • 登録日 • 選択後追加ボタンをクリック マウスオーバーでス キーマ名を確認
89. フォームに項目追加 • こうなればOK エラーが出ても今 は無視してOK
90. フォームに項目追加 • ステータスのカードを選択してロックを解除する
91. フォームに項目追加 • Defaultの値を消す
92. フォームに項目追加 • カードの中のドロップダウンを選択する • DefaultSelectedItemsを入力 • Choices(SupportStatusList,"新規")
93. フォームに項目追加 • ステータスカードを選択する • 表示をオフにする
94. フォームに項目追加 • こうなればOK
95. フォームに項目追加 • 登録日のカードを選択 • 詳細設定でロックを解除する
96. フォームに項目追加 • 登録日のカードを選択 • 詳細設定でロックを解除する
97. フォームに項目追加 • Defaultに「Now()」をセットする • Now()：現在時刻をセットする関数
98. フォームに項目追加 • ステータス同様、カードを選択して表示をオフにする
99. フォームに項目追加 • こうなればOK
100. 実行してみる • 右上の実行ボタンをクリックする
101. 実行してみる • 適当に入力して送信
102. 実行してみる • 送信後エラーなく入力がクリアされれば問題なし
103. 実行してみる • 成功してる場合、作成したテーブルにデータが登録される
104. 保存して共有 • 送信ボタンの右にある×ボタンで実行停止する
105. 保存して共有 • ファイルを選択
106. 保存して共有 • 保存する
107. 保存して共有 • 公開ボタンをクリック
108. 保存して共有 • このバージョンを公開する • この環境は個人環境なので他者に共有はできないが、 本来であればこの画面を公開し、 ポータルやTeamsに埋め込んで使用することが可能
109. チケット作成画面はこれで完了 • 今回はPowerAppsの体験が目的なので、運用面はあまり考慮しない • 運用を考えた場合、質問者が使うものとサポート担当が使うものは分けてお くのがおすすめ • この辺は使うときにちゃんと設計からやること • このまま次の画面を作っていく
110. 補足：オブジェクトの名前について • フォームのOnSuccessでResetForm関数の引数にあるForm1は ツリービューで参照できる項目名とリンクしている
111. 補足：オブジェクトの名前について • オブジェクトの数が増えると管理が難しくなる • 適宜名前を変えるのがおすすめ • 名前を変更した場合、依存関係のある所は自動で置換してくれる 名前変更 自動置換
112. 一覧画面の作成
113. チケット作成画面のスクリーン名変更 • ツリービューからScreen1の名前を変更 • 変更後の名前：ScreenCreateTicket
114. 新しい画面を追加 • 画面左上の新しい画面をクリック • 空の画面を選択
115. 新しい画面を追加 • ツリービューからスクリーン名は変える • 変更後の名前：ScreenTicketLists
116. 画面タイトルの作成 • 左のメニューの「＋(挿入)」をクリック • 四角形をクリック
117. 画面タイトルの作成 • 大きさを調整する • 幅は画面いっぱい、高さは80
118. 画面タイトルの作成 • ＋マークをクリック • テキストラベルをクリック
119. 画面タイトルの作成 【以下の通りに設定】 ラベルの大きさ：青い四角形に合わせる プロパティは以下の通り ・テキスト：チケット一覧 ・フォントサイズ：20 ・フォントの太さ：太字 ・文字色：白
120. リストの作成 • 左のメニューの「＋(挿入)」をクリック • 垂直ギャラリーをクリック
121. リストの作成 • プロパティの設定 下記のようにプロパティを設定する データソース：SUPPORT_DESK レイアウト：タイトルとサブタイトル 罫線：1
122. リストの作成 • プロパティの設定 フィールドの編集から サブタイトルにタイトルをセット タイトルはSupportDeskIDのままでよい
123. リストの作成 • 詳細設定の設定 幅を画面の40%にする ⇒レスポンシブルっぽくする App.Width*0.4 App.Width：アプリの画面の幅
124. リストの名前の変更 • ツリービューから垂直ギャラリーを選択し名前を変更する • 変更後の名前：GalleryTicketList
125. フォームの作成 • ＋(挿入)から編集フォームクリックする
126. フォームの作成 • 左下余白全体に広げる
127. フォームの作成 プロパティを以下の通り設定する • データソース：SUPPORT_DESK • 列：2 • 既定モード：編集 • 罫線：1
128. フォームの作成 フィールドの編集で作成日を消す
129. フォームの作成 フィールドを追加する • ステータス • タイトル • メール • 回答 • 回答者 • 詳細 • 質問者 • 入力後追加ボタンクリック
130. フォームの作成 順番を入れ替えてこのようになっていればOK
131. フォームの作成 画面はこうなっていればOK
132. フォームの作成 ツリービューからフォームを選択 • 詳細設定のItemに下記をセット • GalleryTicketList.Selected ※左のリストで選択したものを表示
133. フォームの作成 フォームのステータスカードを選択しロックを解除
134. フォームの作成 • Defaultに下記をセット • ThisItem.'ステータス (cr1db_supportstatus)‘ ※cr1dcの部分は環境で違う
135. フォームの作成 • ＋(挿入)からボタンを追加
136. フォームの作成 • 追加したボタンは適当にこの辺に移動させる
137. フォームの作成 • ボタンの表示を「更新」に変更する
138. フォームの作成 • フォームの名前を変更する • 変更後の名前：FormTicketDetail
139. フォームの作成 • ボタンのOnSelectに下記を設定 • OnSelect： SubmitForm(FormTicketDetail);
140. 保存する • 画面左上のファイルを選択
141. 保存する • 画面左上のファイルを選択
142. 保存する • 保存する
143. 保存する • 開発画面に戻る
144. 実行してみる • 画面右上のプレビューボタンクリック
145. 実行してみる • 左の一覧を選ぶと右のフォーム内容が変わる • フォームに追記して更新ボタンでデータを更新を実行
146. 補足：うまくデータがフォームに反映されない場合 • フォームの既定モードを変更する • 一度新規に変更 • その後編集に変更 ※設定ミスがない場合 これで解消するはず
147. 画面遷移を追加する
148. 一覧画面からチケット作成画面への画面遷移の追加 • ＋（挿入）からアイコンの中の「＋追加」をクリック
149. 一覧画面からチケット作成画面への画面遷移の追加 • 画面の右上に配置 • プロパティを以下の通り設定する • サイズ：幅80、高さ80 • パディング：すべて5 • 色：白
150. 一覧画面からチケット作成画面への画面遷移の追加 • 詳細設定でOnselectを設定する • OnSelect：Navigate(ScreenCreateTicket,ScreenTransition.Cover); • Navigate：画面遷移の関数 • スクリーン名：ScreenCreateTicket • 切り替えモーション：ScreenTransition.Cover
151. チケット作成画面から一覧画面への画面遷移の追加 • このままだとチケット作成画面から戻れないので画面遷移を追加 • ツリービューからチケット作成画面を開く
152. チケット作成画面から一覧画面への画面遷移の追加 • タイトルのラベル領域を変更する • 右に少し狭める • 空いたスペースにアイコンを追加する（次のスライド）
153. チケット作成画面から一覧画面への画面遷移の追加 • ＋(挿入)からアイコンの戻る矢印をクリック • アイコンの中の一番下のほうにある
154. チケット作成画面から一覧画面への画面遷移の追加 • 画面左上に配置する • プロパティを設定する プロパティの設定は以下の通り ・サイズ：幅80高さ80 ・パディング：すべて5 ・色：白
155. チケット作成画面から一覧画面への画面遷移の追加 • アイコンのOnselectを設定する • OnSelect：Back(ScreenTransition.Cover); • Back：呼び出しもどの画面に戻る関数 • 切り替えモーション：ScreenTransition.Cover
156. チケット作成画面から一覧画面への画面遷移の追加 • タイトル領域の余白を調整する • タイトルラベルの左端をアイコンの右端に合わせる
157. 保存する • 画面左上のファイルを選択
158. 保存する • 保存する
159. 保存する • 開発画面に戻る
160. 実行してみる • 一覧画面を開いてプレビュー
161. 実行してみる（デモ)
162. これで完成 • これでハンズオン終了です。お疲れさまでした。 • あとはいろいろ好きに試してみてください • スクリーンを複製すると元のソースは保持できるのでお勧め
163. 【おまけ】 PowerAutomateで Teamsに通知する
164. フローを追加する • PowerAutomateを開く • フローを新規作成する
165. フローを追加する • 一から作成
166. フローを追加する • 開始する
167. フローを追加する • 新しいステップをクリック
168. フローを追加する • 検索ボックスに「変数」と入力 • 変数を選択
169. フローを追加する • 変数を初期化する
170. フローを追加する • 名前：UserName • 種類：文字列
171. フローを追加する • 名前：UserName • 種類：文字列
172. フローを追加する • こうなったらOK
173. フローを追加する • 新しいステップをクリック
174. フローを追加する • 検索ボックスに「Teams」と入力 • Teamsを選択
175. フローを追加する • チャットまたはチャンネルでメッセージを投稿するを選択
176. フローを追加する • 投稿者：フローボット • 投稿先：チャンネル
177. フローを追加する • チーム：KISR4新人研修（全体） • チャンネル：20220527_PoerApps投稿先：チャンネル
178. フローを追加する • メッセージ：チケットが作成されたよ by [変数：UserName] ここまでは普通に 入力 最後はこれを選ぶ
179. フローを追加する • こうなればOK
180. フローを追加する • 名前を変える ⇒ 「チャットに投稿」
181. フローを追加する • 画面右上の保存をクリック
182. フローを追加する • PowerAppsにフローが追加された
183. 送信ボタンに処理追加 • 送信のOnselectのSubmitFormの後に関数追加 • チャットに投稿.Run(FormCreateTicket.LastSubmit.質問者) • チャットに投稿.Run()：作成したフローを実行する関数 • 引数にサブミットしたときの質問者をセット • FormCreateTicket.LastSubmit • 最後にサブミットしたときの値を取得できる
184. 実行する • チケット作成後Teamsにメッセージが投稿される
185. リファレンス • 公式ドキュメント • https://docs.microsoft.com/ja-jp/power-apps/ • MSLearn（PowerAppsの学習サイト) • https://docs.microsoft.com/ja-jp/learn/browse/?products=power- apps&expanded=power-platform • PowerAppsの学習用動画 • https://www.youtube.com/playlist?list=PL1RqQ3kddIpa0plPbFZ2ExF -hCnazx-Rd
186. END