Microsoft Dataverse for Teams利用時におけるFluent UIコントロールの概要とコントロールを変更する方法

Microsoft Dataverse for Teamsを使うとTeams内でPower Appsを使ったアプリケーションを作成できますが、従来のPower Appsとは異なるコントロールが採用されています。

従来のものを使い慣れている方の中には少し使いづらいと感じた方も多いのではないでしょうか。

今回はそんなDataverse for teamsで使用されているFluent UIコントロールについての概要と、コントロールを変更する方法についてご紹介します。

コントロールとは

そもそもコントロールとは、キャンバスアプリを作成する際に挿入するラベルやテキストボックス、ボタンなどのアイテムのことを指します。

コントロールはPower Appsの編集画面で挿入タブから選択することができます。

Dataverse for teamsにおけるPower Appsの編集画面

また、各コントロールにはプロパティというものを設定することができます。

プロパティとは、コントロールの見た目や動作などを設定できる項目のことを指します。

全てのコントロールに共通するプロパティもあれば、1つのコントロールに固有のプロパティもあります。

全てのコントロールとプロパティの種類は公式のドキュメントにまとめられていますので、以下のリンクをご参照ください。

キャンバス アプリのコントロールとプロパティ - Power Apps | Microsoft Learn

Fluent UIとClassic UIの違い

Dataverse for teamsで使用されているコントロールは、Fluent UIコントロールと呼ばれています。

一方、従来のコントロールはクラシックコントロールと呼ばれています。

Fluent UIは、Teamsでアプリを作成するのにより適したコントロールとして新たに構築されたものとなっています。クラシックコントロールから変更があったコントロールは、ボタンやチェック ボックスなどの全10項目です。

では具体的にどこが違うのか、ボタンコントロールを例に見てみましょう。

クラシックコントロールとFluent UIコントロールでボタンを追加してみます。

クラシックコントロール

Fluent UIコントロール

見た目はほとんど変わりませんが、左上の表示されるプロパティが異なります。

クラシックコントロールではOnSelectが表示されているのに対し、Fluent UIコントロールではButtonTypeというプロパティが表示されました。

このButtonTypeというものが新しく追加されたプロパティです。

Fluent UIコントロールではクラシックコントロールでの機能に加え、ボタンの種類を変更できるようになっています。

ボタンの種類にはPrimaryとStandardの2種類があり、既定ではPrimaryとなっていました。これをStandardに変更すると以下のようになります。

塗りつぶしの色とテキストの色が変わりました。

ButtonTypeは、機能や動作は特に変わらず、見た目を変更するためのプロパティのようです。

他にもプロパティ名等が微妙に変わっていますが、大きな変更点はここだけになるかと思います。

その他のコントロールについてはこちらをご参照ください。

※ Microsoft Teams の Power Apps アプリで Fluent UI コントロールを使用する - Power Apps | Microsoft Learn

コントロールの変更方法

Dataverse for teamsで使用できるFluent UIコントロールですが、さらに機能がアップデートされたモダンコントロールに変更することが可能です。\

アプリの編集画面で画面上部の「設定」タブから、「近日公開の機能」>「プレビュー」の順に開くと、「モダンコントロールとモダンテーマ」という項目があります。

これをオンにすると、以下の画像左部のように挿入タブの上部に"クラシック""モダン"という表示が追加されました。

"クラシック"と表記されていますが、ここでは"クラシック"の方がFluent UIコントロールを指しています。

例えば先程説明したボタンをモダンコントロールで追加してみると、画像左部にあるようにボタンの種類が増えていることがわかります。

また、プロパティ名も"Appearance"に変更されていました。

モダンコントロールはプレビュー機能のためまだ情報は少ないですが、以下の公式のドキュメントに説明がありますのでご参照ください。

キャンバス アプリのモダン コントロールの概要 - Power Apps | Microsoft Learn

また、従来のPower Appsでも同様の手順でモダンコントロールを使用することが可能ですが、その場合の"クラシック"はこれまで説明してきたクラシックコントロールのことを指します。

表現が紛らわしいですが、モダンコントロールを使用する際の"クラシック"は、それぞれの環境における既定のコントロールのことを指しているようです。

まとめ

今回はMicrosoft Dataverse for teamsのFluent UIコントロールについてご紹介しました。

従来のPower Appsと比べるとプロパティ名等が変わっているため初めは難しく感じるかもしれませんが、ボタンの種類を選択することでデザインを簡単に変えられるなど便利な機能が追加されていますので、ぜひ使ってみて下さい。

執筆担当者プロフィール
田中 美羽

田中 美羽(日本ビジネスシステムズ株式会社)

Csol本部MW5部所属。主にPower Platformでの開発等を行っています。

担当記事一覧