Esercizio - Creazione dell'app canvas Dive Center

  • 18 minuti

In questo esercizio si applicheranno le conoscenze apprese per creare un'app canvas Dive Center.

Scenario

Si lavora presso un centro immersioni, che vende e ripara attrezzatura subacquea. Si è responsabile della gestione dell'ambiente Dataverse dell'organizzazione.

I dipendenti del reparto assistenza hanno bisogno di un'app Power Apps che permetta loro di procedere con le procedure di check-in e check-out per i clienti che portano a riparare la loro attrezzatura subacquea.

Per supportare questi processi, i dipendenti richiedono le seguenti funzionalità:

  • Un elenco di clienti per i servizi di riparazione

  • La possibilità di archiviare i check-in

  • Un elenco di attrezzature subacquee per identificare il tipo di attrezzatura da registrare

Gli utenti hanno formulato altre richieste e si potrebbe voler includere anche le seguenti funzionalità:

  • Possibilità di procedere con i check-out per le richieste di assistenza completate.

  • Creazione di nuova attrezzatura subacquea specificando immagine, colore e tipo di attrezzatura.

  • Acquisizione di immagini e tipo di servizio al momento del check-in.

  • Acquisizione di una firma per completare il check-out.

  • Creazione di nuovi clienti.

Esercizio

Prerequisito: la soluzione e l'origine dati a cui si fa riferimento in questo esercizio sono spiegate nell'unità precedente Esercizio - Preparazione per l'app canvas Dive Center. Iniziare nell'ambiente App Dive Center, dove già risiedono le tabelle Dataverse dell'app.

  1. Dalla barra dei comandi della schermata dell'ambiente, selezionare Nuovo > App > App canvas per creare una nuova app canvas denominata Service Request.

    Screenshot di una soluzione Dataverse. Lo stato attivo è sull'opzione di menu Nuova app canvas.

    Selezionare telefono come formato dell'app canvas. Selezionare quindi Crea.

    Screenshot della nuova app canvas creata a partire da un modulo vuoto. Lo stato attivo è sul nome dell'app, sul formato telefono e sul pulsante Crea.

  2. In Studio per app canvas per Power Apps inserire un'immagine da usare come logo principale.

  3. Posizionare e ridimensionare l'immagine in base allo spazio disponibile sullo schermo e agli altri componenti da includere nell'app. È inoltre possibile adeguare lo sfondo dello schermo al colore del logo usando la proprietà Fill.

    Screenshot di Studio per app canvas. Lo stato attivo è sul controllo Immagine e sulle proprietà del controllo.

  4. Per supportare lo spostamento alle schermate successive, aggiungere tre pulsanti per Check-in, Check-out ed Esci. Definire i colori, le posizioni e le dimensioni in base all'esperienza utente prevista.

    Screenshot di Studio per app canvas. Lo stato attivo è sul controllo Pulsante e sulle proprietà del controllo.

  5. Rinominare i controlli e le schermate predefiniti usando nomi che ne rappresentano l'uso. Questa è la procedura consigliata per identificarli più facilmente. È possibile fare doppio clic su ciascun controllo nella Visualizzazione struttura ad albero per rinominarlo oppure usare i puntini di sospensione accanto al controllo e selezionare Rinomina.

    Screenshot di Studio per app canvas. Lo stato attivo è sull'opzione Rinomina per i componenti della schermata.

  6. Creare la schermata di check-in selezionando Duplica la schermata dalla schermata Home e rinominare la nuova schermata "CHECKIN".

    Screenshot di Studio per app canvas. Lo stato attivo è sull'opzione Duplica la schermata.

  7. Rimuovere i pulsanti dalla nuova schermata, quindi ridimensionare l'immagine principale per fare spazio al modulo che viene aggiunto per il processo di check-in.

  8. Inserire un Modulo di modifica, connettere l'origine dati alla tabella Service Requests di Dataverse, impostare la proprietà Default mode del modulo su Nuovo e rinominarlo frmCheckIn.

    Screenshot di Studio per app canvas. Lo stato attivo è su Modulo di modifica e sulla proprietà Data Source del controllo.

  9. Spostare e ridimensionare il modulo per usare la schermata relativa alle proprietà immobiliari, quindi selezionare l'opzione Modifica campi nel pannello Proprietà in modo da poter modificare i campi del modulo.

  10. Copilot suggerisce automaticamente quali campi includere e li ordina di conseguenza; nel nostro caso però si procederà a disporli manualmente per il processo di check-in, trascinandoli e rilasciandoli nel pannello Campi come segue dall'alto verso il basso (è possibile fare riferimento all'immagine qui sotto): Nome, Cliente, Attrezzatura, Dettagli e Completamento stimato. (È possibile posizionare qualsiasi campo facoltativo sotto questi campi.)

    Se questi campi non sono visibili nel modulo, selezionare il pulsante + Aggiungi campo per trovarli/aggiungerli.

    Screenshot di Studio per app canvas. Lo stato attivo è sull'opzione Aggiungi campo per un controllo del modulo.

    Sarà necessario aggiungere dati alla tabella Dive Gear e forse anche alla tabella Contacts per visualizzare i risultati nella casella combinata nella sezione Attrezzatura e Cliente del modulo.

  11. Controllare i campi di controllo della casella combinata per le schede Cliente e Attrezzatura nel modulo. Potrebbero non visualizzare i dati corretti, quindi potrebbe essere necessario sbloccare queste schede e apportare alcune modifiche. Per la casella combinata Cliente, accertarsi di aggiornare la proprietà DisplayFields in [fullname] e per la casella combinata Attrezzatura, impostare la proprietà DisplayFields su ["msft_name"].

  12. Per fornire agli utenti funzionalità di aggiornamento e spostamento, aggiungere due pulsanti nella parte inferiore della schermata canvas. Aggiornare il testo in "SAVE" e "BACK" e rinominarli rispettivamente come btnSaveCheckIn e btnBackCheckIn.

    Screenshot di Studio per app canvas. Lo stato attivo è sui controlli Pulsante e sulle proprietà dei controlli.

  13. Per aggiornare il modulo quando si seleziona il pulsante btnSaveCheckIn e consentire l'elaborazione di un nuovo check-in, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    SubmitForm(frmCheckIn); NewForm(frmCheckIn);

  14. Per tornare alla HOME SCREEN quando si seleziona il pulsante btnBackCheckIn, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    Navigate('HOME SCREEN',ScreenTransition.Fade);

  15. Per tornare alla schermata CHECKIN dalla HOME SCREEN quando si seleziona il pulsante btnCheckIn della HOME SCREEN, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    Navigate(CHECKIN,ScreenTransition.Fade);

  16. Per consentire agli utenti di chiudere l'app quando selezionano il pulsante btnExit della HOME SCREEN, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    Exit();

  17. A questo punto è possibile salvare e riprodurre l'app per testare lo spostamento tra le schermate e la creazione di nuove voci di check-in.

Funzionalità facoltative

La sezione seguente fornisce i passaggi necessari per procedere con le funzionalità facoltative dell'app. Alcune di queste funzionalità richiedono tabelle e colonne definite nell'unità Esercizio - Preparazione per l'app canvas Dive Center precedente di questo modulo.

Funzionalità di check-out

Per fornire agli utenti dell'app la funzionalità di check-out, attenersi alla seguente procedura:

  1. Creare un duplicato della schermata CHECKIN e rinominarla come CHECKOUT. Rinominare i componenti dello schermo, quindi eseguire le azioni seguenti:

    1. Modificare il pulsante "SAVE" in "CHECK OUT".

    2. Modificare i campi frmCheckOut per rimuovere il campo Nome.

    3. Aggiungere/spostare il campo facoltativo Allegati subito sotto il campo Completamento stimato.

    4. Impostare la Modalità predefinita su Visualizza in modo che il modulo venga visualizzato in sola lettura.

    Screenshot di Studio per app canvas. Lo stato attivo è sulle proprietà del controllo di un modulo e sui componenti rinominati di una schermata.

  2. Per fornire un elenco di richieste di assistenza disponibili per il check-out, aggiungere un input A discesa nella parte superiore della schermata, quindi eseguire le azioni indicate di seguito:

    1. Rinominare l'elenco a discesa in ddServiceRequestForCheckOut.

    2. Posizionare il menu a discesa sopra il modulo frmCheckOut (ridimensionare il modulo di conseguenza).

    3. Impostare la proprietà Items sulla tabella Service Requests.

    4. Impostare la proprietà Value sulla colonna Name.

    Screenshot di Studio per app canvas. Lo stato attivo è sul controllo A discesa e sulle proprietà del controllo.

  3. Per visualizzare la Richiesta di assistenza selezionata dal controllo a discesa immettere il seguente script PowerFx nella proprietà Item del modulo frmCheckOut:

    ddServiceRequestForCheckOut.Selected

  4. Per visualizzare soltanto l'elenco delle richieste di assistenza disponibili per il check-out, immettere il seguente script PowerFx nella proprietà Items dell'input a discesa:

    Filter('Service Requests',IsBlank('Actual Completion'))

  5. Ora che la richiesta di assistenza è visualizzata come presa in carico (check-out) quando si seleziona il pulsante btnSaveCheckOut, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now()});

  6. Per tornare alla schermata CHECKOUT dalla HOME SCREEN quando si seleziona il pulsante btnCheckOut nella HOME SCREEN, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    Navigate(CHECKOUT,ScreenTransition.Fade);

  7. A questo punto è possibile salvare e riprodurre l'app per testare lo spostamento tra le schermate e il processo di check-out.

Creazione della funzionalità per l'attrezzatura subacquea

Per consentire agli utenti di creare una nuova attrezzatura subacquea con colore, tipo di attrezzatura e un'immagine, attenersi alla seguente procedura:

  1. Creare un duplicato della schermata CHECKIN e rinominarla DIVEGEAR. Rinominare i componenti dello schermo, quindi eseguire le azioni seguenti:

    1. Modificare le proprietà frmGear per usare la tabella Dive Gear come origine dati.

    2. Selezionare i diversi campi che si desidera fornire agli utenti, incluso il campo Immagine.

    Screenshot di Studio per app canvas. Lo stato attivo è sulle proprietà del controllo del modulo e sui componenti rinominati della schermata.

  2. Per creare l'attrezzatura subacquea quando si seleziona il pulsante btnSaveGear e consentire la creazione di una nuova attrezzatura subacquea, immettere il seguente script di PowerFx nella proprietà OnSelect del pulsante:

    SubmitForm(frmGear); NewForm(frmGear); Refresh ('Dive Gear');

  3. Per tornare alla schermata CHECKIN quando si seleziona il pulsante btnBackGear, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. Per spostarsi dalla schermata CHECKIN alla nuova attrezzatura subacquea creata, sbloccare le proprietà della scheda dati per il campo Gear del modulo frmCheckIn nella schermata CHECKIN. Ridimensionare la casella combinata della scheda dati per fornire spazio per inserire un'icona Aggiungi accanto a essa.

    Screenshot di Studio per app canvas. Lo stato attivo è sul controllo Icona e sulle proprietà del controllo.

  5. Per spostarsi alla schermata DIVEGEAR, immettere il seguente script PowerFx nella proprietà OnSelect dell'icona Aggiungi:

    Navigate(DIVEGEAR,ScreenTransition.Fade);

  6. Per fare in modo che l'elenco delle attrezzature venga aggiornato quando si crea una nuova attrezzatura, modificare la proprietà dell'origine dati della casella combinata nella tabella Dive Gear.

    Screenshot di Studio per app canvas. Lo stato attivo è sulla proprietà Data source di una casella combinata.

  7. A questo punto è possibile salvare e riprodurre l'app per testare lo spostamento tra le schermate e la creazione di nuova attrezzatura subacquea.

Acquisizione di immagini e funzionalità del tipo di assistenza

Per consentire agli utenti di acquisire immagini e tipo di assistenza al momento del check-in, attenersi alla seguente procedura:

  1. Assicurarsi di aver aggiunto Tipo di assistenza, Allegati e Accettata il come campi del modulo frmCheckin.

    Screenshot di Studio per app canvas. Lo stato attivo è sui campi del modulo.

  2. Per impostare il valore Accettata il in base alla data e all'ora della creazione della richiesta di assistenza, sbloccare la scheda dati Accettata il, quindi impostare la proprietà Update mediante il seguente script PowerFx:

    Now()

  3. A questo punto è possibile salvare e riprodurre l'app per testare l'aggiunta di immagini come allegati alla richiesta di assistenza.

Funzionalità di acquisizione della firma

