SharePoint | インフォシェア株式会社

カテゴリー：SharePoint

【キャンバスアプリ】モダンテーブルコントロールの並び替えが動かない…Itemsがコレクションなのが原因か

2024年12月03日（火）

※本記事の内容は、2024年11月時点の情報に基づいて記載しています。

こんにちは、インフォシェア株式会社DX部の佐々木です。

キャンバスアプリで使えるコントロールがどんどんモダンに置き換わっていますね。

クラシックのコントロールに慣れきってしまい、各コントロールのギミック的な使い方の知見もかなり溜まってきたところだったので、モダンで同じ事ができないのが結構しんどい...。

これもクラウド製品の宿命といったところで、常に学びなおさないとですね。

さて、本題です。

モダンのテーブルコントロールに標準でついている"並び替え機能”が、どうも動いていない様子。

調査してみました。

問題：Itemsにコレクションを指定すると動かない😭

モダンのテーブルコントロールをキャンバスに置いて、Itemsにコレクションを指定します。

colCities には以下の画像の右側のデータを格納しました。
問題なく表示されましたね。

では、モダンになってから標準搭載された並び替え機能を使って、人口を少ない順に並び替えてみます。

さて、東京の人口は世界でも有数なので、きっと下の方に行くはず。。。

って、あれ！？

並び順、変わってない！！

はい、こんなわけで、

モダンのテーブルコントロールのItemsにコレクションを指定すると、並び替え機能が動かない

という問題が発生します。

テーブルコントロールに標準で搭載されている並び替えは、クラシックのときにはない機能でした。
新しい機能だからまだ不安定なのでしょうか。。。？

とはいえ、動かないものを動かないままでリリースするわけにもいきません。

そのうち動くようになるかもしれませんが、現時点（2024年11月）でのワークアラウンドを考えてみます。

対策①：Itemsにデータソースを直付けすれば問題なし

ここまで「Itemsにコレクションを指定すると」と繰り返してきました。

そうです、この問題はItemsにデータベースを直接つなげば発生しないのです。

よく使うデータソースごとに動きを見てみましょう。

SharePointリスト

まずはSharePointリスト。人口の昇順で並び替えてみます。

うん、ちゃんと動いてますね。

Dataverse

次はDataverse。国名の昇順にしてみます。

大丈夫ですね。
（データソースのスペルが Citiess になっていますがご愛嬌ということで...）

アメリカ合衆国、アルゼンチン、イギリス。
しっかり昇順になっています。

Excel Online

最後にExcel Onlineでも見てみます。都市名の降順にしてみました。

こちらも問題なし。

少なくともキャンバスアプリでよく使うデータソースでは、きちんと動作することが確認できました。

対策②：モダンテーブルの並び替えをオフにする

データソースに直接つなげないケースではどうしましょうか。

複数のテーブルをマージしていたり、データをアプリ側のメモリに持ってきてパフォーマンスを向上させたりと、コレクションを使いたい（または、使うしかない）ケースはいくらでもあります。

まずシンプルに、並び替えをオフにするという手があります。

ユーザーは「できそうなのにできない」と嫌に気分になりますから
できなそうに見せられるならそれで解決、というケースもあるでしょう。

テーブルコントロールを選択して「プロパティ」ペインを表示します。

「ディスプレイ」タブで「並び替えを有効化する」を「No」に設定すると、並び替え機能がオフなります。

並び替えの選択肢が無効化されました。

対策③：並び替え機能を自分で作る　→　できない

どうしても並び替え機能を諦められないなら、自分で作るしかないようです。

しかし。

検証が長くなるので結論から申し上げますと、
並び替え機能の自作は、うまくいきませんでした。

並び替え条件指定用のUIを作り、条件に応じて並び順が変わるように Items に式を加えてみます。

まずは条件指定のドロップダウンを用意して、

並び替え対象列のドロップダウン（SortColumnDropdown）のItems　↓

Table(
    {ID:0, Column: "ー"},
    {ID:1, Column: "都市"},
    {ID:2, Column: "国"},
    {ID:3, Column: "人口"}
)

並び順指定列のドロップダウン（SortOrderDropdown）のItems　↓

Table(
    {ID:0, Column: "ー"},
    {ID:1, Column: "昇順"},
    {ID:2, Column: "降順"}
)

テーブルコントロールのItemsに式を入れます。

列と並び順の両方が指定されていたら、指定した条件に従ってSort関数でコレクションを並び替えます。

テーブルコントロールのItems　↓

With(
    {
　　　Column: First(SortColumnDropdown.SelectedItems).ID, 
　　　Order: First(SortOrderDropdown.SelectedItems).ID
　　},
    If(
        Or(Column = 0, Order = 0),
        colCities,
        Sort(
            colCities As Rd,
            Switch(
                Column,
                1, Rd.Title,//都市
                2, Rd.field_1,//国
                3, Rd.field_2//人口
            ),
            Switch(
                Order,
                1, SortOrder.Ascending,
                2, SortOrder.Descending
            )
        )
    )
)

しかし。。。

動かないですね。。。

人口の昇順（＝少ない順）と条件の指定しているのに、最も人口が多い東京が一番上にあります。

であれば。

条件を変えるたびにClearCollectでコレクションを作り直すという力業ならどうでしょう。

テーブルのItemsは colCities に戻して、「並び替え」ボタンを設置。

ボタンのOnSelect式は以下のとおり。

ドロップダウンで指定した条件で、元データのExcelから取得したレコードを並び替えてコレクションに格納します。

ClearCollect(
    colCities,
    With(
        {
          Column: First(SortColumnDropdown.SelectedItems).ID, 
          Order: First(SortOrderDropdown.SelectedItems).ID
        },
        If(
            Or(Column = 0, Order = 0),
            Cities,
            Switch(
                Column,
                1,
                Sort(
                   Cities,
                   都市名,
                   Switch(Order,1, SortOrder.Ascending,2, SortOrder.Descending)
                ),
                2,
                Sort(
                   Cities,
                   国名,
                   Switch(Order,1, SortOrder.Ascending,2, SortOrder.Descending)
                ),
                3,
                Sort(
                   Cities,
                   '人口（万人）（概算）',
                   Switch(Order,1, SortOrder.Ascending,2, SortOrder.Descending)
                )
            )
        )
    )
)

しかし、それでも。。。

ダメですね。。。

並び替えはされましたが、順番がでたらめです。

何度か条件を切り替えていると、たまに正確に動くことがありますが、不安定すぎます。

コレクションに入れるデータの取得元をExcelではなくDataverseにしても、結果は同じでした。

ちなみに、クラシックのデータテーブルコントロールを横に置いて、Itemsにコレクションを指定すると、バッチリ動作します。

左がクラシック（国名の昇順になっている）で、右がモダン（順番がでたらめ）↓

ということで、並び替え機能を自作するのはうまくいかないようです。

（そもそもテーブルコントロールの列にUIとして並び替え機能がついているのに、それが無効化されていて、外に別に並び替え用のUIがあるという状態自体が格好悪いですが！）

ちょっとした考察

なぜモダンのテーブルコントロールの並び替えは不安定なのか。

これは憶測ベースの考察ですが、

並び替え処理をデータソース側に委任しているから

ではないかと思います。

モダンのテーブルコントロールで並び替えを実行すると、アプリ上部にloadingのバーが表示されます。

データを取り直しているわけでもないのに、外部サービスをやり取りしているということは、データソース側に並び替えのクエリを投げて、データソース側で並び替えたものを受け取っているという動きに見える。

この理屈なら、なぜItemsがコレクションでは並び替えができず、データソース直つなぎならできるのか、納得できます。

早くコレクションでも並び替えができるようにアップデートされるといいですね。

結論

モダンのテーブルコントロールでは並び替えを有効にするなら、Itemsに直接データソースを指定する。

Itemsにコレクションを指定するなら、並び替え機能はオフにする。

インフォシェア株式会社では、お客様のニーズに合わせて、導入からカスタマイズ、トレーニングまで幅広くPower Platform支援サービスを提供しています！

お困りごとがあれば、まずは遠慮なくお問い合わせください。

インフォシェアのPower Platform支援サービス

ブログBLOG