Creare un'app canvas da zero in base ai dati di ExcelCreate a canvas app from scratch based on Excel data

Creare un'app canvas da zero in base a dati di Excel, formattati come una tabella e quindi aggiungere eventualmente dati da altre origini.Create your own canvas app from scratch based on Excel data, formatted as a table, and then add data from other sources if you want. Seguendo questa esercitazione si creerà un'app che contiene due schermate.By following this tutorial, you'll create an app that contains two screens. In una schermata gli utenti possono esplorare un set di record.On one screen, users can browse through a set of records. Nell'altra schermata gli utenti possono creare un record, aggiornare uno o più campi di un record o eliminare un intero record.On the other screen, users can create a record, update one or more fields in a record, or delete an entire record. Questo approccio richiede più tempo rispetto alla generazione automatica di un'app, ma consente agli sviluppatori di app più esperti di creare l'app ottimale per esigenze specifiche.This approach takes more time than generating an app automatically does, but app makers who have more experience can use it to build the best app for their needs.

PrerequisitiPrerequisites

Per attenersi esattamente alla procedura descritta in questa esercitazione, creare un file di Excel usando questi dati di esempio.To follow the steps in this tutorial exactly, first create an Excel file using this sample data.

  1. Copiare questi dati e incollarli in un file di Excel.Copy this data, and then paste it into an Excel file.

    StartDayStartDay StartTimeStartTime VolunteerVolunteer BackupBackup
    SabatoSaturday 10am-noon10am-noon VasquezVasquez KumashiroKumashiro
    SaturdaySaturday noon-2pmnoon-2pm IceIce SinghalSinghal
    SabatoSaturday 2pm-4pm2pm-4pm MykMyk MuellerMueller
    DomenicaSunday 10am-noon10am-noon LiLi AdamsAdams
    DomenicaSunday noon-2pmnoon-2pm SinghSingh MorganMorgan
    DomenicaSunday 2pm-4pm2pm-4pm BatyeBatye NguyenNguyen
  2. Formattare i dati come tabella con la denominazione Schedule, in modo che PowerApps possa analizzare le informazioni.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Per altre informazioni, vedere Formattare una tabella in Excel.For more information, see Format a table in Excel.

  3. Salvare il file con il nome eventsignup. xlsx, chiuderlo e caricarlo in un account di archiviazione cloud, ad esempio OneDrive.Save the file under the name eventsignup.xlsx, close it, and then upload it to a cloud-storage account, such as OneDrive.

Importante

È possibile usare il proprio file di Excel e rivedere questa esercitazione solo per i concetti generali.You can use your own Excel file and review this tutorial for general concepts only. Tuttavia, i dati presenti nel file di Excel devono essere formattati come tabella.However, the data in the Excel file must be formatted as a table. Per altre informazioni, vedere Formattare una tabella in Excel.For more information, see Format a table in Excel.

Aprire un'app vuotaOpen a blank app

  1. Accedere a PowerApps.Sign in to PowerApps.

  2. In Crea app personalizzata selezionare App canvas da modello vuoto.Under Make your own app, select Canvas app from blank.

    Creare app canvas da modello vuotoCreate blank canvas app

  3. Specificare un nome per l'app, selezionare Telefono e quindi selezionare Crea.Specify a name for your app, select Phone, and then select Create.

    È possibile progettare un'app da zero per i telefoni o per altri dispositivi (ad esempio i tablet).You can design an app from scratch for phones or for other devices (such as tablets). Questo argomento è incentrato sulla progettazione di un'app per telefoni.This topic focuses on designing an app for phones.

    Specificare il nome e il formato dell'appSpecify name and format of app

    PowerApps Studio crea un'app vuota per i telefoni.PowerApps Studio creates a blank app for phones.

  4. Se viene aperta la finestra di dialogo Benvenuto in PowerApps Studio, selezionare Ignora.If the Welcome to PowerApps Studio dialog box opens, select Skip.

Connettersi ai datiConnect to data

  1. Nel centro della schermata selezionare Connetti ai dati.In the middle of the screen, select connect to data.

  2. Nel riquadro Dati selezionare la connessione per l'account di archiviazione cloud se viene visualizzato.In the Data pane, select the connection for your cloud-storage account if it appears. In caso contrario, seguire questi passaggi per aggiungere una connessione:Otherwise, follow these steps to add a connection:

    1. Selezionare Nuova connessione, selezionare il riquadro dell'account di archiviazione cloud e quindi selezionare Crea.Select New connection, select the tile for your cloud-storage account, and then select Create.
    2. Se richiesto, specificare le credenziali per l'account.If prompted, provide your credentials for that account.
  3. In Scegliere un file di Excel digitare o incollare le prime lettere di eventsignup per filtrare l'elenco e quindi selezionare il file caricato.Under Choose an Excel file, type or paste the first letters of eventsignup to filter the list, and then select the file that you uploaded.

  4. In Scegliere una tabella selezionare la casella di controllo Schedule e quindi selezionare Connetti.Under Choose a table, select the checkbox for Schedule, and then select Connect.

  5. Chiudere il riquadro Dati selezionando l'icona di chiusura (X) nell'angolo superiore destro.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Creare la schermata per la visualizzazioneCreate the view screen

  1. Nella scheda Home selezionare la freccia GIÙ accanto a Nuova schermata per aprire un elenco dei tipi di schermata e quindi selezionare Elenco.On the Home tab, select the down-arrow next to New screen to open a list of screen types, and then select List.

    Viene aggiunta una schermata con vari controlli predefiniti, ad esempio una casella di ricerca e un controllo Raccolta .A screen is added with several default controls, such as a search box and a Gallery control. La raccolta copre l'intera schermata sotto la casella di ricerca.The gallery covers the entire screen under the search box.

  2. Nella parte superiore della nuova schermata selezionare il controllo Etichetta e quindi sostituire [Titolo] con View records (Visualizza record).At the top of the new screen, select the Label control, and then replace [Title] with View records.

    Modificare la barra del titolo

  3. Nella barra di spostamento a sinistra selezionare BrowseGallery1.In the left navigation bar, select BrowseGallery1.

    La raccolta verrà racchiusa in un riquadro di selezione con punti di controllo.A selection box with handles surrounds the gallery.

    Aggiungere una schermata Elenco

  4. Nella scheda Proprietà del riquadro di destra selezionare la freccia GIÙ per il menu Layout.On the Properties tab of the right-hand pane, select the down arrow for the Layout menu.

    Aprire il menu Layout

  5. Selezionare Titolo, sottotitolo e corpo.Select Title, subtitle, and body.

  6. Nella barra della formula sostituire CustomGallerySample con Schedule e sostituire entrambe le istanze di SampleText con Volunteer.In the formula bar, replace CustomGallerySample with Schedule, and replace both instances of SampleText with Volunteer.

  7. Nell'estremità destra della barra della formula selezionare la freccia GIÙ e quindi selezionare Formatta testo.On the right edge of the formula bar, select the down arrow, and then select Format text.

    La formula corrisponde a questo esempio:The formula matches this example:

    SortByColumns(
        Search(
            Schedule,
            TextSearchBox1.Text,
            "Volunteer"
        ),
        "Volunteer",
        If(
            SortDescending1,
            SortOrder.Descending,
            SortOrder.Ascending
        )
    )
    
  8. Nella scheda Proprietà del riquadro di destra selezionare Modifica accanto all'etichetta Campi.On the Properties tab of the right-hand pane, select Edit next to the Fields label.

  9. Nella casella Title2 selezionare volontario, nella casella Subtitle2 selezionare StartDaye nella casella Body1 selezionare StartTime.In the Title2 box, select Volunteer, in the Subtitle2 box, select StartDay, and in the Body1 box, select StartTime.

  10. Chiudere il riquadro Dati selezionando l'icona di chiusura (X) nell'angolo superiore destro.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Gli utenti possono ordinare e filtrare la raccolta per nome del volontario in base alle funzioni SortByColumns e Search nella formula.Users can sort and filter the gallery by volunteer name based on the SortByColumns and Search functions in that formula.

  • Se un utente digita almeno una lettera nella casella di ricerca, la raccolta mostra solo i record per i quali il campo Volunteer contiene il testo digitato dall'utente.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer field contains the text that the user typed.
  • Se un utente seleziona il pulsante di ordinamento (tra il pulsante Aggiorna e il pulsante più nella barra del titolo), la raccolta mostra i record in ordine crescente o decrescente (a seconda di quante volte l'utente seleziona il pulsante) in base al campo Volunteer.If a user selects the sort button (between the refresh button and the plus button in the title bar), the gallery shows the records in ascending or descending order (depending on how many times the user selects the button) based on the Volunteer field.

Per altre informazioni su questa e altre funzioni, vedere le informazioni di riferimento sulle formule.For more information about these and other functions, see the formula reference.

Creare la schermata di modificaCreate the change screen

  1. Nella scheda Home selezionare la freccia GIÙ accanto a Nuova schermata e quindi selezionare Modulo.On the Home tab, select the down arrow next to New screen, and then select Form.

  2. Nella barra di spostamento a sinistra selezionare EditForm1.In the left navigation bar, select EditForm1.

  3. Nella scheda Proprietà del riquadro di destra selezionare la freccia GIÙ accanto a Origine dati e quindi selezionare Pianificazione nell'elenco visualizzato.On the Properties tab of the right-hand pane, select the down arrow next to Data source, and then select Schedule in the list that appears.

  4. Nell'origine dati specificata selezionare Modifica campi.Under the data source that you just specified, select Edit fields.

  5. Nel riquadroCampi selezionare Aggiungi campo, selezionare la casella di controllo relativa a ogni campo e quindi selezionare Aggiungi.In the Fields pane, select Add field, select the check box for each field, and then select Add.

  6. Selezionare la freccia accanto al nome di ogni campo per comprimerlo e quindi trascinare il campo Volunteer verso l'alto in modo che venga visualizzato in cima all'elenco dei campi.Select the arrow next to the name of each field to collapse it, and then drag the Volunteer field up so that it appears at the top of the list of fields.

    Riordinare i campi

  7. Chiudere il riquadro Campi selezionando l'icona di chiusura (X) nell'angolo superiore destro.In the upper-right corner of the Fields pane, close it by selecting the close icon (X).

  8. Impostare la proprietà Item del modulo su quest'espressione digitandola o incollandola nella barra della formula:Set the Item property of the form to this expression by typing or pasting it in the formula bar:

    BrowseGallery1.Selected

  9. Nella parte superiore dello schermo selezionare il controllo Etichetta e quindi sostituire [Titolo] con Change records (Modifica record).At the top of the screen, select the Label control, and then replace [Title] with Change records.

    Modificare la barra del titolo

Eliminare e rinominare le schermateDelete and rename screens

  1. Nella barra di spostamento a sinistra selezionare i puntini di sospensione (...) per Screen1 e quindi selezionare Elimina.In the left navigation bar, select the ellipsis (...) for Screen1, and then select Delete.

    Eliminare una schermata

  2. Selezionare i puntini di sospensione (...) per Screen2, selezionare Rinomina e quindi digitare o incollare ViewScreen.Select the ellipsis (...) for Screen2, select Rename, and then type or paste ViewScreen.

  3. Selezionare i puntini di sospensione (...) per Screen3, selezionare Rinomina e quindi digitare o incollare ChangeScreen.Select the ellipsis (...) for Screen3, select Rename, and then type or paste ChangeScreen.

Configurare le icone nella schermata di visualizzazioneConfigure icons on the view screen

  1. Nella parte superiore della schermata ViewScreen selezionare l'icona a forma di freccia circolare.Near the top of the ViewScreen, select the circular-arrow icon.

    Aggiungere un record

  2. Impostare la proprietà OnSelect per l'icona su questa formula:Set the OnSelect property for that icon to this formula:

    Refresh(Schedule)

    Quando l'utente seleziona l'icona, i dati da Schedule vengono aggiornati dal file di Excel.When the user selects this icon, the data from Schedule is refreshed from the Excel file.

    Per altre informazioni su questa e altre funzioni, vedere le informazioni di riferimento sulle formule.For more information about this and other functions, see the formula reference.

  3. Nell'angolo superiore destro di ViewScreen, selezionare l'icona +.In the upper-right corner of the ViewScreen, select the plus icon.

    Aggiungere un record

  4. Impostare la proprietà OnSelect per l'icona su questa formula:Set the OnSelect property for that icon to this formula:

    NewForm(EditForm1);Navigate(ChangeScreen,ScreenTransition.None)

    Quando l'utente seleziona questa icona, la schermata ChangeScreen viene visualizzata con tutti i campi vuoti, in modo che l'utente possa creare un record più facilmente.When the user selects this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

  5. Selezionare la freccia rivolta verso destra per il primo record nella raccolta.Select the right-pointing arrow for the first record in the gallery.

    Selezionare la freccia

  6. Impostare la proprietà OnSelect per la freccia sulla formula seguente:Set the OnSelect property for the arrow to this formula:

    EditForm(EditForm1); Navigate(ChangeScreen, ScreenTransition.None)

    Quando l'utente seleziona questa icona, viene visualizzata la schermata ChangeScreen con ogni campo che mostra i dati per il record selezionato, in modo che l'utente possa modificare o eliminare il record più facilmente.When the user selects this icon, ChangeScreen appears with each field showing the data for the selected record, so that the user can edit or delete the record more easily.

Configurare le icone nella schermata di modificaConfigure icons on the change screen

  1. Nella schermata ChangeScreen selezionare l'icona "X" nell'angolo superiore sinistro.On ChangeScreen, select the "X" icon in the upper-left corner.

    Icona Annulla

  2. Impostare la proprietà OnSelect per l'icona su questa formula:Set the OnSelect property for that icon to this formula:

    ResetForm(EditForm1);Navigate(ViewScreen, ScreenTransition.None)

    Quando l'utente seleziona l'icona, tutte le modifiche apportate in questa schermata dall'utente vengono rimosse e viene aperta la schermata di visualizzazione.When the user selects this icon, any changes that the user made in this screen are discarded, and the view screen opens.

  3. Nell'angolo superiore destro selezionare l'icona a forma di segno di spunta.In the upper-right corner, select the checkmark icon.

    Icona Segno di spunta

  4. Impostare la proprietà OnSelect per il segno di spunta su questa formula:Set the OnSelect property for the checkmark to this formula:

    SubmitForm(EditForm1); Navigate(ViewScreen, ScreenTransition.None)

    Quando l'utente seleziona l'icona, tutte le modifiche apportate in questa schermata dall'utente vengono salvate e viene aperta la schermata di visualizzazione.When the user selects this icon, any changes that the user made is this screen are saved, and the view screen opens.

  5. Nella scheda Inserisci selezionare Icone e quindi selezionare l'icona Cestino.On the Insert tab, select Icons, and then select the Trash icon.

  6. Impostare la proprietà Color della nuova icona su White, e spostare la nuova icona in modo che venga visualizzata accanto all'icona segno di spunta.Set the new icon's Color property to White, and move the new icon so it appears next to the checkmark icon.

    Icona Cestino

  7. Impostare la proprietà Visible per l'icona Cestino su questa formula:Set the Visible property for the trash icon to this formula:

    EditForm1.Mode = FormMode.Edit

    Questa icona verrà visualizzata solo quando il modulo è in modalità Modifica e non in modalità Nuovo.This icon will appear only when the form is in Edit mode, not in New mode.

  8. Impostare la proprietà OnSelect per l'icona Cestino su questa formula:Set the OnSelect property for the trash icon to this formula:

    Remove(Schedule, BrowseGallery1.Selected); Navigate(ViewScreen, ScreenTransition.None)

    Quando l'utente seleziona l'icona, il record selezionato viene eliminato dall'origine dati e viene aperta la schermata di visualizzazione.When the user selects this icon, the selected record is deleted from the data source, and the view screen opens.

Testare l'appTest the app

  1. Selezionare la schermata ViewScreen e quindi aprire la modalità di anteprima premendo F5 oppure selezionando l'icona Anteprima nell'angolo superiore destro.Select the ViewScreen, and then open Preview by pressing F5 (or by selecting the Preview icon near the upper-right corner).

    Accedere alla modalità Anteprima

  2. Digitare o incollare una o più lettere nella casella di ricerca per filtrare l'elenco in base al nome del volontario.Type or paste one or more letters in the search box to filter the list based on the name of the volunteer.

  3. Selezionare una o più volte l'icona di ordinamento per visualizzare i dati in ordine crescente o decrescente in base al nome del volontario.Select the sort icon one or more times to show the data ascending or descending order based on the name of the volunteer.

  4. Aggiungere un record.Add a record.

  5. Aggiornare il record che è stato aggiunto e quindi salvare le modifiche.Update the record that you added, and then save the changes.

  6. Aggiornare il record che è stato aggiunto e quindi annullare le modifiche.Update the record that you added, and then cancel the changes.

  7. Eliminare il record che è stato aggiunto.Delete the record that you added.

  8. Chiudere la modalità di anteprima premendo ESC oppure selezionando l'icona di chiusura nell'angolo superiore destro.Close Preview mode by pressing Esc (or by selecting the close icon in the upper-right corner).

Passaggi successiviNext steps

  • Premere CTRL+S per salvare l'app nel cloud in modo che sia possibile eseguirla su altri dispositivi.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • Condividere l'app in modo che altri utenti possano eseguirla.Share the app so that other people can run it.
  • Vedere altre informazioni sulle funzioni, ad esempio Patch, che è possibile usare per gestire i dati senza creare un modulo standard.Learn more about functions such as Patch, which you can use to manage data without creating a standard form.
  • Collegare l'app a una soluzione, per potere ad esempio distribuirla in un ambiente diverso o pubblicarla in AppSource.Link this app to a solution so that you can, for example, deploy it to a different environment or publish it on AppSource.