自動生成 レスポンシブアプリのカスタマイズ ④ タイトル部とギャラリーデフォルトの調整

はじめに

今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能な
レスポンシブな自動生成アプリが作成できるようになっています。
その①では上記のおさらいも含め新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法をご紹介。
その②ではSharePointリストからレスポンシブ対応の自動生成アプリを作成し、レイアウトやページ構成などの概要部分をご紹介。
その③ではギャラリーの基本的な調整とカスタマイズのサンプルをご紹介しました。

その④では初期状態でちょっと怪しい部分を調整するサンプルです。

自動生成アプリの作成は前回記事をご参考ください。作成後の修正点について以降記載していきます。

TIPS※日本環境 2023/11/20 時点のバージョン:3.23105.18の内容で記載しています

NOTE自動生成されるアプリの内容は6月にQiitaに記載した状態から基本変わっていませんでした。
一部はリライト的な内容にもなりますがご容赦ください。

サンプルSharePointリストの構成

カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。
今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。

自動生成 レスポンシブアプリのカスタマイズ ② 自動生成アプリ概要 | Power Apps Tips ログ (youseibubu.com)

フォーム上部のタイトル部が怪しい点の調整

自動生成アプリでサクッと作ってくれるのが素敵なんですが、その③で対応したギャラリーの委任警告が出る点(SPOリストの場合、Dataverseなら出ない)点と合わせて、フォーム上部のタイトル部がちょっと怪しいです。
以下の部分ですね。

選択中のアイテムのタイトルが上部に出るようになっています。選択時は問題ないですね。
ただ以下のように「新規追加」をクリックした際にもギャラリーで選択したアイテムのタイトルが残ってしまってます。おかしいですよね。

+新規で新規アイテムを追加する場合。ギャラりーで選択していたアイテムのタイトルが残ってしまっている

以下シンプルな調整案を2つご紹介します。

新規の場合は空または固定値にする

この自動生成アプリでは変数で新規、編集時の調整を行っているため、newModeという変数があります。
これを使ってIf文で切り替えれます。

・新規の場合は空にする例

CodeIf(newMode,Blank(),RecordsGallery1.Selected.タイトル)

・新規の場合は固定値にする例

CodeIf(newMode,“新規アイテム”,RecordsGallery1.Selected.タイトル)

フォームのタイトルを参照する

当初上記対応でいいかと思いましたが、以下の方が楽だし、タイトルを入力したらそのまま反映されるので
こっちの対応の方がいいかもですね。

CodeDataCardValue1.Text

フォームのタイトルに値を入れると上部にも反映される。選択時にも選択したアイテムの値が出る
※そもそもこの部分はタイトルのみ分かりやすく出している実装なのでタイトルを参照させればいい

ギャラリーのDefaultの挙動を変更する(気に入らない場合は)

次にギャラリーですが、Default値には以下の変数が入っています。
変数「CurrentItem

これはその②でもご紹介していますが、選択中のアイテムレコードを変数に入れていて、ギャラリーのDefaultなどに設定されています。

ギャラリーのOnSelectなどで今のレコードを変数に格納している

通常はギャラリーを追加してもDefault値はブランクですが、自動生成アプリではこのように設定がされています。

この場合の挙動ですが、選択したアイテムが一番上に来ます(下に余裕がある場合)
以下の画面で最初の状態から3つ目のコーヒーを選択したら一番上に来ます。→ここが個人的にはあまり好きじゃない
下が見えている部分であればそのまま選択されます。

好きじゃない場合は場合はDefault値をブランクにする

個人的にはあまり好きじゃない動きなので、以下のようにDefault値を空にすれば従来どおりの動作になります。
※途中のアイテムを選択しても一番上には来ずそのままの位置にいる

ただ自動生成アプリはこの変数を使う実装になっているので、以下の点で違いが出てきます。

Default値を空にした場合のその他の挙動の違い

上記のように空にすると元々の実装と以下の点が変わってきます。

・新規追加した場合に従来は追加したレコードが選択される状態となっていたがならなくなる。
→新規作成時にも変数にCurrentItemを設定しているので、自動で追加アイテムが選択される実装となっている
これがなくなり、普通にギャラリーの最初のやつが選択されるように変わります。

・削除した際に選択されているアイテムがなくなる
→削除時にはCurrentItemにデータソースの最初のレコードを設定している実装となっているため
以下のように削除クリック後には表示するアイテムがありませんとなります。(他レコードを選択すれば解消)

削除ダイアログのOnSelect実装内容

上記については、同じような効果を与えるため、ギャラリーをリセットすれば解消できました。

Code//元の処理にギャラリーのリセットを追加
Reset(RecordsGallery1);

・以下の記事で紹介しているようなURLパラメータからの自動表示に対応しなくなる
この記事で紹介しているアイテムIDをパラメータにギャラリーのDefault値を指定している実装が効かなくなります。
やりたい場合はDefault値の実装はこのまま残しておいた方が良いかと思います。

おわりに

今回は自動生成アプリのちょっとおかしい、好きじゃない点の調整のサンプルでした。
今回もシンプルな内容なのでちゃちゃっと調整出来る内容かと思います。
同じように気になる、気に入らない場合はご参考にしていただき調整ください。

次回は、フォーム部分がスマホレイアウトだと横がはみ出してしまう点の調整方法についてご紹介予定です。
それでは。

関連記事

自動生成関連:

レスポンシブ関連:

数式リファレンス:

この記事は役に立ちましたか?

もし参考になりましたら、下記のボタンで教えてください。

ヨウセイ

ヨウセイ

一般職からSharePoint、C#、.NET系技術者へ、そこからPower App、Power Automate技術者へと転身。 ワンランク上のおっさんはPower Appsでシステム開発が出来る〜! qiitaや自社HPでも技術ブログを書いていました。

関連記事

コメント

この記事へのコメントはありません。

CONTENTS