Freigeben über

Moderne Designs verwenden

  • Artikel

Benutzer von modellgesteuerten Apps mit dem aktivierten modernen, aktualisierten Design für modellgesteuerte Apps erfahren ein aktualisiertes Design, das an das Designsystem von Microsoft Fluent 2 angepasst ist. Da dieser moderne, aufgefrischte Look mit einem neuen Designsystem ausgestattet ist, wird klassisches Design nicht berücksichtigt. Allerdings können Ersteller die vom App-Header verwendeten Farben für Benutzer ändern, die das moderne, aktualisierte Erscheinungsbild 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.

Hinweis

  • Moderne Design unterstützen derzeit nur das Anpassen der App-Kopfzeile. Andere Anpassungen wie das Anpassen des Geschäftsprozessfluss-Steuerelements sind nicht verfügbar.
  • Damit moderne Designs funktionieren, muss die modellgesteuerte App das Neue Design verwenden. Weitere Informationen: Modernes, aktualisiertes Design für modellgesteuerte Apps

Die Farben der App-Kopfzeile ändern

Wenn in der App das moderne, aktualisierte Design aktiviert ist, können Erstellende die Farben der App-Kopfzeile ändern, um sie an ihr organisatorisches Branding anzupassen. Kapseln Sie dazu die gewünschten Farben in eine XML-Ressource ein, verwenden Sie eine App-Einstellung, um auf diese Webressource zu verweisen, und überprüfen Sie dann, ob die Farbänderungen den Erwartungen entsprechen.

Hinweis

Diese Funktion ist in Build 9.2.23094 oder einer höheren Version verfügbar.

Übersicht über die XML-Ressource für die Verwendung von App-Kopfzeilen-Farben

Der erste Schritt zum Ändern des App-Kopfzeilen-Designs besteht darin, eine XML-Datei mit Ihren verschiedenen Farbauswahlen zu erstellen. Später erstellen Sie eine XML-Webressource mit einem oder mehreren der folgenden Attribute, die in einem AppHeaderColors-Tag festgelegt sind.

  • Background: Die Hintergrundfarbe der App-Kopfzeile. Dieses Element muss festgelegt werden, damit Änderungen wirksam werden.
  • Foreground: Die Textfarbe der App-Kopfzeile. Wenn diese nicht angegeben ist, versucht das System, eine geeignete Farbe zu berechnen, die einen ausreichenden Kontrast zur bereitgestellten Hintergrundfarbe bietet.
  • BackgroundHover: Die Hintergrundfarbe der Schaltflächen in der App-Kopfzeile, wenn der Mauszeiger darüber bewegt wird. Wenn kein Wert angegeben wird, berechnet das System eine Farbe basierend auf der Hintergrundfarbe.
  • ForegroundHover: Die Textfarbe der Schaltflächen in der App-Kopfzeile, wenn der Mauszeiger darüber bewegt wird. Wenn hier kein Wert angegeben ist, versucht das System, eine geeignete Farbe zu berechnen, die einen ausreichenden Kontrast zur backgroundHover-Farbe bietet.
  • BackgroundPressed: Die Hintergrundfarbe der Schaltflächen in der App-Kopfzeile, wenn sie betätigt werden. Die Standardlogik ist dieselbe wie die backgroundHover-Farbe.
  • ForegroundPressed: Die Textfarbe der Schaltflächen in der App-Kopfzeile, wenn sie betätigt werden. Die Standardlogik ist dieselbe wie die foregroundHover-Farbe.
  • BackgroundSelected: Die Hintergrundfarbe der Schaltflächen in der App-Kopfzeile, wenn sie ausgewählt werden. Die Standardlogik ist dieselbe wie die backgroundHover-Farbe.
  • ForegroundSelected: Die Textfarbe der Schaltflächen in der App-Kopfzeile, wenn sie ausgewählt werden. Die Standardlogik ist dieselbe wie die backgroundHover-Farbe.

Beispiel-XML für ein modernes Design

