はじめに
今回は永遠のプレビュー（笑）のデータテーブル(DataTable)コントロールに触れてみようと思います。
以下でも軽く触れていますが、一覧を作るのにギャラリーではなくデータテーブルも使えます。
横スクロール可能なギャラリーを作る （水平・垂直コンテナー）
はじめに 最近の投稿はコンテナー系多いなーと自分でも思っていますが、ついでに今回のサンプルも紹介しようと思います。業務アプリに一覧はつきものですが、ギャラリーっぽいのではなく、エクセルの様に横に並べて多くの列を表示させたいというケースがよくあるかと思います。シンプルな要件でデータテーブルで事...
機能面ではギャラリーに及ばない点が多いですが、シンプルな一覧を作るならよりサクッと出来ます。
またギャラリーにはない機能があったりもします。その他開発時の検証用に使うなども結構あるかと。
その辺を簡単なサンプルアプリでご紹介しようと思います。
TIPS★この記事を書いていたらタイムリーにモダンコントロールに新しいTableコントロールが追加されました！
※2023/9月上旬時点 バージョン3.23091.11以降で使えるように
現状は読み取り専用、データソースはDataverseOnlyとなっていて触った感じでもまだプレビュー状態という感じでした。OnSelectなどのプロパティもありません。SPOやコレクションでも使えたけど一部機能が有効でないなどあるのかもです。今後の更新に期待が高まります！
August 2023 updates for modernization and theming in Power Apps | Microsoft Power Apps
★24/3月更新 モダンコントロール テーブルの記事書きました！
モダンのテーブルコントロールにOnSelectも付いたので、動的レイアウトやOnSelect交えたサンプル実装の記事を書きました。こちらも併せてご参考ください。
モダンコントロール テーブル 動的なレイアウトサンプル（OnSelectも付いた！）
モダンテーブルコントロールにも待望のOnSelectが付きました！（2024年3月） 今回はテーブルコントロールを使った、動的なレイアウト調整（カードタイプ、レコードタイプ切替）やOnSelectを使ったサンプル実装を軽めにしてみたのでご紹介します。...
サンプル動画
データテーブルを使ったサンプルアプリです。フォームはモーダル表示しチェックボックスに応じて列の表示非表示を調整しています。
データテーブルの特徴
自分が思うギャラリーと比較した場合の違いや特徴をさらっと。
良い点（ギャラリー比較）
- テーブル一覧がサクッと作れる（基本はデータソースと列を選択のみ）
- 横スクロールに標準で対応している！
- ユーザー操作での幅調整が出来る！
- ホバー色変えが標準で出来る
- 列の動的な表示非表示が楽に出来る（幅も自動調整される）
- 列の並び替えが楽にできる（OrderやUIで）
足りない点（ギャラリー比較）
- カスタム範囲がかなり狭い（テキストの計算式や書式変更くらい）
- 条件に応じた列単位の色変えなどは出来ない
- ボタンや画像、チェックボックスなど、他のコントロールは入れ込めない（基本的にテキストのみ）
- 行の高さは変更不可、複数行には対応しない。
- ギャラリーインギャラリー的なことは出来ない（Concatで文字列で表示などで対応は可能）
- 読み込みパフォーマンスがギャラリーより弱いと思われる（大量データは100件ずつ読み込むがロード遅かったり。）
といった感じでしょうか。あくまで所感なので認識の違いあればご容赦ください。
お話をいただく開発案件では、一覧にチェックボックス、アイコンや画像、操作ボタンを出したい、条件によって色を変えたいなどの要件が結構あり、そういった場合はデータテーブルでは対応できないのでギャラリーでテーブルっぽく作るケースが多いですね。
ただ、シンプルな一覧でOK、マスタ管理系なのでサクッとでOKということであればデータテーブルで十分というケースはあると思います。（SPOリストのマスタ系ならSPOリストをそのまま使う、自動生成アプリでよいケースもありますね。）
ヘッダーや色合いはプロパティやテーマでの調整出来るので少しはおしゃれにできますし、モーダルフォームを組み合わせたりすれば結構いい感じだと思います。
以降、サクッと作成したサンプルアプリで解説いたします。
データテーブルの公式ページ
Power Apps でのデータ テーブルのコントロールについての詳細、プロパティ、例について説明します。
NOTE作成時に調整が必要な項目（Bool列のチェックボックスが正しく表示されない）点もあるのでその辺についてもサンプルの中で対応策をご紹介しています。
サンプル実装
以下機能別にイメージを載せていきます。色は新しいテーマの色を適用しています（この色好き）
横スクロール対応
標準で横スクロール対応しています。
※ギャラリーの場合は対応していないので、水平コンテナーに入れて対応するなどのカスタムが必要。
ユーザー操作での幅調整
ユーザーがアプリ使用中にUIから列幅の調整が出来ます。これはギャラリーではできないので便利な機能です。
列の境目をつかんで伸ばしたり縮めたり出来ます。（あくまで表示中のみで再表示でもとに戻ります）
※変更するとヘッダーの文字位置が下に少しずれる（意図的なのか不明）
↓
表示幅が足りない場合にユーザーが操作できるのはいいわね
ホバー時の文字・背景の色調整
ギャラリーではホバー時の色調整するプロパティは標準ではないので透明ボタンをかぶせてのカスタムなどで実現は可能ですが、データテーブルの場合は標準で対応しています。
また色、背景もプロパティから変更可能です。以下ではテーマに沿った色合いにしています。
列の表示・非表示や並び替えの調整（動的対応も可）
列ごとのプロパティにVisible、Orderがあるので、プロパティでの表示調整が可能です。
ボタンやチェックボックスの値に応じて動的に変更させることも可能です。
列を非表示にした場合、列幅の自動拡張がオンになっていればいい感じに再調整されます。カスタムは特に不要です。
↓
設定としては対象の列のVisibleプロパティにチェックボックスの値を当てているだけです。
Orderを調整する場合も同様に条件で数値を変えてあげれば変更が可能です。
役割やステージに応じて表示する項目を変更したり、ユーザーの好みに変更させたりできそうだね！
主なプロパティ
データテーブルの主なプロパティです。あまりカスタマイズ要素はないのでデータソース、フィールドとデザイン系の基本的な内容を変更できる感じです。
データテーブルのプロパティ
フィールド編集からデータソースの中からフィールド追加が可能です。移動や削除も可能。
※フォームのように空のカードを追加的なものはありません。
また基本はテキスト側ですが元の種類に応じて少しは変更可能です。（テキスト、電話、メール、数値、ブール値など）
フィールドを追加すると以下のようにフィールドがツリーに表示されます。
各フォールドごとにOnSelectプロパティ、その他プロパティがあります。
フィールドのプロパティ
追加した列ごとのプロパティでは幅、表示、ヘッダーテキストの調整とハイパーリンク表示にできる機能があります。
拡張可能は幅の自動調整機能です。全体の列数の割合で幅が決まります。ただし幅を指定するとチェックが外れます。自動調整がオンになっている列は列の数の増減に伴い幅が調整されます。
ハイパーリンクにすると青文字になりホバー時にカーソルが指アイコン、下線が付くようになります。
また、列ごとにOnSelectプロパティがあるのでここでクリック時の操作を指定できます。
列ごとのOnSelectでアクションを指定可能
Textプロパティには既定で値が入っています。（ThisItem.フィールド など）
この部分で書式設定したり計算式を入れたりが可能です。日付の場合は以下のようにして表記変更など可能です。
ブール値に注意！
不具合なのかな？と思いますが、ブール値（はい、いいえ）の表示の場合におかしな挙動があります。
普通にブール値の列を表示すると以下のようにチェックボックス表示となるのですが、なぜかすべてTRUEの表示になっています。本当ははい、いいえがそれぞれ存在するデータです。
はい、いいえ列の表示ですべてはいとなっている。ブール値の列
こちらですが、他のデータソースでは検証していないので、SPOリストの場合のみなのかもしれません。（フィルターでもが正しく取れず1，0にするなどあるので関連しているのかも？）
解消方法としては2通りありそうです。
① 1つ目はTextプロパティを消す。
以下のようにTextプロパティを空にしたら元の情報が反映されました。
※元々これがなくてもデータソースの列の値を持ってくるようになっている様子
② もう一つはコントロールの種類をブール値の列からテキストの列に変更する。
ブール値の型だとテキストの列にすれば正しく取れるようでした。そのままだとtrue,falseで取れます。
（ブール値列の場合にTextプロパティが効かずに余計な事しているのかもですね）
ここからTextプロパティで表示するテキストを調整すればOKです。内容により意味のある記載にする方が良いかなと。絵文字を使うことも可能ですね。
上記の対応（②のテキスト列にする）については以下の記事でも扱われてました。
Solved: how to handle Boolean value in Datatable – Power Platform Community (microsoft.com)
おまけに（プレビュー機能について）
冒頭で永遠のプレビュー(笑)と書いたのですが、正確に記載すると、そもそもデータテーブルコントロールは2017年の5月に追加されたようです。その後、プレビュー機能として記事でも紹介しているTextプロパティなどが追加されています。
Power Apps での Data table コントロール – Power Apps | Microsoft Learn
このプレビューが2019年の6月頃なので、そこから4年ほどプレビューのままですね。
以下の機能（既定でオン）をオフにすると以前のデータテーブルが使えますが、Textプロパティがないので書式設定は不可、Orderもないので並び順は再作成が必要？その他フィールド選択の挙動が安定していなかったので、プレビュー前のコントロールは使う機会はないと思われます。
また、冒頭でお伝えしたとおり、最近のアップデートでモダンコントロールにテーブルコントロールが追加されていますので、今後はそちらがアップデートされていくのかなと思われます。
データテーブルの公式ページを見ると将来的に機能が拡張される？ように見える記述がありますが、上記モダンコントロールも出てきたので、データテーブルコントロールが更新されるという期待は出来ないなと思っています。引き続き永遠のプレビューとなるのでしょうか(笑) または統合される可能性もありますね。
おわりに
上記基本的な設定や動作について記載いたしました。
想定より長くなってしまったのでモーダルフォームと組み合わせたサンプルと、少しカスタムしてアクションを追加（削除など）するサンプルをその②でご紹介しようと思います。それでは。
その②を投稿しました。
はじめに 今回はデータテーブル(DataTable)コントロールに触れてみようその②です。前回の記事をベースにサンプル動画でも載せているモーダルフォームの実装、削除処理の追加などを書こうと思います。モーダルフォームについてはギャラリーの実装でも使えますので同画面上でフォーム実装をしたい場合は...
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント