SortとSortByColumnsはじめに今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能なレスポンシブな自動生成アプリが作成できるようになっています。その1では新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法その2ではSharePointリストからレスポンシブ対応の自動生成アプリを作成、レイアウトやページ構成などの概要部分その3ではギャラリーの基本的な調整とカスタマイズのサンプルその4では初期状態でちょっと怪しい部分を調整するサンプルその5ではフォーム内の列幅をWitdhFitプロパティできれいに調整する実装についてその6ではよく実装するソート(昇順・降順)の切り替えをタブリストを使って2つの要素で変更する実装サンプルをご紹介します。自動生成アプリの作成については前回までの記事をご参考ください。作成後の修正点について以降記載していきます。この部分だけ実装することももちろん可能ですが、記事では前回までに作成したアプリをベースに記載しています。一覧でよくあるソート(並び替え)機能です。スマホ版自動生成アプリの時は最初からソート機能が実装されてますが、レスポンシブレイアウト版の自動生成アプリではスペースの問題かこの部分は実装されていないです。ソート指定がない場合は基本登録昇順で表示されます。(厳密には絶対の保証はされてないと思う。SPOの場合はID昇順と同義となる)レスポンシブレイアウトの自動生成アプリソート機能は入っていない(以下はデフォルトから少しカスタムしている)スマホ版自動生成アプリ最初からソート機能が入っている(SortByColumnsでTitle列指定)スマホ版の場合はタイトル順(昇順・降順切替え)となっているので、レスポンシブ版と並び順が異なりますね。タイトル順ではなく登録日時順や更新日時順にしたい場合も多いと思うので、対象列を調整するなどあると思います。レスポンシブ版にはそもそもソート機能が入っていないので、必要であればカスタムで追加します。本サンプルでは昇順・降順切替え、2つの対象列で切り替えを実装していきます。サンプルSharePointリストの構成カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。(youseibubu.com)ソートについて(SortとSortByColumns)ソート用の関数にはSortとSortByColumnsがあります。違いのポイントとしては、Sortの場合は列名そのままでよい、SortByColumnsだと内部列名を””で囲ってやる必要ありSortの場合のみ、数式で指定が可能(A列とB列の合計でソートなど)SortByColumnsの場合は複数列のソートが書きやすい(Sortでもネストすれば可能)SortByColumnsの場合のみ、テーブルを使ったソートが可能(曜日順に並び替えるなど)という感じです。ソート機能については別途記事にしましたので、以下をご参考ください。SortとSortByColumnsすでにソート関連の記事は結構あると思いますが、2023年に追加されたレスポンシブレイアウトの自動生成アプリだと実装入ってなかったりもするので、あらためてここでも書いておこうかという感じです。...ギャラリーにソートを適用(固定バージョン)ひとまず、ソートする列と昇順または降順が固定のパターンでギャラリーにソートを入れます。以下は元々のギャラリーのItemsプロパティの内容です。デフォルトの内容から前回までのカスタムでFilter処理が追加されている内容となります。※デフォルトの状態からでもSortの実装は大外に追加するので変わりありません。ここに以下部分の太字部分を追加します。元の部分をSort関数で囲う感じですね。以下ではわかりやすいように列をタイトル、順番を昇順にしています。Dropdown3.Selected.Value),タイトル,SortOrder.Ascending)タイトル順に並んでくれました。任意の列に変更すればその順番となります。並び替えアイコンを追加して昇順、降順を切り替える次にアイコンを追加しましょう。いっても自動生成アプリがスペースが少ないので、今のものを以下のように調整しました。この辺りはお好みなのでざっとのご紹介となります。・元のアプリカテゴリ用のドロップダウンを上に持っていくドロップダウンをコピーして上部の検索エリアに追加する。部分を塗りつぶすを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の場合は降順としています。して上記で変数値の否定形で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(登録順と同義)で実装しています。Dropdown3.Selected.Value),ID,If(!GalleryDesc,SortOrder.Ascending,SortOrder.Descending)))上記であれば委任警告は出ずにタブリストで指定した列で並び替えを変更できます。併せて並び替えアイコンで昇順と降順を切り替えれます。上記は2つの場合ですが、複数用意しての切り替えもその分書けば対応可能です。上記より少しだけアイコンなどの位置を調整した例です。※伸縮可能はオフで固定TIPSスマホレイアウトとした場合にも収まる感じで調整していますおわりに今回の自動生成アプリのカスタマイズのサンプルはソート機能を追加しました。昇順、降順の切り替えとタブリストを使った対象列の切り替えを実装してみました。ソート機能はよく使用される機能なので、自動生成アプリ以外の実装でもご参考にしていただけるかと思います。併せて記事にしたソート機能の説明やSharePointリストの内部名についてもご参考ください。AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。Fxリファレンスをカテゴリ別に記載したチートシートです。名前をど忘れした数式、関連する関数・数式の把握、最近の更新チェックなどにお役立てください。SortとSortByColumnsすでにソート関連の記事は結構あると思いますが、2023年に追加されたレスポンシブレイアウトの自動生成アプリだと実装入ってなかったりもするので、あらためてここでも書いておこうかという感じです。itこの記事は役に立ちましたか?もし参考になりましたら、下記のボタンで教えてください。Automate技術者へと転身。qiitaや自社HPでも技術ブログを書いていました。Appsの公式ブログでモダンコントロールの更新について、1~2か月に一度のペースで更新されている公式ブログのリンク集です。先月更新した内容や今後の予定などが掲載されています。(メンテナンスモード、URL、アドレスなど)はじめに今回はキャンバスアプリを使用する際、アプリ自体の設定項目を管理するリストの作成・使用例についてご紹介します。開発ではよく開発環境で開発→検証環境で検証→本番環境で運用という感じでアプリを移送して運用します。いった場合にその環境ごとに変わる値があります。戻す)今回は最新のアップデートの確認をいち早くしたり、バージョンの不具合かも?なときに使う作成バージョンの変更について記事にしました。モダンテーマの機能オンについて2023年からキャンバスアプリのモダンコントロールとモダンテーマが順次リリース、更新されています。その中で本機能をオンにする箇所が変更となったり変更が都度入っています。他の記事を書く際に都度オンにする方法を載せていたんですが、今後も変更の可能性があるのでこの部分のみ記事にしました。動画公開しましたTwitter(X)と同様ですが、YouTubeチャンネルを作ったのでそっちにもアップしています。トラックバックこの記事へのコメントはありません。トラックバックURLこの記事へのトラックバックはありません。返信をキャンセルする。