Power Apps で選択肢列の値を元に色を変更する方法

はじめに

今回は、よく聞かれる、Power Apps で選択肢列の値を元に色を変更する方法について、以下のような働き方、出社予定を共有するアプリをベースに紹介します。

※弊社内では、主に出社の予定を共有して同僚との対面でのコミュニケーションを促進させる目的で、
　実際にこのアプリを利用しています

働き方の設定について

Dataverse または、Dataverse for Teams で利用することを想定しているアプリのため、働き方については、以下のように選択肢列で定義しております。
※組織の働き方に応じて必要に応じて変更します

働き方に応じた色の変更について

それでは、働き方 (選択肢列) の値に応じて色を変更します。

アプリ内で、働き方 (選択肢列) の値に応じて色を変更しているコントロール (今回はラベルコントロールを利用しています) を選択します。
そして、コントロールの塗りつぶしを意味する [Fill]プロパティを選択します。
※新規にアプリを作る場合は、対象となるコントロールの[Fill]プロパティを選択します。

[Fill]プロパティの設定を以下のように設定します。

Switch(
    Text(ThisItem.cr841_plan),
    "出社",
    gblAccentColor,
    "WFH",
    gblMainColor,
    "外出",
    gblMainColor,
    "休暇",
    gblBaseColorGray,
    "午前休暇",
    gblBaseColorGray,
    "午後休暇",
    gblBaseColorGray,
    gblBaseColorLightGray
)

以下の部分が、働き方 (選択肢) の列を指しています。こちらは、作成するアプリの列名に応じて変更ください。

Text(ThisItem.cr841_plan)

ギャラリー内でデータソース内の列名を指定する際は、ThisItem.列名 といった表記になります。

Switch 関数については以下の情報を参考にしていただければと思いますが、今回のように、式の結果が多岐に渡る場合によく利用します。
If 文も使えなくはないですが、例えば、今回のケースでは、働き方の種類は 6 種類ほどあるため、If で書こうとすると構文が冗長になり、また、混乱してしまうと思います。

色の設定について、今回は、アプリで色に統一感を持たせるために以下のように変数定義したものを使っています。

Set(
        gblMainColor,
        RGBA(
            75,
            203,
            146,
            1
        )
    )

もちろん、以下のいずれかの方法で定義いただいても問題ないです。

最後に、必要に応じて、文字の色を[Color]プロパティも同様の書き方で変更します。

上記のような方法で、選択肢列の値に応じて色を変更し、アプリの見た目をリッチにすることができます。