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

[Dieses Thema ist eine Vorabdokumentation und kann geändert werden.]

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 an einer Stelle 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 an der primären (mittleren) Stelle 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 vom benutzerdefinierten Design gerendert wird, 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".

Überschreiben der 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 diese XML ein benutzerdefiniertes Design an, das grün mit einer anderen Schriftart ist.

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

Dieses XML gibt ein benutzerdefiniertes Design mithilfe des Algorithmus zur alternativen Palettengenerierung mit einer Überschreibung für eine einzelne Stelle 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. Dies kann durch Erweitern des XML-Codes, das für das benutzerdefinierte moderne Design erstellt wurde, mit mindestens einem der folgenden Attribute erweitert werden, die innerhalb eines AppHeaderColors Tags definiert sind.

• 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 aus. 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 aus.
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

Nachdem Sie Ihr benutzerdefiniertes Design veröffentlicht haben, sollten Sie die Anwendung des Designs in der App überprüfen, um sicherzustellen, dass alles wie erwartet angezeigt wird.

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

   Jede Konfiguration, die in der App-Kopfzeilenfarbe überschreiben Einstellung definiert ist, wird ignoriert, wenn die Einstellung für das benutzerdefinierte Thema festgelegt 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. Sie sollten die folgenden Farboptionen überprüfen:
   • 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"
/>

Bei dieser Konfiguration sollte der App-Header wie folgt aussehen, wenn Sie die App starten. Möglicherweise müssen Sie den Browser-Tab aktualisieren, um das Theme anzuzeigen.

Siehe auch

Klassisches Design

Modernes aktualisiertes Aussehen