はじめに
今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能な
レスポンシブな自動生成アプリが作成できるようになっています。
当時Qiitaにその際のざっと見た概要や修正点などを載せておりました。
はじめにこんにちは。ヨウセイです。今回はPower Appsの新しいトップ画面（現在プレビュー）上で、キャンバスアプリのPC/タブレット用レイアウトでのデータからのアプリ自動生成が出来るようにな…
その①では上記のおさらいも含め新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法をご紹介しました。
その②ではSharePointリストからレスポンシブ対応の自動生成アプリを作成し、レイアウトやページ構成などの概要部分をご紹介しようと思います。
TIPS※日本環境 2023/11/07 時点のバージョン：3.23104.17の内容で記載しています
NOTE自動生成されるアプリの内容は6月にQiitaに記載した状態から基本変わっていませんでした。
一部はリライト的な内容にもなりますがご容赦ください。
レスポンシブ対応の自動生成アプリの作成の流れ
レスポンシブ対応の自動生成アプリの作成の流れについては、前回記事をご参考ください。
以降ではSharePointリストを指定して作成したアプリについてご紹介していきます。
自動生成 レスポンシブアプリのカスタマイズ ① アプリ作成の流れ
本記事から数回にわたって自動生成レスポンシブアプリの簡単なカスタマイズサンプルなどをご紹介予定です。 その①では上記のおさらいも含め新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法をご紹介していきます。...
SharePointリストの構成
以降で利用するSharePointリストの構成です。
サンプルのリストなのでご自身のリストに置き換えていただいて問題ありませんが、今後記載する列の操作などはこの定義にそって書いていますので、適宜読み替えて調整いただければと思います。
TIPSその⑧まで書いて、あれ？サンプルのリスト構成載せてないな？と思い出し追記しました。すいません。
（2024/1月追記）
- タイトル（1行テキスト）
- カテゴリ（選択肢：飲み物、食べ物、その他とか）
- SoldOut（はい/いいえ）
- Detail（1行テキスト）
- Price（通貨）
- Picture（画像）
- 削除フラグ（1行テキスト）
- お気に入り（はい/いいえ）
※削除フラグは論理削除用に用意（データ自体は消さないけど表示しないなどを制御用）
※削除フラグは通常はい/いいえ（真偽値）の列だが、SPOの時にフィルター時にうまくいかない場合があるのでテキスト列で１を入れたりしている
自動生成アプリのレイアウト
以下SPOリストから自動生成されるアプリのサンプルです。
手を入れずにそのままプレビューで確認しています。
TIPSSharePointリストをベースに作成していますが、Dataverseテーブルの場合も同じ構成です。
※エクセル、SQLは未検証です。
ブラウザ版レイアウト（閲覧モード）
ブラウザ版レイアウト（編集モード）
編集（えんぴつ）アイコンをクリックするとフォームが編集モードに切り替わります。
チェックアイコンクリックでSubmit（新規追加OR更新）、×アイコンで閲覧モードに切り替わります。
レスポンシブ対応
レスポンシブなので、ブラウザの幅や高さを縮めるとそれに応じた範囲の表示に調整されます。
フォームは2列に収まらない場合は1列レイアウトになります。
タブレット版レイアウト
タブレットレイアウトの場合もブラウザ版同様です。
レスポンシブなのでフォームが2列に収まらない場合は1列に調整されます。
モバイル版レイアウト
プレビューでモバイルレイアウトで確認した結果です。何もしない状態でレスポンシブ対応してくれています。
モバイルの幅の場合は、一覧（ギャラリー）のみ表示、選択OR新規で詳細・編集画面に切り替わって表示されます。
実際のスマホのサイズにもよると思いますが、フォーム部分は初期のままだと少し横幅が収まっていないですね。
NOTEこの部分の調整方法は次回記事に投稿予定です。
削除確認画面
削除アイコンをクリックした場合です。削除確認画面が表示されます。
自動生成アプリの構成概要
生成されたアプリの構成概要です。
SharePointリストから作成していますが、Dataverseテーブルから作成した場合も同じ構成です。
全体の作りは１ページで水平コンテナー、垂直コンテナーで区切られていて、
ヘッダー部、左に検索とギャラリー、
右に操作アイコン（編集、削除、更新）、フォーム（閲覧、新規、編集切り替え）、
削除確認用画面（削除クリック時に表示）の構成です。
TIPS現時点ではCopilotが自動生成してくれるアプリと同様だと思います。
（現時点日本環境へはまだ来ていない）
テーマはソフトブルーとなっています。変更も可能です。
レスポンシブ対応のレイアウトなので表示設定は以下となっています。
画面に合わせて倍率を変更がオフ（従来のアプリの場合は既定でオン）
ギャラリー部
ギャラリー部は上部に検索用エリア、新規追加アイコンがあり、ギャラリーがあります。
ギャラリーは画像列がある場合は画像ありのレイアウトで作られるようです。無い場合はなしのレイアウトで作成されました。
TIPSそういえばこの自動生成アプリが出てきたころ（6月頃）あたりからギャラリーが従来よりおしゃれになりましたね。サイズも小さくなり、中身の構成（選択時のデザインなど）が変わりました。
※画像列なしのリストの場合は以下のように画像なしレイアウトで作成された。
検索コントロールとギャラリーのItems
ギャラリーのItemsは以下のように検索コントロールの値でSearchされています。
NOTEこの部分はSharePointリストだと委任対象外の関数のため警告になっています。
次回記事で対処方法記載予定です。
新規追加アイコン
新規追加アイコンではフォームを新規モード変数（newMode）をtrueにしています。
これとフォームのDefaultModeでフォームモードの変更をしているようです（NewFormのみでよい気もするが）
ギャラリーのOnSelect
ギャラリーのOnSelectはアイテム選択変数をTrue、CurrentItem変数に選択したレコードを指定しています。
→CurrentItemはギャラリーのDefaultやSubmit完了時に指定、削除時に参照されている。
フォーム部
フォームは閲覧、新規、編集を1フォームでまかなっています。
各アイコンクリック時に変数を切り替え、それに合わせてフォームモード（DefaultMode）を切り替えています。
Modeを切り替えるのは、NewForm()、EditForm()、ViewForm()を使うケースが多いイメージですが、自動生成アプリでは変数でDefaultModeを切り替えているようです。※Newの時はNewForm()使っているけど
フォーム上部操作エリア
フォーム上部は操作エリアとなっています。また選択中のアイテムのタイトルが表示されます。
NOTEここも実装がちょっとおかしいなと思うので次回記事で調整をご紹介します。
編集（えんぴつ）アイコンでフォームを編集モードに、
削除アイコンは削除ダイアログを表示する処理というイメージです。
編集アイコンクリック後は以下に切り替わり、チェックアイコンでSubmitForm（新規追加または更新）、×アイコンでキャンセルして閲覧に戻すというイメージです。
フォーム更新完了時
SubmitForm完了後、成功時（OnSuccess）では、更新したアイテムをCurrentItemへ設定しています。
→ギャラリーのDefaultなので追加または更新したアイテムが選択された状態となる。
失敗時（OnFailure）ではNotifyを出すイメージです。
削除確認画面
削除アイコンをクリックすると削除確認用画面が表示されます。
削除ボタンクリックは以下のようになっていて、選択中のレコードを削除、
エラーがなければCurrentItem（ギャラリーDefault値）を最初のレコードに、その他モード調整用変数を初期化しているようなイメージです。
画面表示切替え部分の概要
レスポンシブに画面表示を切り替えている部分は以下の３つコンテナーのVisibleプロパティです。
この部分を変数やアプリのサイズなどで表示、非表示を切り替えています。
ギャラリー部はアプリのサイズがSmall（スマホサイズ）の場合、かつ、
モードが新規、編集、アイテム選択ありの場合は非表示となってます。
→スマホレイアウトだと通常時はギャラリー表示、アイテム選択したりするとフォーム表示となるイメージ
フォーム部は削除モード時、またはアプリサイズがSmall、かつ、レコードが未選択の場合に非表示にしているイメージです。
削除確認画面は削除アイコンクリック時に削除モード変数をTrueにして表示、削除・キャンセルボタンクリックで解除しているイメージです。
おわりに
今回はレスポンシブ対応の自動生成アプリのレイアウトや構成概要をご紹介しました。
実装についてはざっくりの内容を記載しているので、詳細についてはご自身で作成いただき確認いただくのが良いかと思います。
この自動生成アプリですが、データソース選択するだけで、レスポンシブにまで対応しているアプリを
一瞬で（30秒かからないと思う）作ってくれるというとんでもなく便利な機能です。
そのまま使わない場合でもレスポンシブ対応のアプリを作成する際の参考にもなります。
基本的なマスタ管理アプリなどであればちょっと調整するだけで完了するのではないかと。
個人的にはあやしい実装部分もちょこちょこあったので、次回その③でそのあたり調整するサンプルをご紹介予定です。
・SharePointリストでのSearch警告回避
・新規作成時に選択中アイテムのタイトルが残っている
・スマホレイアウトでフォームがはみ出る
・ギャラリーのDefault表示が気に入らない場合 など
また、そこから簡単にカスタマイズするサンプルなども今後ご紹介予定です。それでは。
関連記事
自動生成関連：
Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。
レスポンシブ関連：
Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント