はじめに
今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能な
レスポンシブな自動生成アプリが作成できるようになっています。
その①では新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法
その②ではSharePointリストからレスポンシブ対応の自動生成アプリを作成、レイアウトやページ構成などの概要部分
その③ではギャラリーの基本的な調整とカスタマイズのサンプル
その④では初期状態でちょっと怪しい部分を調整するサンプル
その⑤ではフォーム内の列幅をWitdhFitプロパティできれいに調整する実装について
その⑥ではよく実装するソート（昇順・降順）の切り替えをタブリストを使って2つの要素で変更する実装サンプルをご紹介します。
自動生成アプリの作成については前回までの記事をご参考ください。作成後の修正点について以降記載していきます。
この部分だけ実装することももちろん可能ですが、記事では前回までに作成したアプリをベースに記載しています。
TIPS※日本環境 2024/1/13 時点のバージョン：3.23123.15の内容で記載しています
自動生成アプリでのソート（並び替え）機能
一覧でよくあるソート（並び替え）機能です。スマホ版自動生成アプリの時は最初からソート機能が実装されてますが、
レスポンシブレイアウト版の自動生成アプリではスペースの問題かこの部分は実装されていないです。
ソート指定がない場合は基本登録昇順で表示されます。
（厳密には絶対の保証はされてないと思う。SPOの場合はID昇順と同義となる）
レスポンシブレイアウトの自動生成アプリ
ソート機能は入っていない（以下はデフォルトから少しカスタムしている）
スマホ版自動生成アプリ
最初からソート機能が入っている（SortByColumnsでTitle列指定）
スマホ版の場合はタイトル順（昇順・降順切替え）となっているので、レスポンシブ版と並び順が異なりますね。
タイトル順ではなく登録日時順や更新日時順にしたい場合も多いと思うので、対象列を調整するなどあると思います。
レスポンシブ版にはそもそもソート機能が入っていないので、必要であればカスタムで追加します。
対象列が固定で昇順または降順も固定であれば、ギャラリーのItemsのみ調整すれば済みますが、
本サンプルでは昇順・降順切替え、2つの対象列で切り替えを実装していきます。
サンプルSharePointリストの構成
カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。
今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。
自動生成 レスポンシブアプリのカスタマイズ ② 自動生成アプリ概要 | Power Apps Tips ログ (youseibubu.com)
ソートについて（SortとSortByColumns）
ソート用の関数にはSortとSortByColumnsがあります。違いのポイントとしては、
- Sortの場合は列名そのままでよい、SortByColumnsだと内部列名を””で囲ってやる必要あり
- Sortの場合のみ、数式で指定が可能（A列とB列の合計でソートなど）
- SortByColumnsの場合は複数列のソートが書きやすい（Sortでもネストすれば可能）
- SortByColumnsの場合のみ、テーブルを使ったソートが可能（曜日順に並び替えるなど）
という感じです。
ソート機能については別途記事にしましたので、以下をご参考ください。
キャンバスアプリ 並び替え機能 SortとSortByColumns
すでにソート関連の記事は結構あると思いますが、2023年に追加されたレスポンシブレイアウトの自動生成アプリだと実装入ってなかったりもするので、あらためてここでも書いておこうかという感じです。...
ギャラリーにソートを適用（固定バージョン）
ひとまず、ソートする列と昇順または降順が固定のパターンでギャラリーにソートを入れます。
以下は元々のギャラリーのItemsプロパティの内容です。
デフォルトの内容から前回までのカスタムでFilter処理が追加されている内容となります。
※デフォルトの状態からでもSortの実装は大外に追加するので変わりありません。
ここに以下部分の太字部分を追加します。元の部分をSort関数で囲う感じですね。
以下ではわかりやすいように列をタイトル、順番を昇順にしています。
CodeSort(
Filter(商品リスト,
StartsWith(タイトル,SearchInput1.Text)|| StartsWith(Detail,SearchInput1.Text)
,IsBlank(Dropdown3.Selected) || カテゴリ.Value = Dropdown3.Selected.Value
)
,タイトル,SortOrder.Ascending
)
タイトル順に並んでくれました。
指定した「タイトル」を「ID」や「登録日時」、「更新日時」など任意の列に変更すればその順番となります。
並び替えアイコンを追加して昇順、降順を切り替える
次にアイコンを追加しましょう。
といっても自動生成アプリがスペースが少ないので、今のものを以下のように調整しました。
この辺りはお好みなのでざっとのご紹介となります。
・元のアプリ
カテゴリ用のドロップダウンを上に持っていく
- ドロップダウンをコピーして上部の検索エリアに追加する。
- 割合を変更。部分を塗りつぶすをSearchInput1：1→2にする
- 自動的にDropdown側は1のままで割合が2：1となる（間に検索アイコンもいる）
- 検索アイコンを見やすくFill色変え
で以下のようになりました。
並び替えアイコンを追加する
- 元のカテゴリ用ドロップダウンを削除する
- 新規追加のラベルを削除する（＋アイコンでわかるのでスペース確保のため）
- ＋アイコンをコピーして並び替えアイコンを追加
で以下のようになります。
並び替えアイコンに変数更新の処理を追加
次に並び替えアイコンのOnSelectに変数をTRUE/FALSEで変更する実装を入れます。
以下のように記載すれば、TRUE、FALSEを入れ替える処理をスマートに書けます。
※Set関数でもいいですが、サンプルでは別画面がある場合を考慮してUpdateContextにしています
CodeUpdateContext({GalleryDesc:!GalleryDesc})
※変数名は任意
TIPS上記の書き方だと値に今の変数の否定形を指定しているため、TRUEの場合はFALSE、FALSEの場合はTRUEが設定されます。
そのためクリックするたびに変数の値が切り替わります。
※TRUEの場合はFALSE、FALSEの場合はTRUEと書いてもいいですが、上記の方がスマートですよね。
ギャラリーのSortOrderを上記変数を使って判定する
この変数をSortOrderの判定に記載します。
以下は変数がFALSEの場合は昇順、TRUEの場合は降順としています。※理由は後述
CodeSort(
Filter(商品リスト,
StartsWith(タイトル,SearchInput1.Text)|| StartsWith(Detail,SearchInput1.Text)
,IsBlank(Dropdown3.Selected) || カテゴリ.Value = Dropdown3.Selected.Value
)
,タイトル,If(!GalleryDesc,SortOrder.Ascending,SortOrder.Descending)
)
TIPSIf(!GalleryDest,・・・ として上記で変数値の否定形でFALSEの場合には昇順、TRUEの場合には降順
という書き方をしている理由として、初回は変数が空白なので、FALSE扱いとなります。
そのためOnVisibleで変数をTRUEにする（初期化的な）必要が出てくるのですが、それならFALSEが既定としたらそのままでいいから楽。という理由です。
アイコンをクリックすると変数にはTRUEが設定され、以下の式だと（TRUEの否定なのでFALSEの場合として）Descendingとなり降順になります。
NOTEちなみに変数に直接SortOrder.Ascending、Descendingを入れて指定すると委任警告が出ます。。
（IF文の場合も委任されているか怪しい気もしますが）警告はでませんのでIF文でやっています。
対象の列を変更する（タブリストで実装）
上記カスタムでスペースを空けた理由として対象の列を選択するコントロールを追加したいからでした。
今回はモダンコントロールのタブリストで実装してみます。※プルダウンでももちろん大丈夫です
タブリストを追加
この辺も要件に合わせてなので以下はサンプルとしてさらっと紹介となりますが、
タブリストを追加して、Itemsをタイトル順、登録順にしています。
またサイズをMediumに、配置位置を真ん中よせにして幅を200としています。
この辺りは実際のものに合わせて位置や大きさ、内容など調整ください。
動的にソート対象列を指定すると委任警告！
ギャラリーに対象の列を指定したいのですが、ここで残念なポイントがあります。
ここにIF文を書くと委任警告が出ます。
また、SortByColumnsにして選択した値を内部名にしても同様に委任警告が出ます。
これはすでにFilter後の値に対してソートしているので別に委任できなくても問題ないとは言えますが、
100件ずつ取ってくる動作とならなくはなります。（データ行制限の上限までを取る）
上記が嫌、そもそも委任警告が出るのがちょっとなーということであれば以下の方法で対応します。
並び順の対象列ごとにIf文でわければ委任警告は出ない
外側でIF文でSort～Filter部分の実装をそれぞれ書けば委任警告なく実装できます。
この場合のネックはほぼ同じ内容を複数書く必要があるという点です。
同じような内容を複数書くのは可読性や改修時などの保守性に影響しますので出来れば避けたくはありますが、
それでも実装出来ないよりは全然ましなので、これで出来るんであればやればいいと思ってます。
NOTE大量のソート指定列があると困難なので、そういった要件の場合は委任警告が関係しないように
一旦コレクションに保持する（データ行の上限までに限られる）か委任警告を無視して実装する（ソート前段階でフィルター済みの前提）などで対応するほうがよいかなーと思います。
以下If文で分けた実装となります。
タイトル順はタイトル、それ以外はID（登録順と同義）で実装しています。
CodeIf(TabList1.Selected.Value=”タイトル順”,
Sort(
Filter(商品リスト,
StartsWith(タイトル,SearchInput1.Text)|| StartsWith(Detail,SearchInput1.Text)
,IsBlank(Dropdown3.Selected) || カテゴリ.Value = Dropdown3.Selected.Value
)
,タイトル,If(!GalleryDesc,SortOrder.Ascending,SortOrder.Descending)
)
,
// 登録順の場合ID順でソート
Sort(
Filter(商品リスト,
StartsWith(タイトル,SearchInput1.Text)|| StartsWith(Detail,SearchInput1.Text)
,IsBlank(Dropdown3.Selected) || カテゴリ.Value = Dropdown3.Selected.Value
)
,ID,If(!GalleryDesc,SortOrder.Ascending,SortOrder.Descending)
)
)
上記であれば委任警告は出ずにタブリストで指定した列で並び替えを変更できます。
併せて並び替えアイコンで昇順と降順を切り替えれます。
上記は2つの場合ですが、複数用意しての切り替えもその分書けば対応可能です。
※大量になると可読性落ちるので前途したような対応も検討
※追記 位置を微調整
上記より少しだけアイコンなどの位置を調整した例です。
- 並び替え用タブリストを左に移動で真ん中に
- タブリストを伸縮可能オン、最小幅を200位に
- +と並べ替えアイコンはそのまま（のはず） ※伸縮可能はオフで固定
TIPSスマホレイアウトとした場合にも収まる感じで調整しています
おわりに
今回の自動生成アプリのカスタマイズのサンプルはソート機能を追加しました。
昇順、降順の切り替えとタブリストを使った対象列の切り替えを実装してみました。
ソート機能はよく使用される機能なので、自動生成アプリ以外の実装でもご参考にしていただけるかと思います。
併せて記事にしたソート機能の説明やSharePointリストの内部名についてもご参考ください。それでは！
関連記事
自動生成関連：
Power AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。
数式リファレンス：
Power Apps Power Fx 数式リファレンス カテゴリ別チートシート
最終更新日：2024/3//19 公式のPower Fxリファレンスをカテゴリ別に記載したチートシートです。 名前をど忘れした数式、関連する関数・数式の把握、最近の更新チェックなどにお役立てください。...
Sort機能：
キャンバスアプリ 並び替え機能 SortとSortByColumns
すでにソート関連の記事は結構あると思いますが、2023年に追加されたレスポンシブレイアウトの自動生成アプリだと実装入ってなかったりもするので、あらためてここでも書いておこうかという感じです。...
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント