モダンコントロール テーブル 動的なレイアウトサンプル（OnSelectも付いた！）

はじめに

モダンコントロールがどんどん進化して、テーブルコントロールにも待望のOnSelectが付きました！（2024年3月）
その他、すでにDataverse以外のデータソースへ対応、ヘッダーやデータのフォント、カラー調整など各種出来るようになりました。かなり整いましたね！
今回はテーブルコントロールを使った、動的なレイアウト調整（カードタイプ、レコードタイプ切替）やOnSelectを使ったサンプル実装を軽めにしてみたのでご紹介します。

TIPS2024年3月時点：バージョン:3.24024.12 で確認した内容です。
今後のアップデートで変更となる可能性がありますので、ご容赦ください。

公式ブログのアップデート情報

公式のモダンコントロールの更新情報のブログです。こちらも併せてご参考ください。
February 2024 updates for modernization and theming in Power Apps | Microsoft Power Apps

サンプル動画

YouTubeに挙げた動画です。サンプルでは3つの表示切替え、範囲選択してテキストコピー、クリックしてOnSelectでフォーム表示に切り替え、最後にモバイルでも一応対応しています。という動画です。

モダンコントロールとモダンテーマをオンにする

新規作成時は以下の機能をオンにすることでモダンコントロールおよびモダンテーマが使用できるようになります。
設定＞近日公開の機能 ＞ モダンコントロールとモダンテーマ　（既定でオフなのでオンにする）
詳細は以下記事に記載していますので、必要に応じてご確認ください。

動的なレイアウト切替え

テンプレートを使って、左にテーブル、右にフォームを出しているレイアウトです。
関係ないですが、上部にモダンヘッダーを付けていて、その横に表示切替のボタンを追加しています。

簡単にはボタンの切り替えで「ギャラリー」、「フォーム」、「センター」を切り替えて、左右の比率や表示非表示を切り替えることで動的な幅調整＆テーブルが縮まるとカードタイプになるようにしています（自動でそうなる）

TIPSテーブルはプロパティにリフローがありオンにしておけば幅に応じてカードタイプに自動で切り替わります。
モバイル表示の場合は基本このカードタイプになりますね。

ギャラリー：テーブルのみ表示

フォーム：フォームメインとしテーブルは狭くしてカード表示（自動）

センター：テーブルとフォームを半分半分（テーブルはレコード表示形式）

レスポンシブレイアウトの動的な調整

上記ですが、以前記事にした左がギャラリーで右がフォームの場合に実装したサンプルと同様です。
こちらについては以下記事ご参考ください。同じようなことをやっています。
今回の方がギャラリー→テーブルになっていてその部分の調整がほぼないので楽ですね。

実装概要

以下ざっくりとですが、動的に幅切替え（または非表示）の部分の実装を紹介します。

切替えボタン

ヘッダーの右側にボタンを追加（モダンにしてみた）
OnSelectがポイントでShowModeと変数を順次切り替えています。
以下の定義としてます。
ShowModeが1 →ギャラリーのみ表示、2 →フォームメイン、3はセンター（半々）

テキストはShowModeに合わせて変更、背景色（基本のパレット色）も同様に切り替えてます。

左コンテナーの調整（テーブルエリア）

左コンテナーには普通にテーブルを入れています。

コンテナーの調整はFillPortionsプロパティです。これを変数に応じて数値を調整しています。
ギャラリーモードの場合は12、フォームモードの場合は３，センターは６

併せてVisibleプロパティは、スマホの場合かつ、フォームモードの場合に非表示にしています。

右コンテナーの調整（フォームエリア）

右側には普通にフォームを入れています。

コンテナーの調整はFillPortionsプロパティですが、ここを12から左コンテナーの数値を引いたものにしています。
左が12なら０，３なら９、６なら６ですね。

併せてVisibleプロパティはShowModeが１（ギャラリー表示）の場合以外に表示にしています。
※FillPortionsを0 にしても非表示にはならず、最低幅で残ってしまいます。そのため非表示にしてます。

フォームの動的な調整（幅に合わせて広がる、縮む）など

この部分は、他の記事でも書いてあるように任意に配置を調整して、幅が狭くなっても収まるようにWitdhFitプロパティを活用して調整しています。
この辺りは、別の記事で書いてますので、この辺をご参考ください。

これでボタンで表示を切り替えれる画面が出来ました。ここまではOnSelect使わなくても出来ます。

OnSelectの処理

元々テーブルのSelectedをフォームのItemにしておけば選択したレコードの表示は出来てました。
が、同じ画面上での表示ならこれで出来ますが、フォーム用の別画面へ遷移したりモーダルで表示したかったりすることは出来ませんでした。

OnSelectが使えるようになると、選択したタイミングで何かしらの処理を行えるようになります。
選択したレコードを変数に格納して別画面に表示したり、ダイアログを出したり、コレクションに追加したり、アラート出したりなど、従来ギャラリーの場合にやっていた様々な処理が出来るようになりました。
これでテーブルを利用したアプリレイアウトの幅が広がったと思います。

サンプルでの使い方