Per consentire agli utenti di acquisire una firma per completare un check-out, attenersi alla seguente procedura:

  1. Aggiungere un contenitore alla schermata CHECKOUT e ingrandire il contenitore per visualizzarlo a schermo intero. Impostare la proprietà Fill del contenitore su: RGBA(149,149,149,0.4)

  2. Aggiungere le seguenti etichette al controllo container

    Nome Testo Posizione/dimensioni Altre informazioni
    lbl_SignatureCapture <empty> X: 0
    Y: 338
    Width: 640
    Height: 384    		 Fill: RGBA(255, 255, 255, 1)
    lbl_SignatureLine <empty> X: 0
    Y: 587
    Width: 640
    Height: 13    		 Fill: RGBA(0,0,0,1)
    lbl_CustomerSignature Firma cliente X: 21
    Y: 600
    Width: 560
    Height: 70    		 Dimensione carattere: 21
    lbl_OK OK X: 388
    Y: 599
    Width: 60
    Height: 70    		 Dimensione carattere: 21
    lbl_Cancel Cancel X: 492
    Y: 599
    Width: 122
    Height: 70    		 Dimensione carattere: 21

    Il risultato dovrebbe essere simile allo screenshot seguente.

    Screenshot di Studio per app canvas. Lo stato attivo è sul controllo Etichetta di testo e su più controlli dell'etichetta di una schermata.

  3. Aggiungere i seguenti controlli Icons al contenitore nella schermata CHECKOUT. Appariranno subito a sinistra delle etichette Annulla e OK e saranno selezionabili.

    Nome Icona Posizione/dimensioni Colore
    ico_Cancel Annulla X: 448
    Y: 615
    Width: 35
    Height: 39    		 RGBA(255,0,0,1)
    ico_OK Check X: 346
    Y: 615
    Width: 35
    Height: 39    		 RGBA(51,176,75,1)

  4. Per acquisire la firma del cliente, aggiungere un controllo Input penna nel contenitore. Rinominarlo PenCustomerSignature e impostare le proprietà per Mostra controlli su Off. Impostare la posizione e le dimensioni in modo che siano sopra il controllo lbl_SignatureLine.

    Screenshot di Studio per app canvas. Lo stato attivo è sul controllo Input penna e sulle proprietà del controllo.

  5. Si userà una variabile per visualizzare e nascondere il contenitore con i controlli relativi alla firma in base alla fase del processo. Sostituire la proprietà corrente OnSelect del pulsante btnSaveCheckOut con il seguente script PowerFx:

    Set(flgSignature, true);

  6. Per visualizzare e nascondere il contenitore con i controlli relativi alla firma in base allo stato della variabile flgSignature, impostare la proprietà Visible mediante il seguente script PowerFx:

    flgSignature

  7. Per fornire l'opzione per annullare l'acquisizione della firma e tornare alla schermata CHECKOUT, impostare la proprietà OnSelect di ico_Cancel mediante il seguente script PowerFx:

    Reset(PenCustomerSignature);Set(flgSignature, false);

  8. Per aggiornare la richiesta di assistenza con la firma acquisita e completare il processo di check-out, impostare la proprietà OnSelect di ico_OK mediante il seguente script PowerFx:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now(),'Customer Signature':PenCustomerSignature.Image}); Reset(PenCustomerSignature); Set(flgSignature, false);

  9. A questo punto, è possibile salvare e riprodurre l'app per testare l'acquisizione della firma durante il check-out di una richiesta di assistenza.

Creazione di una funzionalità per i nuovi clienti

Per consentire agli utenti di creare nuovi clienti dalla schermata CHECKIN, attenersi alla seguente procedura:

  1. Creare un duplicato della schermata CHECKIN e rinominarla CUSTOMER. Rinominare i componenti della schermata e attenersi alla seguente procedura:

    1. Modificare le proprietà frmCustomer per usare la tabella Contacts come Origine dati

    2. Selezionare i diversi campi che si desidera rendere disponibili agli utenti, come Nome, Cognome, E-mail e Telefono cellulare.

    Screenshot di Studio per app canvas. Lo stato attivo è sulle proprietà del controllo del modulo e sui componenti rinominati della schermata.

  2. Per creare il cliente quando si seleziona il pulsante btnSaveCustomer e consentire la creazione di nuovi clienti, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    SubmitForm(frmCustomer); NewForm(frmCustomer); Refresh(Contacts);

  3. Per tornare alla schermata CHECKIN quando si seleziona il pulsante btnBackCustomer, immettere il seguente script PowerFx nella proprietà OnSelect del pulsante:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. Per spostarsi dalla schermata CHECKIN a questa schermata, sbloccare le proprietà della scheda dati per il campo Cliente del modulo frmCheckIn. Ridimensionare la casella combinata della scheda dati per fornire spazio per inserire un'icona Aggiungi accanto a essa.

    Screenshot di Studio per app canvas. Lo stato attivo è sul controllo Icona e sulle proprietà del controllo.

  5. Per spostarsi alla schermata CUSTOMER, immettere il seguente script PowerFx nella proprietà OnSelect dell'icona:

    Navigate(CUSTOMER,ScreenTransition.Fade);

  6. Per fare in modo che l'elenco dei clienti venga aggiornato quando si crea un nuovo cliente, modificare la proprietà dell'origine dati della casella combinata nella tabella Dive Gear.

    Screenshot di Studio per app canvas. Lo stato attivo è sulla proprietà Data source della casella combinata.

  7. A questo punto è possibile salvare e riprodurre l'app per testare lo spostamento tra le schermate e la creazione di nuova attrezzatura subacquea.

Passaggi successivi

Si è appreso come creare un'app canvas Dive Center usando Dataverse come origine dati. La prossima unità illustrerà come creare un'app basata su modello.