ログはじめに今年2023年の6月頃から従来のスマホレイアウトに加えて、PC・タブレットとスマホに対応可能なレスポンシブな自動生成アプリが作成できるようになっています。その1では新しくなったトップ画面・アプリ画面からアプリ作成を進める流れや自動生成アプリの作成方法その2ではSharePointリストからレスポンシブ対応の自動生成アプリを作成、レイアウトやページ構成などの概要部分その3ではギャラリーの基本的な調整とカスタマイズのサンプルその4では初期状態でちょっと怪しい部分を調整するサンプルその5ではフォーム内の列幅をWitdhFitプロパティできれいに調整する実装についてその6ではソート(並び替え)の切り替えをタブリストを使って2つの要素で変更する実装サンプルをご紹介しました。その7では別記事でアップしたモダンコントロールのタブリストを使って、画面上部フライアウトメニューを追加するサンプルです。自動生成アプリの作成については前回までの記事をご参考ください。作成後の修正点について以降記載していきます。この部分だけ実装することももちろん可能ですが、記事では前回までに作成したアプリをベースに記載しています。本記事のハンバーガーメニューの部分と次に記載する記事のギャラリー内フライアウトメニューの動画ですモダンコントロールの有効化モダンコントロールがオフの場合は以下の記事を参考に機能をオンにしておきます。モダンテーマの機能オンについて2023年からキャンバスアプリのモダンコントロールとモダンテーマが順次リリース、更新されています。その中で本機能をオンにする箇所が変更となったり変更が都度入っています。他の記事を書く際に都度オンにする方法を載せていたんですが、今後も変更の可能性があるのでこの部分のみ記事にしました。...タブリストの概要や実装例など実は以下記事でタブリストのことは記載しています。概要やフライアウトメニューとして使用する場合の手順などは基本以下に書いてますので、こちらご参考ください。本記事では詳細は割愛し、上記の実装をベースにフライアウトメニューを追加していきます。今回はモダンコントロールで追加されたタブリスト(Tablist)を使った実装についてご紹介します。界隈では超有名人のドラーニさんが動画でフライアウトメニューとしての活用を紹介されており、すぐに飛びつきました!自分は現時点で一番好きなモダンコント...サンプルSharePointリストの構成カスタマイズサンプルシリーズでは以下に記載しているリスト構成をベースに記載しています。今後記載する列の操作などはこの定義にそって書いていますので、適宜ご自身の構成と読み替えて調整いただければと思います。(youseibubu.com)ヘッダー部にメニューを追加するまずはヘッダー部にメニュー(ハンバーガーメニューのような)ものを追加してみます。従来はギャラリーをカスタムして作るのが基本でしたが、タブリストを使うとサクッと作れます。見た目のディティールなどはあまりこだわれないので、機能面やデザイン面で足りない場合はギャラリーで作成するのがよいです。今回は一旦通常のコンテナーを追加してその中にタブリストを追加しています。上記のコンテナーを選択しタブリストを追加します。収まる範囲で入るので幅や高さ、位置を微調整(中央寄せなど)デザインを調整(例ではフォントを20にしているくらい)こんな感じになりますヘッダーメニューのItemsや処理を実装するタブリストのOnSelectで選択したレコードに応じて処理を切り替える実装をします。この部分は用途に応じてですが、別画面への遷移(Navigate)だったり、ダイアログ画面でなんか表示したり、アプリを終了するなどを入れたりするイメージかと思います。コレクションや変数で定義しておき処理を切り分けて実装タブリストにコレクションやテーブル定義を指定して、IDやタイトル、処理の種類、リンク先URLなどの値を入れておいて、OnSelectで切り分けて実装できます。シンプルな内容ならOnSelectでタイトルで処理を切り分ける実装でもいいと思いますが、メンテナンス面を考慮(リンク先が変わるなど)するとコレクション化しておいた方が良いかと思います。コレクション化して処理を実装するのは別記事でもご紹介しているドラーニさんの動画でやられてますので、こちらをご参考にされるとよいです。(youtube.com)以下抜粋ですが、こんな感じでOnStartでコレクションを定義していて、タブリストのItemsに指定、タブリストのOnSelectで処理を切り分けています。以下のサンプルではタブリストのItemsに直接このような定義を書いたシンプル版でご紹介します。処理用のURLなどもOnSelect側に書いたパターンです。シンプル目の実装:Itemsに定義デフォルトで定義されているような感じ([“item1′′,”item2′′,”item3”])でもいいんですが、そうするとタイトルを変えたらOnSelectも変更必要なのでID、タイトルという感じで定義しています。参考記事にも書いた絵文字も使ったパターンでやっています。終了”}]※文字数が異なる、絵文字なしの部分を余白で調整してますNOTE!定義を変更すると一旦以下のように変な表示となります。これは表示するフィールドが変更されたからですね。いった場合はタブリストのフィールドをクリックし、フィールドの追加>今回だとTitleを追加します。これで元の通りタイトルが表示されるようになります。フィールド定義が変わったのでTitleを表示するように設定するOnSelectで処理を分岐して記載OnSelectに以下のように処理を記載します。※設定画面はサンプルの画面を追加しました。設定画面の方にもこのメニューをコピーして配置しています。TIPSIfを使った分岐でもSwitchでもOKです。Switchの方が記載はスッキリはします。一部例を載せると、設定画面をクリックで設定画面へ遷移します。メール起動をクリックすると既定のメールアプリで指定したアドレスをTOに入れてメールアプリを起動します。※固定ユーザーで管理者への連絡的な位置づけのサンプルなので「問い合わせ」の方がしっくりきますね💦TIPSLaunchではURLの表示のみではなく他アプリを起動なども出来ます。その辺はこちらの記事がご参考となるかと思います。(ippu-biz.com)他の画面でも共通して使用する場合は変数での管理がよい上記ではシンプル目にタブリストのItemsへ直接定義しましたが、他の画面へコピー(この場合設定画面)しての使用が可能ですが、メンテナンスが入る場合はそれぞれを修正しないといけません。いった点では事前にコレクションや変数で定義しておいたものを指定しているほうが、対応箇所が少なくて修正漏れもなくなるのでやはりオススメです。最低限、メールの宛先やリンクページのURLなど変わる可能性があるものは変数で定義しておく方がいいですね。今回はよくあるナビゲートやアプリ終了などを入れてますが、その他にもよくある処理は入れれますね。→処理を呼び出しなど。画面上に常に表示しているとスペースを取られるので、そういったものはメニュー化して使用できるようにしたほうがよいかと思います。レスポンシブ対応タブレットやスマホのプレビューで見てもいい感じに収まっています。参考:メニューをギャラリーで作る場合ギャラリーでハンバーガメニューを作るサンプルは以下のパワスロアプリで記事にしています。タブリストでサクッと作成する場合でデザイン的に物足りない場合はこちらご参考にギャラリーで作成いただくと良いかと思います。パチスロアプリでも使用している、ハンバーガーメニューの作り方を記事にしました。使用頻度が低めのメニューや設定関連のメニューはクリック時に表示すると画面を広く使えます。モバイルで効果的ですね。使うのは表示されていたほうが嬉しいけど、あんまり使わないやつはメニューで表示される...おわりに今回はタブリストを使ったメニュー作成のサンプルをご紹介しました。本当はギャラリー内に実装するフライアウトメニューも載せたかったのですが、想定より長くなったので次回にいたします。タブリストの概要やその他実装については別記事で書いてますのでそちらもご参考ください。今回はモダンコントロールで追加されたタブリスト(Tablist)を使った実装についてご紹介します。AppsときどきAutomate。初学者からその先へ進む方向けのワンランク上の技術情報ブログです。itこの記事は役に立ちましたか?もし参考になりましたら、下記のボタンで教えてください。Automate技術者へと転身。qiitaや自社HPでも技術ブログを書いていました。フォントサイズが追加されました!(2023年10月:3.23103.10以降)はじめに先日、モダンコントロールにヘッダーコントロールが追加され、さらに3.23101.20では基本のパレット色(BasePaletteColor)が追加されていました!その際の今後のアップデート予定では、近日中にフォントサイズも追加(その他も色々)となっていました。Apps2023.07.159追記型のコメント機能を作る(承認コメントを残す機能)はじめにTIPS本投稿は1年ほど前に自社ブログで書いた内容のリライト版です。承認操作のあるアプリを作成する場合には、コメント欄を用意して入力しその内容を履歴として保持しておきたいケースは多いと思います。多段階の承認や複数人の承認の場合は追記して削除できないようにする機能です。選択範囲の一括選択サンプル(Index実装)今回は、ギャラリー内でレコード選択時に複数した範囲を一気に追加するという実装のサンプルです。1個目を選択し次に10個目を選択したらその間のレコードを一括で追加するイメージです。いった実装が出来ないかなーとご相談を受けて、面白そうだったので、やったみた感じです。動的なレイアウトサンプル(OnSelectも付いた!)モダンテーブルコントロールにも待望のOnSelectが付きました!(2024年3月)今回はテーブルコントロールを使った、動的なレイアウト調整(カードタイプ、レコードタイプ切替)やOnSelectを使ったサンプル実装を軽めにしてみたのでご紹介します。actions)についてご紹介します。ストック画像が使えるようになったについてもご紹介します。その2POINTこちらの記事はQiita記事のリライト版です。