Moderne thema's gebruiken

Gebruikers van modelgestuurde apps met de moderne, vernieuwde look voor modelgestuurde apps krijgen een bijgewerkte stijl aangeboden die is afgestemd op het Microsoft Fluent 2-ontwerpsysteem. Omdat deze moderne, vernieuwde look wordt geleverd met een nieuw themasysteem, worden klassieke thema's niet gerespecteerd. Makers kunnen echter de kleuren aanpassen die door de app-header worden gebruikt voor gebruikers die de moderne, vernieuwde look hebben ingeschakeld. In dit artikel leert u welke stijloverschrijvingen beschikbaar zijn met de moderne, vernieuwde look en hoe u deze kunt implementeren voor uw organisatie.

Notitie

• Moderne thema's ondersteunen momenteel alleen het aanpassen van de app-header. Andere aanpassingen, zoals het aanpassen van het besturingselement bedrijfsprocesstroom, zijn niet beschikbaar.
• Om moderne thema's te laten werken, moet de modelgestuurde app het Nieuwe uiterlijk gebruiken. Meer informatie: Moderne, vernieuwde vormgeving voor modelgestuurde apps

De kleuren van de app-header wijzigen

Met de moderne, vernieuwde look ingeschakeld in de app kunnen makers de kleuren die door de app-header worden gebruikt, aanpassen aan de huisstijl van hun organisatie. Om dit te bereiken, kapselt u de gewenste kleuren in een XML-resource in, gebruikt u een app-instelling om naar deze webresource te verwijzen en controleert u vervolgens of de kleurwijzigingen overeenkomen met de verwachtingen.

Notitie

Deze functionaliteit is beschikbaar in build 9.2.23094 of een hogere versie.

Overzicht van de XML-resource die moet worden gebruikt voor app-headerkleuren

De eerste stap bij het wijzigen van de app-headerstijl is het maken van een XML-bestand met uw verschillende kleurselecties. Later maakt u een XML-webresource met een of meer van de volgende kenmerken gedefinieerd in een AppHeaderColors-tag.

• Background: de achtergrondkleur van de app-header. Dit element moet worden gedefinieerd voordat wijzigingen van kracht worden.
• Foreground: de tekstkleur van de app-header. Als dit niet is opgegeven, probeert het systeem een geschikte kleur te berekenen die voldoende contrast biedt met de opgegeven achtergrondkleur.
• BackgroundHover: de achtergrondkleur van knoppen in de app-header wanneer deze worden aangewezen. Als er geen waarde is opgegeven, berekent het systeem een kleur op basis van de achtergrondkleur.
• ForegroundHover: de tekstgrondkleur van knoppen in de app-header wanneer deze worden aangewezen. Als geen waarde is opgegeven, probeert het systeem een geschikte kleur te berekenen die voldoende contrast biedt met de backgroundHover-kleur.
• BackgroundPressed: de achtergrondkleur van knoppen in de app-header wanneer hierop wordt geklikt. De standaardlogica is hetzelfde als backgroundHover.
• ForegroundPressed: de tekstkleur van knoppen in de app-header wanneer hierop wordt geklikt. De standaardlogica is hetzelfde als foregroundHover.
• BackgroundSelected: de achtergrondkleur van knoppen in de app-header wanneer deze worden geselecteerd. De standaardlogica is hetzelfde als backgroundHover.
• ForegroundSelected: de tekstkleur van knoppen in de app-header wanneer deze worden geselecteerd. De standaardlogica is hetzelfde als backgroundHover.

Voorbeeld-XML voor een modern thema

Deze XML specificeert bijvoorbeeld een groene achtergrondkleur voor de app-header met witte tekst, met donkerdere achtergrondkleuren voor de verschillende interactiestatussen voor knoppen. Voor een optimale bruikbaarheid raden wij aan om voor elke status verschillende kleurwaarden op te geven.

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

De webresource maken

1. Gebruik een tekst- of XML-editor om de XML op te slaan die wordt gebruikt om de webresource te maken. Voorbeeld-XML voor een modern thema
2. Aanmeldenbij Power Apps.
3. Selecteer Oplossingen in het linkernavigatiedeelvenster en maak vervolgens een nieuwe oplossing.
4. Selecteer Nieuw > Meer > Webresource.
5. Voer in het eigenschappenvenster van de nieuwe webresource de volgende waarden in:
   • Weergavenaam: voer een weergavenaam in, zoals XML voor modern thema.
   • Naam. Voer de unieke naam voor de webresource in.
   • Typ: Gegevens (XML)
6. Selecteer Bestand kiezen, blader naar en selecteer vervolgens het XML-bestand dat u eerder met het thema heeft gemaakt.
7. Selecteer Save. U publiceert deze aanpassing met de stappen in de volgende sectie.

Aangepaste app-headerkleuren toepassen op apps in uw omgeving

Nadat u uw kleuren hebt geselecteerd en de webresource hebt gemaakt, volgt u deze stappen om deze app-headeropmaak in te schakelen voor alle apps in uw omgeving waarvoor het Nieuwe uiterlijk is ingeschakeld.

1. Selecteer in de oplossing die u hebt gebruikt om de webresource te maken, de optie Bestaande toevoegen > Meer > Instelling.
2. Typ Overschrijven in het vak Zoeken en selecteer Kleur app-koptekst overschrijven, selecteer Volgende en selecteer daarna Toevoegen.
3. Selecteer in de oplossing de optie Kleur app-koptekst overschrijven en selecteer vervolgens Bewerken op de opdrachtbalk.
4. Selecteer in het rechter eigenschappenvenster Kleur van app-koptekst overschrijven de optie Omgevingswaarde instellen en voer de unieke naam in van de webresource die u eerder hebt gemaakt. Zorg ervoor dat u het voorvoegsel voor de uitgever toevoegt voor de webresource en geen aanhalingstekens gebruikt. De naam kan bijvoorbeeld worden weergegeven als contoso_xmlfor-modern-theme zoals in dit voorbeeld.
5. Selecteer Save.
6. Selecteer Alle aanpassingen publiceren op de opdrachtbalk. (Deze opdracht verschijnt als er geen onderdelen in de oplossing zijn geselecteerd).

Met de voorbeeldkleuren zou de app-header er als volgt uit moeten zien wanneer u de app gebruikt (mogelijk moet u het browsertabblad vernieuwen).

Nieuwe app-headerkleuren verifiëren

Nadat u de kleuren van uw nieuwe app-header hebt gepubliceerd, wilt u de visuele weergave van de app-header valideren, inclusief alle knopstatussen, om er zeker van te zijn dat alles wordt weergegeven zoals u verwacht en dat er voldoende contrastverhoudingen zijn voor toegankelijkheid. U moet de volgende kleurkeuzes verifiëren:

• De gewenste kleuren worden weergegeven voor de app-header in rust en voor elke knopinteractiestatus.
• Er is een contrastverhouding van minimaal 4,5:1 tussen de voorgrond- en achtergrondkleuren voor de ruststatus en elke knopinteractiestatus.

Zie ook

Moderne vernieuwde vormgeving

Notitie

Laat ons uw taalvoorkeuren voor documentatie weten! Beantwoord een korte enquête. (houd er rekening mee dat deze in het Engels is)

De enquête duurt ongeveer zeven minuten. Er worden geen persoonlijke gegevens verzameld (privacyverklaring).