Creazione di un'app ottimizzata per dispositivi mobili basandosi sulla progettazione dinamica

  • 6 minuti

In questo esercizio si creerà un'app a schermata singola ottimizzata per dispositivi mobili basata sui dati di Contoso Coffee Machines. Lo scopo di questo esercizio è accumulare esperienza nella creazione di un'app con contenitori con layout automatico e mostrare come si comportano le app reattive. Poiché stiamo creando un'app da zero, andare alla home page di Power Apps e attenersi alla procedura riportata di seguito.

  1. Scaricare il foglio di calcolo Excel CoffeeMachineData.xlsx. Selezionare il collegamento, quindi il pulsante Scarica file non elaborato per scaricare il file. Una volta completato il download, continuare il passaggio successivo.

  2. Passare a make.powerapps.com. Selezionare Crea>App vuota>App canvas vuota>Tablet. Assegnare un nome all'app e premere Crea.

  3. È possibile fare riferimento al diagramma di seguito per assistenza con i passaggi successivi, numerati in base ai passaggi. Nella barra dei comandi, selezionare il pulsante Impostazioni. Potrebbe essere necessario selezionare App nel pannello Visualizzazione struttura ad albero per renderla visibile.

    Immagine dei passaggi numerati da 3 a 7 e 9. L'immagine mostra il pannello Impostazioni dell'app insieme alla barra dei comandi e alla visualizzazione struttura ad albero.

  4. Nel pannello popup Impostazioni selezionare la scheda Visualizzazione, quindi scorrere verso il basso e impostare su Off l'opzione Ridimensiona e adatta (questa azione cambia automaticamente l'opzione Blocca proporzioni in Off).

  5. Chiudere il popup Impostazioni.

  6. Creare una Nuova schermata con un layout Intestazione laterale per l'app. Assegnare alla nuova schermata il nome "Catalog Screen".

  7. Creare una Nuova schermata da Modelli>Esito positivo. Assegnare alla nuova schermata il nome "Success Screen".

  8. Eliminare Screen1.

  9. Quindi, selezionare il pulsante Aggiungi data nella barra multifunzione dei comandi. Trovare/selezionare OneDrive for Business.

  10. Nel pannello Scegliere un file di Excel sul lato destro dello schermo, selezionare il file CoffeeMachineData.xlsx, quindi la tabella CoffeeMachines. Connettere la tabella selezionando Connetti nella parte inferiore del pannello.

  11. Selezionare il contenitore orizzontale sul lato sinistro dello schermo, denominato SidebarContainer1. Fare riferimento all'immagine seguente per i passaggi successivi.

    Screenshot dei passaggi numerati da 11 a 13.

  12. Selezionare l'icona più (+) nel contenitore e inserire una Raccolta verticale in SidebarContainer1, quindi selezionare CoffeeMachines come origine dati. Impostare la proprietà Fill su Color.LightSteelBlue.

  13. Si procederà quindi a inserire un modulo nella schermata Catalog Screen. Selezionare MainContainer1 sul lato destro del canvas dell'app. Selezionare l'icona più (+) (o il pulsante Inserisci dalla barra dei comandi) per inserire un Modulo di modifica. Nel pannello Proprietà sul lato destro dello schermo, selezionare CoffeeMachines come Origine dati.

  14. Sempre nel pannello Proprietà, selezionare l'opzione Modifica campi sotto Origine dati.

  15. Nel pannello Campi, selezionare Aggiungi campo e aggiungere tutti i campi selezionando la casella accanto al nome di ciascun campo nel popup Scegliere un campo. Quindi, selezionare il pulsante Aggiungi nella parte inferiore.

  16. Chiudere il pannello Campi.

  17. Con Form1 selezionato, nel menu a discesa Proprietà in alto a sinistra nello schermo, selezionare la proprietà Item e nel campo della formula (fx) immettere Gallery1.Selected

  18. Infine, sempre nel modulo, impostare la proprietà Fill su: Color.LightSteelBlue

  19. Ora si procederà ad aggiungere il contenitore dell'intestazione. Selezionare il controllo HeaderContainer e usare l'icona più (+) per inserire un controllo Etichetta di testo e modificare le proprietà nel menu a discesa come segue:

    Text: "Contoso Coffee Catalog"

    Size: modificare da 13 a 20

    Height: modificare da 40 a Parent.Height

    Width: modificare da 150 a 200

  20. Usando il pulsante Allinea nella barra dei comandi (a sinistra del pulsante Colore; in alternativa, cercare la selezione per Allineamento testo nel pannello Proprietà a destra), modificare il valore di Allinea da Allinea a sinistra a Giustifica.

  21. Successivamente, inserire un controllo Immagine in HeaderContainer1 e modificare le proprietà come segue:

    Image: User().Image

    Height: Parent.Height

  22. Creiamo un'icona di connessione inserendo un'icona a forma di globo in HeaderContainer1. Impostare le proprietà nel seguente modo:

    Height: 20

    Width: 20

    Color: If(Connection.Connected, Color.Green, Color.LightSteelBlue)

  23. Successivamente, giustifichiamo a destra gli elementi HeaderContainer. A tale scopo, selezionare HeaderContainer1 nella visualizzazione struttura ad albero e cercare nel pannello Proprietà sulla destra l'opzione Giustifica (orizzontale). La terza opzione è Fine. Selezionarla.

  24. Infine, si procederà ad aggiungere un colore di sfondo al contenitore di intestazione. Modificare la proprietà Fill su: Color.LightSteelBlue

  25. Selezionare MainContainer1, dove si trova il modulo. Inserire un controllo Pulsante con le seguenti proprietà:

    Text: "Save"

    Width: Parent.Width

    OnSelect: SubmitForm(Form1)

  26. Selezionare il modulo all'interno di MainContainer1 e modificare la proprietà OnSuccess su: Navigate('Success Screen')

  27. Dal pannello Visualizzazione struttura ad albero selezionare Success Screen.

  28. Selezionare l'icona Check (iconCheck1) e aggiornare la proprietà OnSelect impostandola su:

    Back()

  29. Impostare l'app in modalità di anteprima. Regolare il display dell'iPhone 12 selezionando il menu a discesa Telefono. Come si può notare, i controlli del display sono cambiati. Provare a cambiare orientamento con tablet e telefoni diversi per vedere come cambia la schermata.

La nostra app semplice e reattiva è ora utilizzabile su qualsiasi piattaforma. Ottimo lavoro.