🖼️ App Theming

Visuele herkenbaarheid van DEV, TST, ACC en PRD omgevingen.

← Terug naar Develop

Introductie

Deze werkinstructie beschrijft hoe de visuele weergave van een model-driven app binnen het Power Platform kan worden aangepast per omgeving (DEV / TST / ACC / PRD).

De focus ligt op het instellen van:

  • de kleur van de applicatie-header (ribbon topbar)

  • het logo van de applicatie

Dit wordt gerealiseerd met behulp van:

  • de setting OverrideAppHeaderColor

  • een XML-webresource per omgeving

  • een image-webresource (logo)

Door per omgeving onderscheidende theming toe te passen ontstaat directe visuele herkenning en wordt de kans op fouten tussen omgevingen (bijv. DEV vs PRD) verkleind.

Deze aanpak is geschikt voor:

  • moderne (Fluent / “new look”) model-driven apps

  • organisaties die per omgeving duidelijke visuele verschillen willen toepassen

  • scenario’s waarin OTAP-omgevingen expliciet herkenbaar moeten zijn

Stappen

Voer de onderstaande stappen uit om het theme succesvol toe te passen:

  1. Aanmaken van een solution met componenten

  2. Configureren van CRM-instellingen

  3. Aanmaken en publiceren van het theme

1. Solution

Maak een solution met de naam Theme.

Voorbeeld
Theme screenshot

Aan deze solution worden de volgende componenten toegevoegd:

  • XML-webresource

  • Image-webresource

  • Setting


XML-webresource

Maak per omgeving (DEV / TST / ACC / PRD) een XML-webresource aan:

  • File type: XML

  • Name: customer_themes/CustomerACC.xml

  • Display name: customer_themes/CustomerACC.xml

  • Description: Centralized XML-based theme configuration resource for Dynamics CRM

  • Language: None

Webresource
Theme screenshot

Structuur van de XML

De XML-webresource bevat de configuratie voor de app-header via de AppHeaderColors tag.

Belangrijkste eigenschappen:

  • Background → achtergrondkleur van de header (verplicht)

  • Foreground → tekstkleur (optioneel, anders automatisch bepaald)

  • BackgroundHover → hover-kleur van knoppen

  • ForegroundHover → hover-tekstkleur

  • BackgroundPressed → kleur bij klikken

  • ForegroundPressed → tekstkleur bij klikken

  • BackgroundSelected → kleur bij selectie

  • ForegroundSelected → tekstkleur bij selectie

Een XML-webresource wordt als volgt opgebouwd:

XML
Theme screenshot

Image

Voeg een image-webresource toe die wordt weergegeven in de ribbon:

  • File type: PNG

  • Name: customer_images/CustomerLogo.png

  • Display name: customer_images/CustomerLogo.png

  • Description: Branding logo for use within the CRM user interface

  • Language: None

Logo
Theme screenshot

2. CRM configuratie

Na installatie van de solution dienen de volgende instellingen per omgeving te worden aangepast:

Wijzigen setting

Pas de Microsoft setting OverrideAppHeaderColor aan per omgeving (DEV / TST / ACC / PRD).

Deze setting zorgt ervoor dat de XML-configuratie wordt toegepast op de UI.

Setting
Theme screenshot

<| Theme screenshot |


3. Theme

Navigeer in CRM naar: Customizations → Themes

Theme screenshot

Maak een nieuw theme aan:

  • Theme Name: Customer Theme

  • Logo: customer_images/CustomerLogo.png

  • Logo Tooltip: Customized for a better user experience

Theme
Theme screenshot

Publiceer vervolgens het theme zodat wijzigingen actief worden.

Publish theme
Theme screenshot

Samenvatting

Met deze aanpak kan per omgeving een unieke visuele identificatie worden toegepast binnen Dynamics 365.

Dit zorgt voor:

  • duidelijke herkenbaarheid van omgevingen (DEV / TST / ACC / PRD)

  • minder risico op fouten tijdens development en beheer

  • consistente branding binnen het platform

✅ Deze werkwijze ondersteunt veilige en herkenbare deployment en beheer binnen het Dataverse landschap.