サンプルでは大したことやってません💦
とりあえず、選択したレコードを変数に格納してその変数をフォームに表示としています。
また、ギャラリー表示の場合にはShowModeをフォームモードに切り替えて、フォーム表示するようにしています。
また、サンプルとしてNotifyを出しています。

Code//テーブルコントロールのOnSelectプロパティ実装内容
If(!IsBlank(Table1.Selected),
UpdateContext({currentItem:Table1.Selected});
If(ShowMode=1,
    Set(ShowMode,2);
    Notify(“レコードが選択されたのでフォームモードへ変更しましたよ！”,NotificationType.Success);
)
);

テーブルのOnSelectの注意点！

OnSelectですが、ちょっと想定と違った挙動がありました。その点と対応策です。

初回に勝手にOnSelectされる。並び替え変更してもOnSelectされる

上記で、気になった方いるかもしれませんが、最初に「If(!IsBlank(Table1.Selected)」として、選択されているレコードがあるかを判定しています。
これは普通にOnSelectでアクションを書くと、公開して最初に表示された際に勝手に動いてしまったためです。。
さらに、列の昇順/降順を切り替えた際も動いてしまいました。。
そのため、選択中のレコードがあるかを判定したうえでアクションを実装しています。
とりあえずこうしておけば想定外の動作はしないかと思います。

NOTEひとまず、現状はテーブルのOnSelectはレコードの選択時のみではないみたい。。？
想定通りなのか一時的な不備なのかは不明です。要注意ですね！

サンプルではレコードクリック時にフォームモードに変更してついでにNotify出してます。

thisItemは使えないのでTable名.Selectedを使う（データテーブルと同じ）

これは以前のデータテーブルコントロールと同じですね。ギャラリーでのThisItemはないんですが、
テーブル名.Selectedで選択中のレコードが取れますのでまあおんなじです。そのように実装しましょう。

その他テーブルの注意点

その他今回のサンプルで確認したちょっとなーの点です。

TIPS今回サンプルでテーブル（ギャラリー）のみと半々のサンプルにしましたが、列幅が狭くなる事象があったので、半々の表示切替えは入れずに、ギャラリーモードとフォームモードのみにすれば、以下の点気にしなくていいのでそっちの方がよいかもですね。

テーブルの列幅固定の設定はない。初期幅は自動調整されるが、狭いと狭い。。

今回初期の表示でテーブルのみ表示にしていますが、センター表示にした場合以下のようになりました。。
初期の幅が今の幅に応じて自動調整されるようで、最初のエリアが狭い（カードにならないレベルで）、
項目も多いと以下のようにほぼ最小化されている状態。。
従来のデータテーブルコントロールの場合は、幅指定OR自動調整の設定があったんですが、モダンのテーブルコントロールにはいまのところありません。
そのため、項目を多数表示したい場合、幅は大き目に取って表示する必要があります。

※以下半々のサイズで初期表示した場合に項目が多くて全部縮んでいる様子。。

一度列幅を手動で調整すると以降覚えてくれているが

上記について、最初ギャラリー表示にしていて、そのままセンター（半々表示）にした場合も同じく縮んでしまいました。
ただ、ギャラリー表示の時点で一度列幅を手動で伸ばしたりするとそれを覚えてくれていて、その後は幅を動的に変えても最初に調整したサイズのままでいてくれました。

最初にギャラリー表示の際にメールアドレス列を伸ばした

そうすると変更しても調整されたことを覚えてくれていて幅設定が残ってくれている。

NOTEこの辺、仕様でそのまま変わらないのかもしれませんね。。列の最低幅のプロパティなどが増えてくれればありがたいんですが。。今のところは手動で幅調整してデフォルトから変化があったことを覚えさせるくらいしか手がみつかりませんでした。

複数選択肢の列は表示されなかった

今回のデータではSPOの複数選択肢列を使っていますが、この部分はテーブルに表示されませんでした。
以下でスキル（言語）などは複数選択肢で値は入っているが、テーブル上は空欄だった。

NOTE将来的に対応されるのかは不明ですが、現時点では使えないので、この部分は詳細画面で表示するということになりますね。

モバイルへの対応もしています

今回とりあえずモバイルでも近い感じで出来るように調整しています。（ほんとうはもっと考慮必要ですが）
モバイルの場合はテーブルはカード表示固定、センターにすると上下分割、フォームはフォームのみ表示という感じです。

おわりに

ということでモダンなテーブルコントロールのサンプルの記事でした。
OnSelectが追加されたことで出来る幅が広がったと思います。記載した注意点（初期表示、昇順切替えなどで動く）もあるので調整して実装しましょう。

また、複数選択肢は表示されなかったり、テーブルの列幅自動調整（多くて狭いと狭すぎる）などの点もあったので、その辺も考慮した実装をしていただく感じかと思います。（将来的にそのあたりも調整されれば最高ですが）

ということで、将来のさらなるアップデートに期待しつつ、現状でもかなりいい感じに使えるようになったという記事でした！それでは！

関連記事

モダンコントロール関連記事：

ギャラリーでの動的レイアウト記事：

データテーブルコントロールの記事：