Erstellen einer Canvas-App anhand von Excel-DatenCreate a canvas app from scratch based on Excel data

Erstellen Sie Ihre eigene Canvas-App auf Grundlage von Excel-Daten im Tabellenformat, und fügen Sie auf Wunsch Daten aus anderen Quellen hinzu.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. Mithilfe dieses Tutorials können Sie eine App erstellen, die zwei Bildschirme enthält.By following this tutorial, you'll create an app that contains two screens. Auf einem Bildschirm können Benutzer eine Reihe von Datensätzen durchsuchen.On one screen, users can browse through a set of records. Auf dem anderen Bildschirm können Benutzer einen Datensatz erstellen, ein oder mehrere Felder in einem Datensatz aktualisieren oder einen vollständigen Datensatz löschen.On the other screen, users can create a record, update one or more fields in a record, or delete an entire record. Dieser Ansatz ist zeitaufwändiger als das automatische Generieren einer App, aber App-Entwickler mit mehr Erfahrung können damit die beste App für ihre Anforderungen erstellen.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.

VoraussetzungenPrerequisites

Damit Sie die Schritte in diesem Tutorial genau ausführen können, erstellen Sie zunächst eine Excel-Datei mit diesen Beispieldaten.To follow the steps in this tutorial exactly, first create an Excel file using this sample data.

  1. Kopieren Sie diese Daten, und fügen Sie sie in eine Excel-Datei ein.Copy this data, and then paste it into an Excel file.

    StartDayStartDay StartTimeStartTime VolunteerVolunteer BackupBackup
    SaturdaySaturday 10am-noon10am-noon VasquezVasquez KumashiroKumashiro
    SaturdaySaturday noon-2pmnoon-2pm IceIce SinghalSinghal
    SaturdaySaturday 2pm-4pm2pm-4pm MykMyk MuellerMueller
    SundaySunday 10am-noon10am-noon LiLi AdamsAdams
    SundaySunday noon-2pmnoon-2pm SinghSingh MorganMorgan
    SundaySunday 2pm-4pm2pm-4pm BatyeBatye NguyenNguyen
  2. Formatieren Sie diese Daten als Tabelle mit dem Namen Schedule, sodass die Informationen von PowerApps analysiert werden können.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Weitere Informationen finden Sie unter Formatieren einer Tabelle in Excel.For more information, see Format a table in Excel.

  3. Speichern Sie die Datei unter dem Namen eventsignup.xls, schließen Sie sie, und laden Sie sie dann in ein Cloudspeicherkonto wie z.B. OneDrive hoch.Save the file under the name eventsignup.xls, close it, and then upload it to a cloud-storage account, such as OneDrive.

Wichtig

Sie können Ihre eigene Excel-Datei verwenden und dieses Tutorial nur für allgemeine Konzepte durchsehen.You can use your own Excel file and review this tutorial for general concepts only. Die Daten in der Excel-Datei müssen jedoch als Tabelle formatiert sein.However, the data in the Excel file must be formatted as a table. Weitere Informationen finden Sie unter Formatieren einer Tabelle in Excel.For more information, see Format a table in Excel.

Öffnen einer leeren AppOpen a blank app

  1. Melden Sie sich bei PowerApps an.Sign in to PowerApps.

  2. Wählen Sie unter Eigene App erstellen die Option Canvas-App ohne Vorlage aus.Under Make your own app, select Canvas app from blank.

    Erstellen einer Canvas-App ohne VorlageCreate blank canvas app

  3. Geben Sie einen Namen für Ihre App an, wählen Sie Telefon aus, und klicken Sie dann auf Erstellen.Specify a name for your app, select Phone, and then select Create.

    Sie können eine App von Grund auf neu für Telefone oder andere Geräte (z.B. Tablets) entwerfen.You can design an app from scratch for phones or for other devices (such as tablets). Dieses Thema konzentriert sich auf den Entwurf einer App für Telefone.This topic focuses on designing an app for phones.

    Angeben des Namens und Formats einer AppSpecify name and format of app

    PowerApps Studio erstellt eine leere App für Telefone.PowerApps Studio creates a blank app for phones.

  4. Falls das Dialogfeld Willkommen bei PowerApps Studio geöffnet wird, wählen Sie Überspringen aus.If the Welcome to PowerApps Studio dialog box opens, select Skip.

Herstellen einer DatenverbindungConnect to data

  1. Wählen Sie in der Mitte des Bildschirms Mit Daten verbinden aus.In the middle of the screen, select connect to data.

  2. Wählen Sie im Bereich Daten die Verbindung für Ihr Cloudspeicherkonto aus, wenn es angezeigt wird.In the Data pane, select the connection for your cloud-storage account if it appears. Gehen Sie andernfalls folgendermaßen vor, um eine Verbindung hinzuzufügen:Otherwise, follow these steps to add a connection:

    1. Wählen Sie neue Verbindung, die Kachel für Ihr Cloudspeicherkonto und dann Erstellen aus.Select New connection, select the tile for your cloud-storage account, and then select Create.
    2. Wenn Sie dazu aufgefordert werden, geben Sie Ihre Anmeldeinformationen für dieses Konto ein.If prompted, provide your credentials for that account.
  3. Um die Liste zu filtern, geben bzw. fügen Sie unter Excel-Datei auswählen die ersten Buchstaben von eventsignup ein, und wählen Sie dann die Datei aus, die Sie hochgeladen haben.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. Aktivieren Sie unter Eine Tabelle auswählen das Kontrollkästchen für Schedule, und wählen Sie dann Verbinden aus.Under Choose a table, select the checkbox for Schedule, and then select Connect.

  5. Schließen Sie den Bereich Daten, indem Sie in der oberen rechten Ecke das Symbol zum Schließen (X) auswählen.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Erstellen des AnzeigebildschirmsCreate the view screen

  1. Wählen Sie auf der Registerkarte Home (Startseite) den Pfeil nach unten neben Neuer Bildschirm aus, um eine Liste der Bildschirmtypen zu öffnen, und wählen Sie dann Liste aus.On the Home tab, select the down-arrow next to New screen to open a list of screen types, and then select List.

    Es wird ein Bildschirm mit mehreren Standardsteuerelementen hinzugefügt, wie etwa einem Suchfeld und einem Katalog-Steuerelement.A screen is added with several default controls, such as a search box and a Gallery control. Der Katalog deckt den gesamten Bildschirm unter dem Suchfeld ab.The gallery covers the entire screen under the search box.

  2. Wählen Sie am oberen Rand des neuen Bildschirms das Steuerelement Bezeichnung aus, und ersetzen Sie dann [Titel] durch Datensätze anzeigen.At the top of the new screen, select the Label control, and then replace [Title] with View records.

    Ändern der Titelleiste

  3. Klicken Sie auf der linken Navigationsleiste auf BrowseGallery1.In the left navigation bar, select BrowseGallery1.

    Ein Auswahlrahmen mit Ziehpunkten umgibt den Katalog.A selection box with handles surrounds the gallery.

    Hinzufügen einer Listenanzeige

  4. Klicken Sie auf der Registerkarte Eigenschaften im rechten Bereich auf den Pfeil nach unten, um das Layoutmenü anzuzeigen.On the Properties tab of the right-hand pane, select the down arrow for the Layout menu.

    Öffnen des Layoutmenüs

  5. Wählen Sie Titel, Untertitel und Text aus.Select Title, subtitle, and body.

  6. Ersetzen Sie auf der Leiste mit den Formeln CustomGallerySample durch Schedule, und ersetzen Sie dann beide Instanzen von SampleText durch Volunteer (Freiwilliger).In the formula bar, replace CustomGallerySample with Schedule, and replace both instances of SampleText with Volunteer.

  7. Klicken Sie am rechten Rand der Leiste mit den Formeln auf den Pfeil nach unten, und wählen Sie dann Text formatieren aus.On the right edge of the formula bar, select the down arrow, and then select Format text.

    Die Formel stimmt mit diesem Beispiel überein:The formula matches this example:

    SortByColumns(
        Search(
            Schedule,
            TextSearchBox1.Text,
            "Volunteer"
        ),
        "Volunteer",
        If(
            SortDescending1,
            SortOrder.Descending,
            SortOrder.Ascending
        )
    )
    
  8. Wählen Sie auf der Registerkarte Eigenschaften im rechten Bereich neben der Bezeichnung Felder die Option Bearbeiten aus.On the Properties tab of the right-hand pane, select Edit next to the Fields label.

  9. Klicken Sie im Feld Title2 auf Volunteer.In the Title2 box, select Volunteer.

  10. Schließen Sie den Bereich Daten, indem Sie in der oberen rechten Ecke das Symbol zum Schließen (X) auswählen.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

Benutzer können den Katalog nach den Namen der Freiwilligen basierend auf den Funktionen SortByColumns und Search in dieser Formel sortieren und filtern.Users can sort and filter the gallery by volunteer name based on the SortByColumns and Search functions in that formula.

  • Wenn ein Benutzer mindestens einen Buchstaben in das Suchfeld eingibt, zeigt der Katalog nur die Datensätze an, bei denen das Feld Volunteer den Text enthält, den der Benutzer eingibt.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.
  • Wenn ein Benutzer die Sortierschaltfläche (zwischen der Schaltfläche „Aktualisieren“ und „+“ auf der Titelleiste) auswählt, zeigt der Katalog die Datensätze in aufsteigender oder absteigender Reihenfolge (je nachdem, wie häufig der Benutzer die Schaltfläche auswählt) basierend auf dem Feld Volunteer an.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.

Weitere Informationen zu diesen und anderen Funktionen finden Sie unter formula reference (Formelreferenz).For more information about these and other functions, see the formula reference.

Erstellen des ÄnderungsbildschirmsCreate the change screen

  1. Wählen Sie auf der Registerkarte Home den Pfeil nach unten neben Neuer Bildschirm und dann Formular aus.On the Home tab, select the down arrow next to New screen, and then select Form.

  2. Klicken Sie auf der linken Navigationsleiste auf EditForm1.In the left navigation bar, select EditForm1.

  3. Wählen Sie auf der Registerkarte Eigenschaften auf der rechten Seite den Pfeil nach unten neben Datenquelle aus, und klicken Sie anschließend in der Liste, die daraufhin angezeigt wird, auf Schedule (Zeitplan).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. Wählen Sie unter der Datenquelle, die Sie soeben angegeben haben, Felder bearbeiten aus.Under the data source that you just specified, select Edit fields.

  5. Wählen Sie im Bereich Felder die Option Feld hinzufügen aus, aktivieren Sie jeweils das Kontrollkästchen für jedes Feld, und klicken Sie auf Hinzufügen.In the Fields pane, select Add field, select the check box for each field, and then select Add.

  6. Klicken Sie auf den Pfeil neben dem Namen jedes Felds, um es zuzuklappen. Ziehen Sie das Feld Volunteer dann nach oben, sodass es ganz oben in der Liste der Felder angezeigt wird.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.

    Felder neu anordnen

  7. Schließen Sie den Bereich Felder, indem Sie in der oberen rechten Ecke das Symbol zum Schließen (X) auswählen.In the upper-right corner of the Fields pane, close it by selecting the close icon (X).

  8. Legen Sie die Eigenschaft Item im Formular für diesen Ausdruck fest, indem Sie ihn in die Bearbeitungsleiste Folgendes eingeben oder einfügen:Set the Item property of the form to this expression by typing or pasting it in the formula bar:

    BrowseGallery1.Selected

  9. Wählen Sie am oberen Rand des Bildschirms das Steuerelement Bezeichnung aus, und ersetzen Sie dann [Titel] durch Datensätze ändern.At the top of the screen, select the Label control, and then replace [Title] with Change records.

    Ändern der Titelleiste

