はじめに
2024/8/14時点ではまだ推奨バージョンではないのですが、早期バージョンでToolbar（ツールバー）がついにモダンコントロールに追加されています！
簡単にツールバー（メニューなど）を作成できるイメージです。シンプルにはモダンボタンが並べられる感じですね。
アイコン＋ボタン、またはアイコンのみを並べるなど調整が可能で、またタブ一覧（Tablist）と同じく収まらなくなったらフライアウトメニューになってくれます。
メニュー系はこちらのコントロールの方が（ボタン＋アイコンを付けれる点などで）サクっと見栄え良く作れそうです。
TIPS★2024/8月末ごろにバージョン：3.24083.14で標準で使えるようになりました！
保存しても壊れることはなかったのでその点は安心して使えそうです（まだプレビューではあります）
公式アップデート情報のリンク集（歴史）ページを作りました
TIPS★今後さらにアップデートの予定もありますし、いままでの更新情報や今後のアップデート情報は以下のページに追記していきますので、本情報が古くなったら最新はこちらなどからご確認ください。
モダンコントロール 公式ブログの更新 履歴ページ
はじめに 本ページはPower Appsの公式ブログでモダンコントロールの更新について、1～2か月に一度のペースで更新されている公式ブログのリンク集です。先月更新した内容や今後の予定などが掲載されています。 モダンコントロールの更新があった場合に個別に記事にしていたりしますが、更新頻度も高く...
上記からも公式の更新情報ブログを確認いただけます。今回のアップデートは以下に載っています。
最新のコントロールとテーマの 2024 年 5 月の更新 |Microsoft Power Apps
公式Docsのモダンコントロールの概要は以下です。
キャンバス アプリのモダン コントロールとテーマの概要 – Power Apps |Microsoft Learn
モダンコントロールとモダンテーマをオンにする
新規作成時は以下の機能をオンにすることでモダンコントロールおよびモダンテーマが使用できるようになります。
設定＞近日公開の機能 ＞ モダンコントロールとモダンテーマ （既定でオフなのでオンにする）
詳細は以下記事に記載していますので、必要に応じてご確認ください。
モダンコントロール モダンテーマの機能オンについて
2023年からキャンバスアプリのモダンコントロールとモダンテーマが順次リリース、更新されています。 その中で本機能をオンにする箇所が変更となったり変更が都度入っています。 他の記事を書く際に都度オンにする方法を載せていたんですが、今後も変更の可能性があるのでこの部分のみ記事にしました。...
作成バージョンを 3.24082.6以降へ更新
TIPS★2024年8月末ごろにはバージョン：3.24083.14が推奨バージョンとなり、使えるようになっています。
また、以下に記載していたような不安定（保存で壊れる）事もなかったので利用できる状態となっています。
記事記載時点の推奨バージョンは自分の環境では「3.24074.14」となっています。
このバージョンだとまだ出てきていません。「3.24082.6」にすると出てくるようになります。
NOTEただし、現時点では、安定していないようで保存したら開かなくなりました。推奨バージョンで出てくるようになってからの確認をお勧めします。特に既存のアプリでの検証はやめておいたほうがいいです。（現時点では）
→上記の通り現時点では解消しております。
まだ出ていなくて自分でも試したい方は以下の記事を参考にバージョンをアップしてみてください。
Power Apps Studio の作成バージョンを確認・変更する（進める / 戻す）
今回は最新のアップデートの確認をいち早くしたり、バージョンの不具合かも？ なときに使う作成バージョンの変更について記事にしました。...
以下のようにToolbar（プレビュー）が出てきます。※モダンコントロール：オン
現時点では保存したら開かなくなりました。バージョンを復元しないとどうにもならなかった。
→現状の推奨バージョン：3.24083.14では大丈夫です。
Toolbar（ツールバー）コントロール
ツールバーを挿入するとある程度サンプルレコードが入った状態で作成されます。
そこから任意に調整していくイメージです。
各種プロパティ
Toolbarのプロパティや詳細設定は以下となります。（確認時点）
以下のフィールドがItemsのテーブル値で入っているプロパティと対応していました。
これらの項目を指定することが出来て、設定するとそれぞれ反映してくれるというイメージでした。
主なプロパティとしては
Alignment（縦、横を調整）、
Layout（モダンボタン同様にアイコン前、後ろ、テキストのみ、アイコンのみ）、
その他はサイズや位置、デザイン（フォントサイズやカラーなど）
詳細設定側にもItemIconNameなどのプロパティ値が存在しますが、こちらに何かを設定してもエラーとなったので、便宜上表示があるがあくまでもItemsの中に指定するもののようです。（既定値として指定するなどは不可っぽい）
Items
サンプルレコードは以下のようになっています。
テーブル型で対応するプロパティがフィールドの選択を見るとわかります。7種類あるようでした。
- ItemKey： レコードのキーとなる値 →OnSelectでの処理分けに使用など
- ItemDisplayName：表示されるテキスト
- ItemIconName：アイコンの種類 →モダンボタンと同一なのでそこから確認できる
- ItemAppearance：ボタンの種類 →モダンボタンと同一なのでそこから確認できる（はず）
- ItemIconStyle：アイコンのスタイル →RegularとFilledの2種と思われる
- ItemTooltip：ホバー時のツールチップ →なしの場合は出ない
- ItemDisabled：レコードの非活性 →Trueだと操作不可となる（状況に合わせて変数でオンオフなどが出来そう）
サンプルレコードをベースに各値を調整していく感じですね。
項目や指定の値（アイコンなど）がない場合は既定値となるっぽいです。
→アイコンが存在しない名前だと〇のアイコン、ItemDisabledはない場合はFalse（活性化）だった。
OnSelect
サンプルで入っているOnSelectの内容です。Switch関数で選択したレコードのItemKeyに応じて処理を切り分けるようになっています。
サンプルだとそれぞれ対応するNotifyを表示するようになっているので、ここを項目に応じて処理を切り分けて書いてあげるイメージですね。Navigateで対応ページへ遷移したり、フォームを対応のモードにしたりPatchしたりなどなど。
ItemsのItemKeyを調整したらこの部分も併せて調整して実装するイメージですね。
調整サンプル
サンプルとして以下のように軽く調整したものです。サイズを大きくしたり、色を付けたりなど調整可能です。
※OnSelectの処理までは調整していません。
Itemsの項目やコントロールのプロパティでデザインを調整
ItemIconNameでアイコン指定やItemApperaranceでボタンのPrimaryやSecondaryの種類を調整、
プロパティでアイコンを前、後ろ、なし、アイコンのみなど調整可能です。
縦表示（Vertical）にする
プロパティでAlignmentをVerticalにすれば縦になります。
ただこの場合（確認時点では）中央寄せとなっていますね。左寄せの方がいい気が。。そのうち調整される気もします。
幅（や高さ）が足りない場合はフライアウトメニュー表示！
この点が最高ですね！タブ一覧（Tablist)と同様に幅が足りない場合は自動でフライアウトメニューになってくれます。
タブ一覧の場合はアイコン部分はなく空白が入っているのですが、こっちだとアイコンを付けれるので、
メニュー作成をする際によりサクッと分かりやすいものが作れます。特にレスポンシブなレイアウトの際に有用ですね。
ヘッダーに付けてメニューバーにする
タブ一覧でも作れますが、タブ一覧だと文字列となるので絵文字で代用などしていましたが、こっちだとアイコン付きなのでより操作が分かりやすく見た目も良いです。
メニューバーとして使う場合は操作系メインなのでツールバーの方があっていますね。
ギャラリーに入れ込みレコードごとの操作系フライアウトメニューに！
これもタブリストでやっていた感じですが、アイコン付きなので見た目わかりやすいです。
ただ、タブリストの場合は柔軟な内容（レコードに紐づく追加情報など）を表示したりにも使えるので、
操作系の場合にはツールバーの方がアイコン付きなのでわかりやすい。
表示系メイン（追加情報やアイテムに紐づくレコード値の情報を出すなど）はタブリスト。という使い分けがよさそうと思いました。
参考：タブリストでフライアウトメニューを作成しているサンプル
自動生成 レスポンシブアプリのカスタマイズ ⑧ タブリストでギャラリー内フライアウトメニュー | Power Apps Tips ログ (youseibubu.com)
インデントを付けて情報表示や一部を操作系にしたりしている
アイコンのみのメニューバーも作れる！
縦にしてアイコンのみにするといい感じのアイコンメニューが作れます。これは何気にいいですね！
もちろん普通にアイコンのみボタンを並べるでも出来るのですが、
メニューバーとしてサクッと作れるのはいいですね。また動的に幅が狭くなったらアイコンのみにするなどの調整も出来るのでレスポンシブなレイアウトに向いています。
（縦表示時に中央寄せなのが解消されればいい感じの動的レイアウトなサイドメニューが作れそうです！）
色々つけたサンプル
最後に色々調整を試したサンプル画面です。
おわりに
今回は結構前からそのうち来るとなっていたツールバーがついに確認出来たので概要や調整サンプルなどご紹介しました。
またタブリストと近い動きでアイコンボタンになる感じなのでそれぞれ使い分けできそうです。ただ、確認時点（2024・8月中旬）ではこのバージョンにすると保存したら開かなくなるという不具合があったので、現状はまだ利用難しいですね。推奨バージョンとして使えるようになったらぜひお試しください！
→推奨バージョン：3.24083.14で使えるようになっていました！ それでは！
関連記事
モダンコントロール関連の公式ブログリンク集：
モダンコントロール 公式ブログの更新 履歴ページ
はじめに 本ページはPower Appsの公式ブログでモダンコントロールの更新について、1～2か月に一度のペースで更新されている公式ブログのリンク集です。先月更新した内容や今後の予定などが掲載されています。 モダンコントロールの更新があった場合に個別に記事にしていたりしますが、更新頻度も高く...
タブリスト関連：
モダンコントロール タブリストがかなりイケてる！（フライアウトメニューなど）
はじめに 今回はモダンコントロールで追加されたタブリスト（Tablist）を使った実装についてご紹介します。追加された当初にPower Apps 界隈では超有名人のドラーニさんが動画でフライアウトメニューとしての活用を紹介されており、すぐに飛びつきました！自分は現時点で一番好きなモダンコント...
モダン関連：
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント