Creazione di temi nei modelli di app di esempio

La funzionalità più interessante relativa alle app canvas è la possibilità di personalizzare l'interfaccia utente in base al marchio e ai gusti dell'utente o dell'organizzazione. La strategia di creazione di temi offre la possibilità di creare app che corrispondono al marchio dell'organizzazione. Un tema contiene una raccolta di stili che definiscono varie proprietà di progettazione per controlli e componenti come colori, caratteri e bordi.

In questo articolo impareremo come utilizzare le variabili globali per definire i temi e come i colori e le proprietà possono essere facilmente modificati nell'app semplicemente aggiornando le variabili globali.

Guarda questo video per imparare a usare i modelli di app di esempio:

Prerequisiti

Per completare questa lezione, abbiamo bisogno della possibilità di creare app all'interno di Microsoft Teams che sarà disponibile come parte di selezionati abbonamenti Microsoft 365. Dovrai anche avere il modello di app di esempio Passaggi fondamentali per Microsoft Teams installata nel team. Puoi installarla nel team dal sito https://aka.ms/TeamsMilestones.

Definizione della strategia di creazione di temi

In questo esempio, vedremo come le variabili globali sono state utilizzate per definire colori e stili per i temi nell'app Passaggi fondamentali. Le seguenti variabili globali sono state definite nella proprietà OnVisible della schermata di caricamento.

• gblAppColors per definire i colori in modo che sia possibile farvi riferimento facilmente
• gblAppSizes per definire diverse dimensioni di caratteri per app per dispositivi mobili e Web
• Proprietà gblAppStyles di ogni singolo controllo utilizzando gblAppColors
• gblThemeDark impostata su true quando il tema di Teams è Scuro, quindi tutti i controlli si adattano al tema Scuro
• gblThemeHiCo impostata su true quando il tema di Teams è Contrasto elevato, quindi tutti i controlli si adattano al tema Contrasto elevato

Test della strategia di creazione di temi

Sono state definite due schermate nascoste per testare la strategia di creazione di temi:

• Schermata amministratori nascosta: questa schermata ha due interruttori definiti, ovvero tglAdmin_DarkMode e tglAdmin_ContrastMode. Questa schermata consente di testare rapidamente le modalità Scuro e Contrasto elevato senza dover cambiare il tema dei team per i test

  

• Schermata controlli nascosta: in questa schermata le proprietà di ogni singolo controllo sono impostate utilizzando gblAppStyles.

  • Consente di testare le modifiche ai temi.

  • Consente di copiare un particolare controllo e di incollarlo nella schermata necessaria di modo che la formula per il controllo non debba essere digitata ripetutamente.

    

Utilizzo delle variabili dei temi per i modelli di app di esempio

1. Per comprendere l'utilizzo dei temi nell'app Passaggi fondamentali, seleziona la schermata dei progetti nella visualizzazione ad albero per aprire la schermata e quindi seleziona +Nuovo progetto.

2. Seleziona la proprietà Color di +Nuovo progetto.

   Nota che la formula fa riferimento alla formula gblAppStyles>ButtonTransparent>Color della proprietà OnVisible nella schermata di caricamento.

   Quindi se il tema dell'app è Contrasto elevato, verrà utilizzato il colore definito nella formula gblAppColors>HighContrastHyperlinks.

3. Un altro esempio potrebbe essere osservare i pulsanti Primario e Secondario.

   • Seleziona la schermata dei progetti nell'editor.

   • Tieni premuto il tasto ALT e seleziona l'icona Filtro nella schermata dei progetti.

     Viene visualizzata la finestra Filtra elementi di lavoro. Nota i due pulsanti Annulla e Applica.

     

     Applica è un esempio di pulsante primario e Annulla è un esempio di pulsante secondario.

4. Seleziona il pulsante Applica e quindi qualsiasi proprietà correlata a Bordo/Spessore/Colore. Nota la formula definita.

   

5. Il pulsante Applica è definito come pulsante primario e utilizza tutte le proprietà definite nella formula Schermata di caricamento>OnVisible>ButtonPrimary.

   A seconda del tema e delle variabili di colore selezionate nella formula ButtonPrimary, le proprietà di stile del pulsante verranno aggiornate.

   Allo stesso modo, Annulla è definito come pulsante secondario e utilizza tutte le proprietà definite in gblAppStyles>ButtonSecondary.

   Nota

   Un'altra possibile estensione dell'app consisterebbe nell'aggiungere Font come proprietà, come variabile da utilizzare in tutti i controlli o una volta per controllo (come il modo in cui le altre proprietà di stile vengono definite separatamente per i pulsanti primari o per i pulsanti secondari). Il carattere nell'app Passaggi fondamentali è Segoe UI e non deve essere identificato per il tema del carattere.

Aggiornamento del tema nel modello di app di esempio

In questa sezione vedremo come modificare una proprietà di un particolare controllo e come il controllo viene aggiornato in varie schermate. Nel nostro esempio, aggiorneremo la proprietà Fill del pulsante Primario e vedremo come cambia il colore del pulsante nella modalità Scuro e nella modalità Default.

1. Vai alla Schermata di caricamento e seleziona la proprietà OnVisible nel menu a discesa.

2. Espandi la barra della formula e scorri verso il basso fino alla funzione ButtonPrimary>Fill.

3. Aggiorna gli ultimi due parametri in Red e DarkRed.

   

4. Vai a un'altra schermata e poi torna alla schermata di caricamento per la funzione OnVisible da eseguire.

5. Vai alla schermata dei progetti, seleziona il pulsante Filtro per aprire la finestra a comparsa Filtro e nota che il colore del pulsante Applica è ora DarkRed.

   

6. Vai alla Schermata amministratori nascosta, tieni premuto il tasto ALT della tastiera e seleziona l'interruttore Modalità Scuro attivata.

   

7. Vai di nuovo alla schermata di caricamento per la funzione da caricare e quindi torna alla schermata dei progetti. Nota che la schermata è ora in modalità Scuro (con sfondo scuro) e il colore del pulsante Applica è ora Red.

   

8. Allo stesso modo, cambiando le proprietà di SecondaryButton si cambierebbero i colori per il pulsante secondario, come il pulsante Annulla.

   Nota

   L'aggiornamento diretto della funzione Fill è un modo rapido per testare i temi, come mostrato in precedenza. Se il colore deve essere modificato non solo per il controllo Pulsante primario ma anche per tutti gli altri controlli in cui viene utilizzato, la tavolozza dei colori sotto la variabile gblAppColors deve essere aggiornata con la formula dei colori e dei nomi desiderati più appropriata per la tua organizzazione. Ad esempio, companynameDefaultHeader: ColorValue("#30D5C8") sarebbe la formula per il colore turchese.