Löschen und Umbenennen von BildschirmenDelete and rename screens

  1. Wählen Sie in der linken Navigationsleiste die Auslassungspunkte (...) für Screen1 und dann Löschen aus.In the left navigation bar, select the ellipsis (...) for Screen1, and then select Delete.

    Bildschirm löschen

  2. Wählen Sie die Auslassungspunkte (...) für Screen2 aus, wählen Sie Umbenennen aus, und geben bzw. fügen Sie dann ViewScreen ein.Select the ellipsis (...) for Screen2, select Rename, and then type or paste ViewScreen.

  3. Wählen Sie die Auslassungspunkte (...) für Screen3 aus, wählen Sie Umbenennen aus, und geben bzw. fügen Sie dann ChangeScreen ein.Select the ellipsis (...) for Screen3, select Rename, and then type or paste ChangeScreen.

Konfigurieren von Symbolen auf dem AnzeigebildschirmConfigure icons on the view screen

  1. Wählen Sie am oberen Rand des ViewScreen das Gebogener-Pfeil-Symbol aus.Near the top of the ViewScreen, select the circular-arrow icon.

    Hinzufügen eines Datensatzes

  2. Legen Sie die Eigenschaft OnSelect für dieses Symbol auf die folgende Formel fest:Set the OnSelect property for that icon to this formula:

    Refresh(Schedule)

    Wenn der Benutzer dieses Symbol auswählt, werden die Daten von Schedule auf Basis der Excel-Datei aktualisiert.When the user selects this icon, the data from Schedule is refreshed from the Excel file.

    Weitere Informationen zu diesen und anderen Funktionen finden Sie in der Referenz zu Formeln für PowerApps.For more information about this and other functions, see the formula reference.

  3. Wählen Sie in der oberen rechten Ecke des ViewScreen das Plussymbol aus.In the upper-right corner of the ViewScreen, select the plus icon.

    Hinzufügen eines Datensatzes

  4. Legen Sie die Eigenschaft OnSelect für dieses Symbol auf die folgende Formel fest:Set the OnSelect property for that icon to this formula:

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

    Wenn der Benutzer dieses Symbol auswählt, wird der ChangeScreen angezeigt, wobei jedes Feld leer ist, damit der Benutzer einen Datensatz einfacher erstellen kann.When the user selects this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

  5. Wählen Sie für den ersten Datensatz im Katalog den nach rechts weisenden Pfeil aus.Select the right-pointing arrow for the first record in the gallery.

    Pfeil auswählen

  6. Legen Sie die Eigenschaft OnSelect für den Pfeil auf die folgende Formel fest:Set the OnSelect property for the arrow to this formula:

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

    Wenn der Benutzer dieses Symbol auswählt, wird in ChangeScreen jedes Feld mit den Daten für den ausgewählten Datensatz angezeigt, sodass der Benutzer den Datensatz leichter bearbeiten oder löschen kann.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.

Konfigurieren von Symbolen auf dem ÄnderungsbildschirmConfigure icons on the change screen

  1. Wählen Sie auf ChangeScreen das „X“-Symbol in der oberen linken Ecke aus.On ChangeScreen, select the "X" icon in the upper-left corner.

    Symbol „Abbrechen“

  2. Legen Sie die Eigenschaft OnSelect für dieses Symbol auf die folgende Formel fest:Set the OnSelect property for that icon to this formula:

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

    Wenn der Benutzer dieses Symbol auswählt, werden alle Änderungen verworfen, die er in diesem Bildschirm vorgenommen hat, und der Anzeigebildschirm wird geöffnet.When the user selects this icon, any changes that the user made in this screen are discarded, and the view screen opens.

  3. Wählen Sie in der oberen rechten Ecke das Häkchensymbol aus.In the upper-right corner, select the checkmark icon.

    Häkchensymbol

  4. Legen Sie die Eigenschaft OnSelect für das Häkchen auf die folgende Formel fest:Set the OnSelect property for the checkmark to this formula:

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

    Wenn der Benutzer dieses Symbol auswählt, werden alle Änderungen gespeichert, die er in diesem Bildschirm vorgenommen hat, und der Anzeigebildschirm wird geöffnet.When the user selects this icon, any changes that the user made is this screen are saved, and the view screen opens.

  5. Wählen Sie auf der Registerkarte Einfügen die Option Symbole und dann das Papierkorbsymbol aus.On the Insert tab, select Icons, and then select the Trash icon.

  6. Legen Sie für die Eigenschaft Farbe des neuen Symbols Weiß fest, und verschieben Sie das neue Symbol, sodass es neben dem Häkchensymbol angezeigt wird.Set the new icon's Color property to White, and move the new icon so it appears next to the checkmark icon.

    Papierkorbsymbol

  7. Legen Sie die Eigenschaft Visible für das Papierkorbsymbol auf die folgende Formel fest:Set the Visible property for the trash icon to this formula:

    EditForm1.Mode = FormMode.Edit

    Dieses Symbol wird nur angezeigt, wenn sich das Formular im Bearbeitungsmodus befindet und nicht im Modus Neu.This icon will appear only when the form is in Edit mode, not in New mode.

  8. Legen Sie die Eigenschaft OnSelect für das Papierkorbsymbol auf die folgende Formel fest:Set the OnSelect property for the trash icon to this formula:

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

    Wenn der Benutzer dieses Symbol auswählt, wird der ausgewählte Datensatz aus der Datenquelle gelöscht, und der Anzeigebildschirm wird geöffnet.When the user selects this icon, the selected record is deleted from the data source, and the view screen opens.

Testen der AppTest the app

  1. Wählen Sie den ViewScreen aus, und rufen Sie die Vorschau durch Drücken von F5 auf (oder durch Auswählen des Vorschausymbols in der Nähe der oberen rechten Ecke).Select the ViewScreen, and then open Preview by pressing F5 (or by selecting the Preview icon near the upper-right corner).

    Öffnen des Vorschaumodus

  2. Tippen oder fügen Sie mindestens einen Buchstaben in das Suchfeld ein, um in der Liste basierend auf dem Namen des Freiwilligen zu filtern.Type or paste one or more letters in the search box to filter the list based on the name of the volunteer.

  3. Klicken Sie einmal oder mehrmals auf das Symbol zum Sortieren, um die Daten in aufsteigender oder absteigender Reihenfolge basierend auf dem Namen des Freiwilligen anzuzeigen.Select the sort icon one or more times to show the data ascending or descending order based on the name of the volunteer.

  4. Fügen Sie einen Datensatz hinzu.Add a record.

  5. Aktualisieren Sie den hinzugefügten Datensatz, und speichern Sie die Änderungen.Update the record that you added, and then save the changes.

  6. Aktualisieren Sie den hinzugefügten Datensatz, und widerrufen Sie die Änderungen.Update the record that you added, and then cancel the changes.

  7. Löschen Sie den hinzugefügten Datensatz.Delete the record that you added.

  8. Schließen Sie den Vorschaumodus durch Drücken von ESC (oder durch Auswählen des Schließsymbols in der Nähe der oberen rechten Ecke).Close Preview mode by pressing Esc (or by selecting the close icon in the upper-right corner).

Nächste SchritteNext steps

  • Drücken Sie STRG+S, um Ihre App in der Cloud zu speichern, sodass Sie sie auf anderen Geräten ausführen können.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • Sie können die App freigeben, damit sie von anderen Personen ausgeführt werden kann.Share the app so that other people can run it.
  • Erfahren Sie mehr über Funktionen wie Patch, mit denen Sie Daten verwalten können, ohne ein Standardformular zu erstellen.Learn more about functions such as Patch, which you can use to manage data without creating a standard form.
  • Verknüpfen Sie diese App mit einer Projektmappe, damit Sie diese beispielsweise in einer anderen Umgebung bereitstellen oder sie auf AppSource veröffentlichen können.Link this app to a solution so that you can, for example, deploy it to a different environment or publish it on AppSource.