はじめに
今回はモダンコントロールの「バッジ」を使った簡単なTipsをご紹介します。こちらはすでにGA済みのコントロールです。
最近自身のイベントでやっている自動生成アプリのカスタマイズシリーズでもちらっと実装しています。
従来でもクラシックのボタンなどで角丸（円形）にしてビューモードで作るなどは簡単に出来ましたが、
こちらはバッジ専用のコントロールというイメージです。
自動生成アプリ作成シリーズはこちらから(YouTube動画あります）
はじめに Daiさんと一緒に主催をしているコミュニティ「奇想天外ビリビリ☆Power Apps同好会」で、7/18から週一のペースで、ヨウセイ登壇の「 ナレッジ共有アプリを作ってみる ~自動生成アプリをカスタマイズから始めよう~」の登壇イベントをシリーズで開催しています！今後も適宜こちらのペ...
モダンコントロールとモダンテーマをオンにする
新規作成時は以下の機能をオンにすることでモダンコントロールおよびモダンテーマが使用できるようになります。
設定＞更新 ＞ 新規＞モダンコントロールとモダンテーマ （既定でオフなのでオンにする）
詳細は以下記事に記載していますので、必要に応じてご確認ください。
モダンコントロール モダンテーマの機能オンについて
2023年からキャンバスアプリのモダンコントロールとモダンテーマが順次リリース、更新されています。 その中で本機能をオンにする箇所が変更となったり変更が都度入っています。 他の記事を書く際に都度オンにする方法を載せていたんですが、今後も変更の可能性があるのでこの部分のみ記事にしました。...
モダン バッジ
このコントロールはモダンの中でもかなり早い段階で存在しててGAも早かったですね。
非常にシンプルな内容なので、本当にサクッとバッジ（件数表示用）に使うというイメージかと思います。
ビューモード専用なので動作的なプロパティ（OnSelectやホバーなど）はありません。
一応公式のDocsは以下です
Power Apps でのバッジ コントロール – Power Apps | Microsoft Learn
モダンをオンにしてディスプレイの項目の中に「バッジ」というのがありますので追加してみましょう。
以下のように”AB”とテキストが入った〇型のコントロールが追加されると思います。
このテキスト→コンテンツプロパティを調整して動的に件数表示などに利用できますね。
主なプロパティ
位置やサイズ（幅、高さ）や中の文字の配置（上、真ん中、下寄せ）や左右、中央寄せなどほかのコントロールにもあるプロパティがあります。
カラーは基本、モダンカラーのテーマが反映されますが、個別のカラーを付けることも可能です。
外観は以下4種類のタイプがあります。
- Filled ：Primaryと同様の背景、文字色は白
- Ghost：枠は透明
- OutLine：枠線にテーマが付いて中は白
- Tint：テーマをベースに淡いボーダーや背景、文字色はPrimaryカラー （デフォルト）
種類は以下の3種類
種類として3タイプあります。
- Circular：丸型 →幅や高さ調整で楕円にもできます（デフォルト）
- Square：四角 →四角形です。同様に長方形にもできる
- Rounded：角丸 →角丸です。同様に長方形にもできます
幅、高さ調整で形の調整はある程度可能。個別の色付けも
横のばし（丸形）で説明ラベルとして利用するなども可能ですね。
また、色はテーマカラーがベースですが、個別に色付け（フォントカラー、背景色）も可能です。
ボタンで作る時との違い（ちょっとした点）
上記について、クラシックのボタンコントロールでも以前から同様のものは普通に作れました。
ただクリックする動作は付けたくない場合にビューモードとするんですがその際は枠線が付かない仕様です。
編集モードだと枠線付きますが、指アイコンになってクリック出来るのかな？となるのでそぐわないケースもあります。まあ枠線はなくても問題ないケースの方が多いので大した事ではないですが。
まあサクッと件数表示用や角丸のラベルっぽいのを作ろうとした際などはこちらの方が幾分楽かなーとも思います。（どっちでもいいかなレベルですが💦）
バッジの活用例：ギャラリーなどの件数表示
よく利用するのはギャラリーの今表示されている件数を表示する場合などかなーと。
フィルターあり、なしで表示件数が変わったりするので件数表示はあったほうがユーザーライクです。
普通にテキストラベルでもいいんですが、ちょっとしゃれっ気が出ますよね。
TIPSギャラリーのFilterで委任対応している場合はそれ以上あっても100件ずつの表示（スクロールで次が表示）となるので、その場合は＋マークを追加するなど工夫するのが良いですね。
一旦コレクション格納している場合や委任非対応の場合は全件取って来ているのでそのまま件数表示されます。※この場合データ行数制限丁度（500～2000）だとそれ以上ある可能性を加味する表示をするなどの工夫も
以下、簡単にギャラリー表示している件数をバッジに出している例です。件数が多い想定があれば横長にしておけばＯＫです。
バッジのコンテンツプロパティには以下を指定しています。
Code<ギャラリー名>.AllItemsCount →ギャラリーの件数を表示
※CountRows(<ギャラリー名>)でもいいですが、上記プロパティが結構前に追加されているのでこっちのほうが幾分パフォーマンスが良いと思われます。
お知らせアイコンやいいねアイコンなどの件数表示
よくスマホなどでその項目に何件の表示があるかを示す小さめのバッジを付けてあげる。
よくある機能なのでイメージしやすいですね。以下ではバッジのコンテンツに以下を指定しています。
CodeCountRows(ThisItem.いいね)
→今のアイテムのいいね件数を表示（いいねは複数ユーザー列となっているのでその件数をカウントしている
NOTE※お知らせ未読などの対応をする場合はそういった前提処理やFilterで件数出す必要ありますが、
サンプルではシンプルにレコードごとのいいねの件数を出しています。
おまけ：いいねした人をタブリストのフライアウトメニューで表示
本件とはズレますが、このサンプルではついでにタブリストを小さくしてフライアウトメニューとして
いいねした人の情報（表示名）を表示しています。
スマホレイアウトなど情報エリアが少ないケースではこういった細かいところに手が届いた実装をしたくなりますね。
こちらはタブリストのItemsに以下を入れているだけです。
CodeタブリストのItems：ThisItem.いいね
項目が出ない場合はフィールドの編集からDisplayNameを指定してあげればOKです（Emaiなども可）
その他：テキスト入力を促すラベル用やヘッダー的なテキスト用など
この辺は他にも作り方はいろいろあるのでバッジを使う必要性があるかというと怪しいですが、そういった用途にも使えはします。という感じですね。以下先ほどもご紹介した簡単なサンプルです。
おわりに
今回はモダンコントロールの GA済みのバッジコントロールについて利用用途のサンプルなどご紹介しました。
大したコントロールではないｗのですが、パッと追加できる機能としてはいいかと思います。
もちろんもう少し凝りたい場合はボタンなどでカスタムも可能ですし、手間をかけずにさらっとおしゃれにできるという点では良いかなという感じです。それではー。
関連記事
モダンコントロール関連の公式ブログリンク集：
モダンコントロール 公式ブログの更新 履歴ページ
はじめに 本ページはPower Appsの公式ブログでモダンコントロールの更新について、1～2か月に一度のペースで更新されている公式ブログのリンク集です。先月更新した内容や今後の予定などが掲載されています。 モダンコントロールの更新があった場合に個別に記事にしていたりしますが、更新頻度も高く...
モダンボタン：
はじめに 先日のモダンコントロールアップデートでボタンにアイコンが埋め込みできるようになりました！さらに境界半径も調整出来て好きな形のボタンを作れます。さらにアイコンのみにしちゃうことも可能！ということで今回はモダンコントロールのボタンの新機能についてご紹介します。 NOTE※2024/6月...
モダン関連：
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント