みなさん、こんにちは。
2024年最初の記事は、新デザインでのテーマをカスタマイズです。

テーマのカスタマイズとは

Dynamics 365アプリ （モデル駆動型アプリ）ではデータモデルに基づき、決められたデザインのUIを持つアプリが作成されます。そのため、デザインを変更できる場所が限定されます。その場所とは、アプリ画面上部に表示される【ナビゲーション バー】の色と、その左側に配置された【ロゴ】です。これら設定のことをまとめて【テーマ】といいます。

【テーマ】を変更する主な目的は2つあります。1つが、組織のコーポレートカラーやロゴへの変更です。そしてもう1つが「環境の区別をするため」です。例えば、「開発環境」「ステージング環境」「本番環境」の3つの環境を運用している場合を考えてみましょう。環境が違うので「URL」を見れば区別できますが、毎回読むのは大変ですし、似たURLを見間違う可能性もあります。その場合、下記の例のようにテーマを設定して【色】で環境を区別できるようにします。

【例1 開発環境 オレンジ】

【例2 ステージング環境 青】

【例3 本番環境 既定のテーマ】

新デザインで、テーマのカスタマイズが適用されない

新デザインとは、2023 年リリース サイクル 2 で発表された機能です。執筆時点(2024年1月)では、ナビゲーション バーの【新デザインを試す】ボタンをONにすることで、試すことができます(OFFにすると元に戻ります)。問題は、「新デザインの画面では、テーマのカスタマイズ方法が変わっており、これまでの設定が引き継がれない」ことです。例えばこんな感じです。

【オレンジのテーマ】

【新デザインに切替えると、テーマが適用されず、既定のテーマが適用される】

新デザインに切替えるボタンは、アップデートにより、すべてのユーザーに表示されている状態ですので(設定でボタンを非表示にすることもできます)、エンドユーザーから問合せを受けた方もいるかもしれません。

新デザインでテーマをカスタマイズする方法

前置きが長くなりましたが、ここからが具体的な手順です。マイクロソフト社の公式資料も参考にご確認ください。
最新のテーマを使用する - Power Apps | Microsoft Learn
https://learn.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/modern-theme-overrides

なお、現(旧)デザインの手順では専用の画面で設定する方法は、全く異なる手順のためここでは割愛します。

1.テーマの定義のXMLファイルを作成する

<AppHeaderColors 
background="#F47B30"
foreground="#FFFFFF" 
/>

コード内で、ナビゲーション バーの背景色をオレンジ、テキストを白色に指定しています。

Background – アプリ ヘッダーの背景色
Foreground – アプリ ヘッダーのテキスト色

公式資料には、ボタンの色など他の要素の色を指定するタグも記載されていますが、必須ではありません。指定しない場合は、自動的に適切な色が計算されるそうです。今回は必要最低限の要素だけ指定します。

作成したxmlファイルを保存します。

2.テーマ用のソリューションを作成する
ソリューションを作成しなくても、テーマの設定はできますが、あとで探しやすくするために、ソリューションを作成します。

3.XMLファイルをWebリソースとして登録する
ソリューション内で、XMLファイルをWebリソース(XML)として登録します。

4.設定(パラメーター)をソリューションに追加する

ソリューションに設定【アプリヘッダーの色を上書きする】を追加します。Power Apps (Dataverse)の設定変更として、設定(環境変数のようなもの)をソリューションに追加し設定することで、値を上書きするという方法があり、今後よく使うことが増えそうです。

5.設定の環境の値を設定する
環境の値を設定するの項目に、登録したWebリソースの【名前】を設定します(例:new_crmOrigianlTheme)
 ※登録した、XMLのファイル名ではないです。Webリソースの名前です。
 ※また、【”】で囲む必要もありません。

設定をしたら、保存します。

6.すべてのカスタマイズの公開をします。

7.新デザインの画面で、リロード(Ctrl +F5)をすると、カスタマイズが適用されていることを確認できます。

ロゴは新デザインでも反映される

ロゴについては、今の時点では旧デザインの設定が、新デザインにも反映されます。
新しい設定方法については、またの機会にブログに書こうと思います。

ソリューション移行はできない!?

テーマをソリューション内で管理しているため、ソリューション移行で、テーマの設定を他環境に移行できないか試してみました。
(移行できてしまうと、移行元と移行先の区別がつかなくなり事故の元なので、成功してほしくないのですが)
作成したソリューションが問題だったのか、エラーになりました。

さいごに

以上が、新しいデザインでの、テーマの変更方法に関する説明でした。
お役に立ちましたら幸いです。