Teman i exempelappmallar

Den funktion som är mest intressant för appar är möjligheten att anpassa användargränssnittet efter användarens eller organisationens varumärke och tycke. En strategi för dem ger oss möjlighet att skapa appar som överensstämmer med organisationens varumärke. Ett tema innehåller en samling med stilar som definierar flera design egenskaper för kontroller och komponenter som färger, teckensnitt och kantlinjer.

I den här artikeln lär du dig hur du använder globala variabler för att definiera egenskaper och hur färger och egenskaper kan lätt ändras i hela appen genom att bara uppdatera de globala variablerna.

Titta på det här videoklippet om tema i exempelappmallar:

Förutsättningar

För att kunna slutföra den här lektionen behöver vi kunna skapa appar i Microsoft Teams som är tillgängliga som en del av utvalda Microsoft 365-prenumerationer. Du behöver också ha mallen för exempelapp Milstolpar installerad Microsoft Teams i ditt team. Du kan installera den i ditt team på https://aka.ms/TeamsMilestones.

Definiera en strategi för teman

I det här exemplet får vi se hur globala variabler har använts för att definiera färger och formatmallar för dem i appen Milstolpar. Följande globala variabler har angetts i egenskapen OnVisible för inläsningsskärmen.

• gblAppColors för att definiera färger så att de lätt kan refereras
• gblAppSizes för att definiera olika storlek på teckensnitt för mobilappar och webbappar
• gblAppStyles egenskaper för varje enskild kontroll med hjälp av gblAppColors
• gblThemeDark är inställt på true när Teams-teman är så mörka att alla kontroller anpassar sig efter det mörka temat
• gblThemeHiCo är inställt på true när Teams-temat är hög kontrast, så alla kontroller anpassar sig till den höga kontrasten med hög kontrast

Testa strategi för teman

Två dolda skärmar har definierats för att testa temastrategin:

• Dold administratörsskärm – den här skärmen har två växlingsknappar definierade tglAdmin_DarkMode och tglAdmin_ContrastMode. Den här skärmen hjälper till med snabba tester av mörka och kontrastlägen utan att behöva ändra temat för team för testning

  

• Skärm för dolda kontroller – den här skärmen har varje enskild kontroll med egenskaper konfigurerade med hjälp av gblAppStyles.

  • Hjälper till att testa temaändringar.

  • Gör det lättare att kopiera en viss kontroll och klistra in den på skärmen som krävs så att formeln för kontrollen inte behöver skrivas upprepade gånger.

    

Använda temavariabler för en exempelappmall

1. Om du vill ta del av användningen av tema i appen Milstolpar väljer du Skärmen Projekt i trädvyn, så öppnas skärmen och väljer sedan +Nytt projekt.

2. Välj egenskapen Color för +Nytt projekt.

   Observera att formeln refererar formlerna gblAppStyles > ButtonTransparent > Color från egenskapen OnVisible för inläsningsskärmen.

   Så nu om temat för appen är hög contrast, då färgen som definieras i gblAppColors > HighContrastHyperlinks-formeln används.

3. Ett annat exempel är att titta på knapparna Primär och Sekundär.

   • Markera projektskärmen i redigeraren.

   • Håll ned Alt-tangenten och välj filterikonen på projektskärmen.

     Popup-fönster för filterarbete öppnas. Lägg märke till de två knapparna: Avmarkera och Använd.

     

     Tillämpa är ett exempel på en primär knapp och Rensa är ett exempel på en sekundär knapp.

4. Välj knappen Tillämpa , markera en kantlinje/tjocklek/färgrelaterad egenskap och lägg märke till den angivna formeln.

   

5. Knappen Tillämpa definieras som den primära knappen och använder alla egenskaper som anges på formeln inläsningsskärmen > OnVisible> ButtonPrimary.

   Beroende på temat och färgvariablerna som valts i ButtonPrimary-formeln kommer stilegenskaperna för knappen att uppdateras.

   På samma sätt definieras Rensa som en sekundär knapp och använder alla egenskaper som definieras under gblAppStyles > ButtonSecondary.

   Anteckning

   Ett annat möjligt tillägg till appen är att lägga till Teckensnitt som egenskap, antingen som en variabel som ska användas för alla kontroller, eller en gång per kontroll (som hur de andra egenskaperna definieras separat för primära knappar eller sekundära knappar). Teckensnittet i appen Milstolpar är Segoe UI och det fanns inget behov av att identifiera teckensnittet.

Uppdatera mallen för exempelappen

I det här avsnittet får vi se hur vi kan ändra en egenskap för en viss kontroll och hur kontrollen uppdateras på olika skärmar. I vårt exempel uppdaterar vi egenskapen Fill för den primära knappen och ser hur knappfärgen ändras i Mörkt läge och Standardläget.

1. Gå till inläsningsskärmen och välj egenskapen OnVisible i listrutan.

2. Expandera formelfältet och rulla ned till funktionen ButtonPrimary > Fill.

3. Uppdatera de två sista parametrarna till Red och DarkRed.

   

4. Gå till en annan skärm och gå tillbaka till Inläsningsskärmen för att OnVisible-funktionen ska köras.

5. Gå till skärmen Projekt, markera knappen Filter för att öppna popup-fönstret Filter och lägg märke till att färgen på knappen Tillämpa nu är DarkRed.

   

6. Gå till Hidden Admin Screen, håll Alt-tangenten på tangentbordet och välj växlingsknappen Mörkt läge på.

   

7. Gå till inläsningsskärmen igen för att funktionen ska laddas och återvänd sedan till projektskärmen. Lägg märke till att skärmen nu är i mörkt läge (med mörk bakgrunden) och att färgen på knappen Tillämpa har nu ändrats till Röd.

   

8. Om egenskaperna för SecondaryButton skulle ha ändrat färger för den sekundära knappen, t.ex. Rensa-knappen.

   Anteckning

   Att uppdatera påfyllningsfunktionen direkt är ett snabbt sätt att testa dem på det sätt som vi har visat tidigare. Om färgen behöver ändras, inte bara för kontrollen Primary Knapp, utan även för alla andra kontroller där den används, bör färgen under variabeln gblAppColors uppdateras med formeln för de önskade färgerna och namnen som verkar mest meningsfulla för din organisation. Skulle till exempelcompanynameDefaultHeader: ColorValue("#30D5C8") vara formeln för turkosblått.

Anteckning

Kan du berätta om dina inställningar för dokumentationsspråk? Svara i en kort undersökning. (observera att undersökningen är på engelska)

Undersökningen tar ungefär sju minuter. Inga personuppgifter samlas in (sekretesspolicy).