ビリビリ20240523_Power Apps 同好会登壇大会1 FormのValidやUpdates、タブ切替えなどで機能的＆スマートな実装
1.6K Views
May 25, 24
スライド概要
キャンバスアプリTips FormのValidやUpdates、タブ切替えなどで機能的＆スマートな実装
関連スライド
各ページのテキスト
キャンバスアプリTips FormのValidやUpdates、 タブ切替えなどで機能的＆スマートな実装 奇想天外ビリビリ☆Power Apps同好会 ビリビリ☆Power Apps 同好会 登壇大会＃1 2024/5/23：ヨウセイ
自己紹介 Microsoft MVP for Business Applications Power Apps , Power Automate ヨウセイ 一般職からSharePoint、C＃系の技術者へ。そこからPower Platform技術者へ。 主にシステム開発や技術支援をやっています。得意分野は以下です。 Power Apps Power Automate キャンバスアプリ モデル駆動型アプリ Dataverse Power Pages Power Automate for desktop SharePoint
自己紹介 Microsoft認定: Power Platform Solution Architect Expert 他取得 EXAM：PL‐600、PL‐400、PL‐200、PL‐100、PL‐900 • BLOG：Power Apps Tips ログ (youseibubu.com) • YouTube：ヨウセイTube - Power Apps同好会 • X(旧Twitter）：https://twitter.com /youseibubu • Qiita：https://qiita.com /youseibubu • Docswell：https://www.docswell.com /user/yousei
アジェンタ ・フォームカードのプロパティ：Requied で下書き対応 • フォームのプロパティ： Validを使った入力チェック • フォームのプロパティ： Updates で確認画面を作る ※時間あれば • タブ一覧（tab list) で表示項目の切替え • タブ一覧のその他活用例のご紹介
フォームカードのプロパティ Requied で下書き対応 キャンバスアプリ 下書き・本番モードの実装サンプル（Required調 整） | Power Apps Tips ログ (youseibubu.com)
・フォームカードのプロパティ：Requied で下書き対応 Formの中のカードには Requiedプロパティがあり、 ここをTrue,Falseに調整す ることで必須、任意を調整 出来ます。 変数を用意して動的に調整 することが出来ます。 初期状態（なにもしていない場合）では データソースの設定に応じて調整されています
・フォームカードのプロパティ：Requied で下書き対応 調整例１：下書きモード 下書きステータスの場合は 任意で確定する場合は必須 とする。 調整例２：他の選択値に応 じて動的に必須にする ※プルダウンで「AAA」の 場合のみ必須とするなど
・フォームカードのプロパティ：Requied で下書き対応 • カードコントロールのRequiedプロパティは初期状態ではデータソースの値 に応じて設定されています（true/ false) • カードコントロール配下には「StarVisble」というコントロールがあり、 RequiedがTrueの場合に※マークが表示されるようになってます。 （以下は目立つように赤っぽく色変えているが普通は黒色）
・フォームカードのプロパティ：Requied で下書き対応 • フォームをSubmitFormすると、保存前にチェックしてくれて、 必須項目に値がない場合はアラートと対象項目のエラーメッセージが表示されます。 データソース側は任意項目の場合で も、アプリ上でRequiedプロパティ をTrueとして必須にする調整が可 能です
・フォームカードのプロパティ：Requied で下書き対応 データソース側は任意項目の場合でも、アプリ上でRequiedプロパティをTrueとして必 須にする調整が可能です。 ・変更には一旦プロパティのロックの解除をします。 （通常状態からカスタムする場合はこのロックを解除します。）
・フォームカードのプロパティ：Requied で下書き対応 ・調整例１：下書きモード・確定モードで必須項目を調整する 変数を用意してスイッチで変更するサンプル ・スイッチで変数を切り替える ・カードのRequiedプロパティに指定する Requiredプロパティ：!DecisionMode !で否定形にしているのでドラフトモードの場合は False →必須じゃない 確定モードの場合はTrue →必須になる
・フォームカードのプロパティ：Requied で下書き対応 ・調整例１：下書きモード・確定モードで必須項目を調整する 変数を用意してスイッチで変更するサンプル この状態でスイッチを下書き→確定と変更すると、以下のように必須に変わり、入力がない場合 はエラーとなります。 例ではスイッチですが、下書き保存ボタン、確定保存ボタ ンを用意してそこの処理にも書けます。 SubmitFormの前に上記の変数を切り替える処理を入れれ ば、下書きなら空でもOKで保存できる、確定なら未入力 となりエラーとする。という実装が出来ますね。
・フォームカードのプロパティ：Requied で下書き対応 ・調整例２：他の項目に応じて必須を調整するサンプル 以下では「区分」の選択値が “社員”の場合は「所属/部署」が必須となるように調整 併せて下書きモードの判定も加えている。
フォームのプロパティ Validを使った入力チェック キャンバスアプリ フォーム Valid プロパティで入力チェック！ | Power Apps Tips ログ (youseibubu.com)
・フォームのプロパティ：Validを使った入力チェック FormにはValidプロパティ があり、これがTrueか Falseで入力チェックが可 能です。 必須やデータソースの制御 （最大文字数など）に対し てすべて正常であればTrue、 それ以外はFalse このプロパティは編集フォームにのみ存在します 閲覧フォームの場合は表示のみなので更新関連の プロパティは存在しません。 Power Apps での 編集フォーム および 表示フォーム の コントロール - Power Apps | Microsoft Learn 公式より抜粋 ‘’フォーム コントロールのValidプロパティは、フォーム内のすべての カード コント ロールの Valid プロパティを集約します。 フォームのValidプロパティは、そのフォー ム内のすべてのカードのデータが有効である場合にのみ true です。それ以外の場合は、 フォームの有効プロパティは false です‘’
・フォームのプロパティ：Validを使った入力チェック フォームをSubmitFormをすると未入力がある場合にはデータは更新されず、対象項目にエ ラーが表示される動作となります。 基本的にはそのままで問題ないがValidプロパティを使って、事前にフォームの内容が問題な いかをチェックすることもできる。 実装例１：Validプロパティでボタ ンを非活性化 →完了しないと押せないようにする 実装例２：裏技！？でSubmitせず にSubmitでチェック →入力チェックのみを行う（正常で も保存はしない）
・フォームのプロパティ：Validを使った入力チェック 実装例１：Validプロパティで保存ボタンを非活性化 ・ボタンのDisplayModeに以下を設定する //更新ボタンのDisplayModeプロパティ If(Form名.Valid,DisplayMode.Edit,DisplayMode.Disabled) →必須未入力がある場合は非活性
・フォームのプロパティ：Validを使った入力チェック 実装例１：Validプロパティで保存ボタンを非活性化 必須未入力やデータソース不備がある場合は非活性 解消されると活性化されてクリック可能となる この例ではあえてメールアドレスの最大文字数を 本来の255から300にして検証
・フォームのプロパティ：Validを使った入力チェック 実装例１：Validプロパティで保存ボタンを非活性化 条件に応じて必須が変わる場合などにも対応できるので フォームの改修時にも漏れがなく便利！ 動的なRequiedプロパティの変更にももちろん対応します。 フォームを回収して必須項目が増えた場合などもこの部分 カスタム要素でのチェック（全角のみや指定日付範囲である は調整が不要なので、調整漏れの心配がありません。 ことなど）については対応しません。 →その場合はValid＋カスタムチェック実装を組み合わせる
・フォームのプロパティ：Validを使った入力チェック 実装例２：裏技！？でSubmitせずにSubmitでチェック Validプロパティで判定して、Falseの場合にのみSubmitFormを実行する！ →不備があるのでエラー表示を基本機能で表示してくれる。かつ保存はされない。 //入力チェックボタンに以下を実装 If(!Form1.Valid, SubmitForm(Form1) ;Notify(“未入力項目があります。”,NotificationType.Warning); , Notify(“未入力項目はありません。”,NotificationType.Success) ) ★ValidプロパティがFalse（未入力あり）の場合のみSubmitFormをあえて実行して エラー表示を出す。OKの場合は問題ないNotifyを表示するサンプル フォームを使用し、かつ、Patchで保存するケースの場合、 SubmitFormのような自動エラーチェックはしてくれません。その際にもこの技が使えます！ Patch時にSubmitFormと同じチェックをする参考記事 記事：【ワンランク上のPower Apps】 Tips – コピー機能の作り方 #PowerApps - Qiita
・フォームのプロパティ：Validを使った入力チェック 実装例２：裏技！？でSubmitせずにSubmitでチェック Validプロパティで判定して、Falseの場合にのみSubmitFormを実行する！ →不備があるのでエラー表示を基本機能で表示してくれる。かつ保存はされない。
フォームのプロパティ Updatesで確認画面を作る キャンバスアプリ フォーム Updatesプロパティ（確認用フォームを作 成） | Power Apps Tips ログ (youseibubu.com)
・フォームのプロパティ： Updatesで確認画面を作る FormにはUpdatesプロパ ティがあります。 フォーム編集後の最新デー タを保持しているので、こ れを使った最終確認画面を 作ることなどがサクッと出 来ます。 このプロパティは編集フォームにのみ存在します 閲覧フォームの場合は表示のみなので更新関連の プロパティは存在しません。 Power Apps での 編集フォーム および 表示フォーム の コントロール - Power Apps | Microsoft Learn これを使ってSubmitFormではなく、Patchで保存することも可能 ※エラーチェックやエラー通知はされないので調整必要なので、 通常はSubmitFormを使えばよい。
・フォームのプロパティ： Updatesで確認画面を作る Updatesプロパティの中身 ※ 以 下 サ ンプ ルでは日 本語列名 なので 内部名が エンコー ドされて てわか りずらい
・フォームのプロパティ： Updatesで確認画面を作る 最新のフォーム上の情報が取得できる フォーム上で編集した場合は編集後の値が取れる FormsのItemに指定したギャラリーのSelectedだったり、変数 に入れたレコード値だったりは指定した状態の値なので フォーム上での更新が反映されたりはしていません。 更新後の値を使う場合は、このフォームのUpdatesプロパティ や各コントロールの値を参照する必要があります。
・フォームのプロパティ： Updatesで確認画面を作る • Updatesプロパティを使って確認用フォームを作る！ 入力項目が多く、画面が分かれている場合など、最後に確認用の画面を作りたいケース →編集フォームのUpdatesを確認用フォームのItemに指定するだけ！
・フォームのプロパティ： Updatesで確認画面を作る • Updatesプロパティを使って確認用フォームを作る！ • サンプルではコンテナーを使ったモーダル画面としている （最終確認ボタンをクリック時に表示させる） • その中に閲覧用フォームを追加する • 閲覧用フォームのItemsプロパティに編集用フォームのUpdatesを指定する
・フォームのプロパティ： Updatesで確認画面を作る • Updatesプロパティを使って確認用フォームを作る！ →最新のフォーム情報が反映されるので、戻って編集した内容ももちろん反映される
・フォームのプロパティ： Updatesで確認画面を作る • Updatesプロパティのその他の使い方例 • コピー作成機能を実装する場合（ Patc h で内容を複製して新規作成） 参考：【ワンランク上の Power Ap p s】 Tip s – コピー機能の作り方 #Power Ap p s – Qiita
・フォームのプロパティ： Updatesで確認画面を作る • Updatesプロパティのその他の使い方例 • リストに対して複数フォームに分割していてそれらを Patc hで1レコードとして更新（特殊ケース） 参考：【ワンランク上の Power Ap p s 開発】人材スキル管理アプリを作成・運用・改修
タブ一覧（tab list) で 表示項目の切替え キャンバスアプリ フォーム タブリストで表示項目切替え | Power Apps Tips ログ (youseibubu.com)
・タブ一覧（tab list) で表示項目の切替え モダンコントロールのタブ一覧 を使って色々な事がスマートに 実装出来ます！ 実装例 ・メニュー作成 ・フォームの表示項目切替え ・フライアウトメニュー Power Apps のタブやタブ リストのモダン コン トロール - Power Apps | Microsoft Learn
・タブ一覧（tab list) で表示項目の切替え ・フォームの表示項目切替えサンプル サンプルでは以下の３つのカテゴリに分けている
・タブ一覧（tab list) で表示項目の切替え ・フォームの表示項目切替えサンプル サンプルではApp.Formulas に定義している ※直接タブリストのItemsに書いてもOK cTabList=[{id:1,value:”基本情報”},{id:2,value:”スキル・資格”},{id:3,value:”その他”}]; →タブリストのItemsに指定 [“基本情報”,”スキル・資格”,”その他”]などValueのみの配列でも可能だが、IDを持た せておくと、文言修正する際に参照している箇所を調整しなくてすむので便利です App.Formulasについては本日登壇いただくPPログさん より解説いただけるので、そちらをぜひご参考ください！
・タブ一覧（tab list) で表示項目の切替え ・フォームの表示項目切替えサンプル カードのVisib leプロパティに指定する //カードのVisbleプロパティ（idが１の基本情報で表示したい場合） TabList.Selected.id =1 →上記がTrueなら表示、それ以外ならFalseなので非表示となる スキル・資格の場合は＝2、 その他の場合は＝3にすればOK
・タブ一覧（tab list) で表示項目の切替え ・フォームの表示項目切替えサンプル →Ctrlキーを押しならが複数選択して一括して指定すれば楽です！！ Ctrlキーを押しながら対象とするカード を選択してプロパティを一括指定する
・タブ一覧（tab list) で表示項目の切替え ・フォームの表示項目切替えサンプル →1，2，3指定後に確認すればタブ切替え時に項目表示が切り替わってくれます レスポンシブ対応やスマホの場合は1列ずつの表示になり、 スクロールが多くなるので、セクションごとに表示分けする デザインは特に効果的だと思います。
タブ一覧のその他 活用例のご紹介 タブリスト | Power Apps Tips ログ (youseibubu.com)
・タブ一覧のその他活用例のご紹介 並び替えの対象列を切替えるサンプル 参考：自動生成 レスポンシブアプリのカスタマイズ ⑥ ソート（並び順）タブリス トで対象列切替え | Power Ap p s Tip s ログ (youseib ub u.c om)
・タブ一覧のその他活用例のご紹介 簡易ハンバーガーメニューを作る 参考：自動生成 レスポンシブアプリのカスタマイズ ⑦ タブリストで簡易ハンバーガー メニューを実装 | Power Ap p s Tip s ログ (youseib ub u.c om)
・タブ一覧のその他活用例のご紹介 ギャラリー内フライアウトメニューを作る 参考：自動生成 レスポンシブアプリのカスタマイズ ⑧ タブリストでギャラリー内フライアウ トメニュー | Power Ap p s Tip s ログ (youseib ub u.c om) 参考：モダンコントロール タブリストがかなりイケてる！（フライアウトメニューなど） | Power Ap p s Tip s ログ (youseib ub u.c om)
全体のまとめ ① フォームのカードプロパティRequiedで下書き・本番モードや 動的必須調整が出来ます。 ② フォームのValidで事前チェックなどに活用可能です。 ③ フォームのUpdatesで確認用画面や応用実装が可能です。 ④ タブリストは便利です！ 基本機能を活用してスマート＆機能的な実装を！
宣伝：JPPGB ゲームコンテスト＃１が開催されます！ 【JPPGB】ゲーム作成コンテスト #1 – connpass が開催されます！ヨウセイもエントリー中です！ →エントリーはまだ間に合います！現地参加、オンラインでのご参加もぜひ！
宣伝：JPPGB ゲームコンテスト＃１が開催されます！ 【JPPGB】ゲーム作成コンテスト #0 前回はパワスロを作って大賞・デザイン賞をいただきました！ 【JPPGB】ゲーム作成コンテスト #0の 作品が公開されました！ - コルネの進捗 や備忘録が記されたなにか (hatenablog.com) 【パワスロ】JPPGB ゲーム作成コンテ スト #0 パワスロで大賞ならびにデザイ ン賞をいただきました！ | Power Apps Tips ログ (youseibubu.com) 記事からアプリのダウンロード （GitHubから）もできます
全体のまとめ ① フォームのカードプロパティRequiedで下書き・本番モードや 動的必須調整が出来ます。 ② フォームのValidで事前チェックなどに活用可能です。 ③ フォームのUpdatesで確認用画面や応用実装が可能です。 ④ タブリストは便利です！ 基本機能を活用してスマート＆機能的な実装を！