In diesem Beispiel ist in der XML eine grüne Hintergrundfarbe für die App-Kopfzeile mit weißem Text und dunklere Hintergrundfarben für die verschiedenen Schaltflächeninteraktionszustände festgelegt. Für eine optimale Benutzerfreundlichkeit sollten Sie für jeden Status unterschiedliche Farbwerte angeben.

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

Die Webressource erstellen

  1. Speichern Sie mit einem Text- oder XML-Editor die XML, die 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 Lösungen im linken vertikalen Navigationsbereich und erstellen Sie dann eine Neue Lösung.
  4. Wählen Sie Neu > Mehr > Webressource aus.
  5. Geben Sie im Eigenschaftenbereich „Neue Webressource“ die folgenden Werte ein:
    • Anzeigename: Geben Sie einen Anzeigenamen ein, zum Beispiel XML für modernes Design.
    • Name. Geben Sie den eindeutigen Namen für die Webressource ein.
    • Typ: Daten (XML)
  6. Wählen Sie Datei auswählen aus, navigieren Sie zu der XML-Datei, die Sie zuvor mit dem Design erstellt haben, und wählen Sie sie aus.
  7. Wählen Sie Save (Speichern). Sie veröffentlichen diese Anpassung mit den Schritten im nächsten Abschnitt.

Benutzerdefinierte App-Kopfzeilen-Farben für Apps in Ihrer Umgebung anwenden

Nachdem Sie Ihre Farben ausgewählt und die Webressource erstellt haben, gehen Sie wie folgt vor, um dieses App-Header-Design für alle Apps in Ihrer Umgebung zu aktivieren, bei denen Neues Design aktiviert ist.

  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 Überschreiben im Feld Suchen ein und wählen Sie App-Kopfzeilenfarbe überschreiben, Weiter und dann Hinzufügen au.
  3. Wählen Sie in der Lösung App-Kopfzeilen-Farbe überschreiben und dann Bearbeiten in der Befehlsleiste aus.
  4. Wählen Sie im rechten Eigenschaftenbereich Überschreiben der App-Kopfzeilenfarbe bearbeiten Wert der Umgebung festlegen aus und geben Sie den eindeutigen Namen Ihrer Webressource, die Sie zuvor erstellt haben. Stellen Sie sicher, dass Sie das Herausgeberpräfix für die Webressource hinzufügen und keine Anführungszeichen verwenden. Der Name könnte beispielsweise wie folgt lauten: contoso_xmlfor-modern-theme wie in diesem Beispiel. Umgebungseinstellung für ein Design mit dem eindeutigen Webressourcennamen „contoso_xmlfor-modern-theme“.
  5. Wählen Sie Save (Speichern).
  6. Wählen Sie in der Befehlszeile Alle Anpassungen veröffentlichen aus. (Dieser Befehl wird angezeigt, wenn in der Lösung keine Komponenten ausgewählt sind.)

Mit den Beispielfarben sollte der App-Header beim Abspielen der App so aussehen (möglicherweise müssen Sie die Browser-Registerkarte aktualisieren).
Grüne App-Kopfzeile in einer modellgesteuerten App

Die neuen App-Kopfzeilenfarben überprüfen

Nachdem Sie Ihre neuen App-Kopfzeilenfarben veröffentlicht haben, sollten Sie die visuelle Darstellung der App-Kopfzeile einschließlich aller Schaltflächenzustände überprüfen, um sicherzustellen, dass alles wie erwartet aussieht und die Kontraste für die Barrierefreiheit ausreichen. Sie sollten die folgenden Farbauswahlen überprüfen:

  • Die gewünschten Farben für die App-Kopfzeile im Ruhezustand und für jeden Schaltflächeninteraktionsstatus werden angezeigt.
  • Für den Ruhezustand und jeden Schaltflächeninteraktionszustand gilt ein Kontrastverhältnis zwischen Vordergrund- und Hintergrundfarbe von mindestens 4,5:1.

Siehe auch

Modernes, aktualisiertes Erscheinungsbild

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).