Verwenden von modernen Themen in modellgesteuerten Apps

Benutzer von modellgesteuerten Apps, die das moderne, aufgefrischte Erscheinungsbild aktiviert haben, erleben eine aktualisierte Gestaltung, die mit dem Microsoft Fluent 2-Designsystem übereinstimmt. Da dieser moderne aktualisierte Look mit einem neuen Designsystem versehen ist, wird das klassische Design nicht berücksichtigt; Entwickler können jedoch die farben ändern, die von der App verwendet werden, um ihre Organisationsbranding für Benutzer auszurichten, die das moderne, aktualisierte Aussehen aktiviert haben. In diesem Artikel erfahren Sie mehr über die Designüberschreibungen, die mit dem modernen, aufgefrischten Design möglich sind, und wie Sie diese für Ihr Unternehmen implementieren können.

Ändern des App-Themes

Mit aktiviertem modernen, aktualisierten Aussehen in der App können Entwickler ein benutzerdefiniertes Design erstellen, das ihnen hilft, sich an ihr Unternehmensbranding auszurichten. Mit einem benutzerdefinierten Design können Sie die App-Kopfzeile, Links, Nachschlagevorgänge, primäre Schaltflächen, aktive Registerkartenindikatoren, Zeilenauswahl und Hovereffekte ändern. Mit dem benutzerdefinierten Design können Sie auch die Schriftart ändern, die in der Anwendung verwendet wird. Dazu kapseln Sie die gewünschten Designinformationen in eine XML-Ressource, verwenden eine App-Einstellung, um auf diese Webressource zu verweisen, und überprüfen Sie dann, ob das neue moderne Design Ihren Erwartungen entspricht.

Übersicht über die XML-Ressource des benutzerdefinierten Themes

Der erste Schritt zum Erstellen eines benutzerdefinierten modernen Designs besteht darin, eine XML-Datei mit den gewünschten Designparametern zu erstellen, wobei mindestens eins der folgenden Attribute innerhalb eines CustomTheme Tags definiert ist.

• BasePaletteColor – Die Ausgangsfarbe (HEX-Code), die als Grundlage zum Generieren einer 16-Slot-Farbpalette für das Design verwendet wird.
• LockPrimary – Ein boolescher Wert, der bestimmt, wie die ausgewählte Ausgangsfarbe verwendet wird, um die 16-Slot-Farbpalette zu generieren.
  • False (Standard): Die Palette ist für die Barrierefreiheit optimiert, garantiert jedoch nicht, dass die Startfarbe in einem Steckplatz der generierten Palette angezeigt wird. Dies ist die Standardeinstellung. Verwenden Sie den Fluent-Theme-Generator, um eine Vorschau der generierten Palette basierend auf Ihren Auswahlmöglichkeiten für basePaletteColor, vibrancy und hueTorsion zu sehen.
  • True: Die Ausgangsfarbe wird im primären (mittleren) Steckplatz der Palette platziert. Die restlichen Farben werden erzeugt, indem die Farben auf der einen Seite schrittweise heller und auf der anderen Seite dunkler gemacht werden. Die generierte Palette erfüllt möglicherweise die Anforderungen an die Barrierefreiheit für das Kontrastverhältnis nicht.
• Font – Die Schriftart für Ihr benutzerdefiniertes Design. Die Schriftart, die das benutzerdefinierte Design rendert, hängt von der Fähigkeit des Browsers und des Zielcomputers ab, diese Schriftart anzuzeigen.
• Vibrancy – Ein optionaler Parameter, der die Gedämpftheit oder Helligkeit der Palette beeinflusst, insbesondere bei den helleren Farben. Die zulässigen Werte liegen zwischen -100 und 100, wobei der Standardwert 0 ist. Diese Option gilt nur, wenn lockPrimary="true".
• HueTorsion – Ein optionaler Parameter, der sich auf den Farbton, die Schattierung oder den Ton der Palette auswirkt, insbesondere die helleren Farben. Die zulässigen Werte liegen zwischen -100 und 100, wobei der Standardwert 0 ist. Diese Option gilt nur, wenn lockPrimary="true".
• LogoWebResource – Der logische Name der Bildwebressource, die als Logo in der App-Kopfzeile verwendet werden soll. Logos, die zu groß sind, werden nicht angezeigt. Die empfohlene Bildgröße beträgt 156 Pixel breit × 48 Pixel hoch.
• LogoTooltip – Der QuickInfo-Text, der angezeigt wird, wenn ein Benutzer auf das App-Logo zeigt. Wird standardmäßig auf Dynamics 365 festgelegt, falls nicht angegeben.

Überschreibe die Palette

Das Überschreiben einzelner Slots in der Designpalette bietet dem Ersteller volle Kontrolle über die Steckplatzfarben, was besonders nützlich ist, wenn zusätzliche Änderungen über die oben genannten Standarddesignparameter hinaus erforderlich sind. Um einen bestimmten Steckplatz außer Kraft zu setzen, weisen Sie dem gewünschten Steckplatz anhand seines Namens einen Wert zu. Sie können z. B. den HEX-Code für darker70, primary oder lighter10 angeben, um das Erscheinungsbild genau auf Ihre Vorlieben anzupassen. Durch festlegen von Werten für alle 16 Steckplätze werden alle im vorherigen Abschnitt beschriebenen Palettenoptionen vollständig außer Kraft gesetzt, sodass ein stark angepasstes und eindeutiges Farbschema möglich ist.

Die Slotnamen für die Palette von dunkelster bis hellster sind: darker70, , darker60,…<> , darker10, primarylighter10, lighter20, . …lighter80. Im Fluent-Thema-Designer erfahren Sie, wie diese Slots im Allgemeinen in Fluent-Steuerelementen verwendet werden.

Beispiel-XML für ein benutzerdefiniertes Design

Als Beispiel gibt dieses XML ein benutzerdefiniertes Design an, das grün mit einer anderen Schriftart und einem benutzerdefinierten Logo ist.

<CustomTheme 
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
    logoWebResource="contoso_company-logo"
    logoTooltip="Contoso"
/>

Dieses XML gibt ein benutzerdefiniertes Design mithilfe des Algorithmus zur alternativen Palettengenerierung mit einer Überschreibung für einen einzelnen Slot an.

<CustomTheme 
    basePaletteColor="#00FF00"
    lockPrimary="false"
    font="'GreatVibes', cursive"

    lighter70="#FFFFFF"
/>

Ändern der App-Kopfzeilenfarben

Entwickler können die Formatierung des App-Headers anpassen, um vom App-Design abzuweichen. Um diese Anpassungen vorzunehmen, erweitern Sie den XML-Code, der für das benutzerdefinierte moderne Design erstellt wurde, indem Sie ein oder mehrere der folgenden Attribute innerhalb eines AppHeaderColors Tags hinzufügen.

• Background – Die Hintergrundfarbe des App-Headers. Dieses Element muss definiert werden, damit änderungen wirksam werden.
• Foreground – Die Textfarbe des App-Headers. Wenn dies nicht angegeben ist, versucht das System, eine geeignete Farbe zu berechnen, die ausreichend Kontrast zur bereitgestellten Hintergrundfarbe aufweist.
• BackgroundHover – Die Hintergrundfarbe von Schaltflächen in der App-Kopfzeile, wenn der Mauszeiger darüber fährt. Wenn kein Wert angegeben ist, berechnet das System eine Farbe basierend auf der Hintergrundfarbe.
• ForegroundHover – Die Textfarbe von Schaltflächen in der App-Kopfzeile, wenn sie darüber bewegt werden. Wenn kein Wert angegeben ist, versucht das System, eine geeignete Farbe zu berechnen, die über ausreichenden Kontrast zur backgroundHover Farbe verfügt.
• BackgroundPressed – Die Hintergrundfarbe von Schaltflächen in der App-Kopfzeile, wenn sie gedrückt werden. Die Standardlogik ist identisch mit backgroundHover.
• ForegroundPressed – Die Textfarbe von Schaltflächen auf der App-Kopfzeile, wenn sie gedrückt werden. Die Standardlogik ist identisch mit foregroundHover.
• BackgroundSelected – Die Hintergrundfarbe von Schaltflächen in der App-Kopfzeile, wenn sie ausgewählt sind. Die Standardlogik ist identisch mit backgroundHover.
• ForegroundSelected – Die Textfarbe von Schaltflächen in der App-Kopfzeile, wenn sie ausgewählt sind. Die Standardlogik ist identisch mit backgroundHover.

Beispiel-XML für ein modernes Design

In diesem XML-Code wird beispielsweise das grüne benutzerdefinierte Design mit einem schwarzen App-Header erweitert. Für eine optimale Benutzerfreundlichkeit empfehlen wir, für jeden Interaktionszustand unterschiedliche Farbwerte anzugeben.

<CustomTheme
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
>  
  <AppHeaderColors
    background="#000000" 
    foreground="#FFFFFF" 
    backgroundHover="#313131" 
    foregroundHover="#FFFFFF"
    backgroundPressed="#494949"
    foregroundPressed="#FFFFFF"
    backgroundSelected="#717171" 
    foregroundSelected="#FFFFFF"  
  />
</CustomTheme>

Erstellen der Webressource

1. Speichern Sie mit einem Text- oder XML-Editor den XML-Code, der zum Erstellen der Webressource verwendet wird. Beispiel-XML für ein modernes Design

2. Melden Sie sich bei Power Apps an.

3. Wählen Sie im linken Navigationsbereich Lösungen aus, und erstellen Sie dann eine neue Lösung.

4. Wählen Sie Neu>Mehr>Webressource.

5. Wählen Sie "Datei auswählen", navigieren Sie zu der XML-Textdatei, die Sie zuvor erstellt haben.

6. Geben Sie im Eigenschaftenbereich "Neue Webressource " die folgenden Werte ein:

   • Anzeigename: Geben Sie einen Anzeigenamen ein, z. B. grünes benutzerdefiniertes Design.
   • Name. Akzeptieren Sie den automatisch generierten namen oder geben Sie einen eindeutigen Namen für die Webressource ein.
   • Typ: Daten (XML)

7. Wählen Sie Speichern. Sie veröffentlichen diese Anpassung mit den Schritten im nächsten Abschnitt.

Anwenden des benutzerdefinierten Designs auf Apps in Ihrer Umgebung

Nachdem Sie Ihre Farben ausgewählt und die Webressource erstellt haben, führen Sie die folgenden Schritte aus, um dieses App-Headerformat für alle Apps in Ihrer Umgebung zu aktivieren, die das neue Aussehen aktiviert haben.

1. Wählen Sie in der Lösung, die Sie zum Erstellen der Webressource verwendet haben, Vorhandene hinzufügen>Mehr>Einstellung aus.
2. Geben Sie benutzerdefiniertes Design in das Suchfeld ein, wählen Sie "Benutzerdefinierte Designdefinition" aus, wählen Sie "Weiter" und dann "Hinzufügen" aus.
3. Wählen Sie in der Lösung " Benutzerdefinierte Designdefinition" und dann " Bearbeiten" auf der Befehlsleiste aus.
4. Wählen Sie im eigenschaftenbereich "Benutzerdefinierte Designdefinition bearbeiten" unter "Umgebungswert festlegen" den Wert "Neue Umgebung" aus, und geben Sie den eindeutigen Namen Ihrer zuvor erstellten Webressource ein (beachten Sie die Spalte "Name" in der Lösung für den eindeutigen Namen). Entfernen Sie die doppelten Anführungszeichen, und stellen Sie sicher, dass Sie das Herausgeberpräfix für die Webressource hinzufügen. Beispielsweise kann der Name wie in diesem Beispiel als contoso_green benutzerdefiniertes Design angezeigt werden.
5. Wählen Sie Speichern.
6. Wählen Sie "Einstellungen" im linken Bereich "Objekte " aus, und wählen Sie dann "Alle Anpassungen auf der Befehlsleiste veröffentlichen" aus. (Dieser Befehl wird angezeigt, wenn keine Komponenten in der Lösung ausgewählt sind).

Benutzerdefinierte modellgesteuerte App mit der erweiterten grünen Themenvorlage.

Überprüfen neuer App-Kopfzeilenfarben

Validieren Sie nach dem Veröffentlichen des benutzerdefinierten Designs die Anwendung des Designs in der App, um sicherzustellen, dass alles wie erwartet erscheint.

Nur die Farben der App-Kopfzeile ändern

Entwickler können sich dafür entscheiden, nur die Gestaltung des App-Headers anzupassen, um vom Standard-App-Design abzuweichen. Führen Sie dazu die folgenden Schritte aus:

1. Erstellen Sie eine XML-Datei mit ihren verschiedenen Farbauswahlen, wobei ein oder mehrere Attribute aus der App-Kopfzeilenfarbe einen Abschnitt außer Kraft setzen , der innerhalb eines AppHeaderColors Tags definiert ist.
2. Erstellen Sie eine Webressource mit demselben Prozess, der für benutzerdefinierte Designs beschrieben wird, aber achten Sie darauf, der XML-Ressource einen geeigneten aussagekräftigen Anzeigenamen zuzuweisen, z. B. green app header XML.
3. Wenden Sie benutzerdefinierte App-Kopfzeilenfarben auf Apps in Ihrer Umgebung an, indem Sie diese Webressource der Umgebung oder App in der Einstellung App-Kopfzeilenfarbe außer Kraft setzen zuweisen. Führen Sie die Schritte unter Anwenden benutzerdefinierter Designs auf Ihre Umgebung aus und verwenden Sie stattdessen die Einstellung "App-Kopfzeilenfarbe überschreiben".

   Hinweis

   Die Farbeinstellung "App-Kopfzeile überschreiben" wird ignoriert, wenn die Einstellung für die Benutzerdefinierte Designdefinition vorhanden ist.

4. Überprüfen Sie die visuellen benutzerdefinierten App-Header, einschließlich aller Schaltflächenzustände, um sicherzustellen, dass alles wie erwartet angezeigt wird und ausreichend Kontrastverhältnisse für die Barrierefreiheit vorhanden sind. Überprüfen Sie die folgenden Farboptionen:
   • Die gewünschten Farben werden für die ruhende App-Kopfzeile und für jeden Schaltflächeninteraktionszustand angezeigt.
   • Es gibt mindestens ein Kontrastverhältnis von 4,5:1 zwischen Vordergrund- und Hintergrundfarben für den Ruhezustand und jeden Interaktionszustand der Schaltfläche.

Beispiel-XML für die Überschreibung der App-Kopfzeilenfarbe

In diesem XML-Code wird beispielsweise eine grüne Hintergrundfarbe für den App-Header mit weißem Text mit dunkleren Hintergrundfarben für die verschiedenen Schaltflächeninteraktionszustände angegeben. Für eine optimale Benutzerfreundlichkeit empfehlen wir, für jeden Zustand unterschiedliche Farbwerte anzugeben.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Wenn Sie die App verwenden, sieht die Kopfzeile der App wie die folgende Abbildung aus. Möglicherweise müssen Sie den Browser-Tab aktualisieren, um das Theme anzuzeigen.

Siehe auch

Klassisches Design

Modernes aktualisiertes Aussehen