App von Grund auf neu erstellenCreate an app from scratch

Erstellen Sie Ihre eigene App von Grund auf neu mithilfe einer Vielzahl von Datenquellen, wobei Sie später noch weitere Quellen hinzufügen können, wenn Sie möchten.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. Geben Sie die Darstellung und das Verhalten jedes UI-Elements so an, dass Sie das Ergebnis für Ihre genauen Ziele und Ihren Workflow optimieren können.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. Dieser Ansatz ist weitaus zeitaufwendiger als eine App automatisch zu generieren, aber erfahrene App-Entwickler können die beste App für ihre Anforderungen erstellen.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

Hinweis

Dieses Thema wurde für PowerApps Studio für Windows verfasst, die Schritte sind jedoch ähnlich, wenn Sie PowerApps in einem Browser öffnen.This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

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:

Bildschirm, auf dem ein Benutzer durch einen Satz von Daten scrollen kann

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:

Bildschirm, auf dem ein Benutzer Daten hinzufügen oder aktualisieren kann

VoraussetzungenPrerequisites

Sie können dieses Tutorial zur allgemeinen Information verwenden oder den hier aufgeführten Schritten exakt folgen.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  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.

    Start DayStart Day Start TimeStart Time Volunteer 1Volunteer 1 Volunteer 2Volunteer 2
    SaturdaySaturday 10am-noon10am-noon VasquezVasquez KumashiroKumashiro
    SaturdaySaturday noon-2pmnoon-2pm IceIce SinghalSinghal
    SaturdaySaturday 2pm-4-pm2pm-4-pm MykMyk MuellerMueller
    SundaySunday 10am-noon10am-noon LiLi AdamsAdams
    SundaySunday 10am-noon10am-noon SinghSingh MorganMorgan
    SundaySunday 10am-noon10am-noon 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 Erstellen oder Löschen einer Excel-Tabelle.For more information, see Create an Excel table in a worksheet.

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

  4. Wenn Sie mit PowerApps nicht vertraut sind:If you're new to PowerApps:

Erstellen einer leeren App und Verbinden mit DatenCreate a blank app, and connect to data

  1. Klicken oder tippen Sie in PowerApps Studio am linken Rand des Bildschirms im Menü File (Datei) auf New (Neu).In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    Option „New“ im Menü „File“

  2. Klicken oder tippen Sie in der Kachel Leere App auf Telefonlayout.On the Blank app tile, click or tap Phone layout.

    Option zum Erstellen einer App aus Daten

  3. Wenn Sie dazu aufgefordert werden, folgen Sie der Einführung, um die Hauptbereiche von PowerApps kennenzulernen (oder klicken oder tippen Sie auf Skip (Überspringen)).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    Schnelleinführung

    Sie können sich die Einführung jederzeit später anschauen. Klicken oder tippen Sie hierzu auf das Fragezeichensymbol in der Nähe der oberen rechten Ecke des Bildschirms, und klicken oder tippen Sie anschließend auf Take the intro tour (Einführung).You can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

  4. Klicken oder tippen Sie auf der linken Navigationsleiste rechts unten auf ein Symbol, um zur Miniaturansicht zu wechseln.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Umschalten der Ansichten

  5. Klicken oder tippen Sie im rechten Bereich auf Datenquelle hinzufügen.In the right-hand pane, click or tap Add data source.

    Datenquelle hinzufügen

  6. Führen Sie einen der folgenden Schritte aus:Perform either of these steps:

    • Wenn bereits eine Verbindung mit Ihrem Cloudspeicherkonto besteht, klicken oder tippen Sie darauf.If you already have a connection to your cloud-storage account, click or tap it.
    • Wenn keine Verbindung mit Ihrem Cloudspeicherkonto besteht, klicken oder tippen Sie auf Add Connection (Verbindung hinzufügen), klicken oder tippen Sie auf Connect (Verbinden), und geben Sie anschließend Ihre Anmeldeinformationen an, wenn Sie dazu aufgefordert werden.If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. Navigieren Sie unter Choose an Excel file (Eine Excel-Datei auswählen) zu eventsignup.xlsx, und klicken oder tippen Sie darauf.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    Angeben der Excel-Datei, die Sie verwenden möchten

  8. Klicken Sie unter Choose a table (Eine Tabelle auswählen) auf das Kontrollkästchen Schedule (Zeitplan), und klicken oder tippen Sie auf Connect.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    Angeben der Excel-Tabelle, die Sie verwenden möchten

    Die Registerkarte Data sources (Datenquellen) im rechten Bereich zeigt an, welche Datenquellen Sie Ihrer App hinzugefügt haben.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Anzeigen der verbundenen Datenquellen

    Dieses Tutorial erfordert nur eine Datenquelle, Sie können jedoch später weitere Datenquellen hinzufügen.This tutorial requires only one data source, but you can add more data sources later.

Anzeigen der DatenShow the data

  1. Klicken oder tippen Sie auf der Registerkarte Start auf Neuer Bildschirm, und klicken oder tippen Sie dann auf Bildschirmliste.In the Home tab, click or tap New screen and then click or tap List screen.

    Hinzufügen eines Layouts mit einer Überschrift, einem Untertitel und einem Textelement

    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. Klicken oder tippen Sie an einer beliebigen Position im Katalog – mit Ausnahme der Pfeile – z. B. direkt unterhalb des Suchfelds.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    Katalog auswählen

  3. Öffnen Sie im rechten Bereich die Liste Layouts, und klicken oder tippen Sie dann auf die Option, die nur einen Titel, einen Untertitel und einen Textkörper anzeigt.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    Katalog auswählen

  4. Klicken oder tippen Sie in der Eigenschaftenliste auf Items (Elemente), kopieren Sie diese Formel, und fügen Sie sie in die Bearbeitungsleiste ein:In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    Wenn Sie nicht sicher sind, wo sich die Eigenschaftenliste befindet, erfahren Sie dies unter Hinzufügen und Konfigurieren von Steuerelementen.If you're not sure where the property list is, see Add and configure controls.

    Hinweis

    PowerApps zeigt für Excel- oder SharePoint-Datenquellen, die Spaltennamen mit Leerzeichen enthalten, die Leerzeichen als "_X0020_" an.For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". In diesem Beispiel wird die Spalte "Volunteer 1" in einer Formel als "Volunteer_x0020_1" angezeigt.In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    Dieser Katalog zeigt die Daten aus der Tabelle Schedule an.This gallery shows the data from the Schedule table.

    Die Standard-„Schedule“-Daten im Katalog

    Mithilfe des Suchfelds kann im Katalog basierend auf dem Text, den der Benutzer eingibt, gefiltert werden.A search box can filter the gallery based on text that the user types. Wenn ein Benutzer mindestens einen Buchstaben in das Suchfeld eingibt, zeigt der Katalog nur die Datensätze an, bei denen das Feld Volunteer 1 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 1 field contains the text that the user typed.

    Mithilfe der Sortierschaltfläche können die Datensätze basierend auf Daten in der Spalte Volunteer 1 sortiert werden.The sort button can sort the records based on data in the Volunteer 1 column. Wenn ein Benutzer auf diese Schaltfläche klickt oder tippt, wechselt die Sortierreihenfolge zwischen aufsteigend und absteigend hin und her.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    Diese Formel enthält die Funktionen Sort, If, IsBlank, Filter und Text.That formula contains the Sort, If, IsBlank, Filter, and Text functions. 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

  5. Geben Sie ein i in das Suchfeld ein, und klicken oder tippen Sie einmal (oder eine ungerade Anzahl von Malen) auf die Sortierschaltfläche.Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    Der Katalog zeigt diese Ergebnisse an.The gallery shows these results.

    Sortieren und Filtern der Galerie

    Weitere Informationen zu den Funktionen Sort (Sortieren), Filter (Filtern) und weiteren FunktionenMore information about the Sort, Filter, and other functions

  6. Wählen Sie das Label-Steuerelement (Bezeichnung) oben auf dem Bildschirm aus, indem Sie auf das Steuerelement klicken oder tippen.Select the Label control at the top of the screen by clicking or tapping the control.

    Auswählen der Titelleiste

  7. Klicken oder tippen Sie in der Eigenschaftenliste auf Text, kopieren Sie diesen Text, und fügen Sie ihn in die Bearbeitungsleiste ein.In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    „View Records“"View Records"

    Ändern der Titelleiste

Erstellen des ChangeScreen und dessen BannerCreate the ChangeScreen and its banner

  1. Löschen Sie Screen1, und benennen Sie Screen2 in ViewScreen um.Delete Screen1, and rename Screen2 to ViewScreen.

    Umbenennen des Bildschirms

  2. Fügen Sie einen Bildschirm hinzu, und benennen Sie ihn in ChangeScreen um.Add a screen, and rename it ChangeScreen.

    Hinzufügen und Umbenennen des Bildschirms

  3. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Text und anschließend auf Bezeichnung.On the Insert tab, click or tap Text, and then click or tap Label.

  4. Konfigurieren Sie das Label-Steuerelement (Bezeichnung), das Sie soeben hinzugefügt haben:Configure the Label control that you just added:

    • Legen Sie die Text-Eigenschaft auf diese Formel fest:Set its Text property to this formula:
      „Change record“"Change record"

    • Legen Sie die Fill-Eigenschaft auf diese Formel fest:Set its Fill property to this formula:
      RGBA(62, 96, 170, 1).RGBA(62, 96, 170, 1).

    • Legen Sie die Color-Eigenschaft auf diese Formel fest:Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)

    • Legen Sie die Align-Eigenschaft auf Center fest.Set its Align property to Center.

    • Legen Sie die X-Eigenschaft auf 0 fest.Set its X property to 0.

    • Legen Sie die Width-Eigenschaft auf 640 fest.Set its Width property to 640. Das Label -Steuerelement (Bezeichnung) spiegelt Ihre Änderungen wider.The Label control reflects your changes.

      ChangeScreen mit Banner

Ein Formular hinzufügen und konfigurierenAdd and configure a form

  1. Klicken oder tippen Sie auf der Registerkarte Insert (Einfügen) auf Forms (Formulare) und anschließend auf Edit (Bearbeiten).On the Insert tab, click or tap Forms, and then click or tap Edit.

  2. Verschieben Sie das Formular bzw. ändern Sie dessen Größe so, dass es den Großteil des Bildschirms überdeckt.Move and resize the form to cover most of the screen.

    Ein Formular hinzufügen

    Das Formular hat standardmäßig die Benennung Form1, sofern Sie nicht bereits ein Formular hinzugefügt und wieder entfernt haben.The form is named Form1 by default unless you already added and removed a form. Benennen Sie in diesem Fall das Formular in Form1 um.In that case, rename the form to Form1.

  3. Legen Sie die DataSource-Eigenschaft von Form1 auf Schedule fest.Set DataSource property of Form1 to Schedule.

  4. Legen Sie die Item-Eigenschaft von Form1 auf diesen Ausdruck fest:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected

  5. Klicken oder tippen Sie im rechten Bereich auf das Kontrollkästchen jedes Felds, um es anzuzeigen.In the right-hand pane, click or tap the checkbox for each field to show it.

    Anzeigen der Felder im Formular

  6. Klicken oder tippen Sie unten auf dem Formular auf Benutzerdefinierte Karte hinzufügen.Near the bottom of the form, click or tap Add a custom card.

    Hinzufügen einer benutzerdefinierten Karte

  7. Fügen Sie ein Label-Steuerelement (Bezeichnung) zu der neuen Karte hinzu.Add a Label control in the new card.

  8. Legen Sie die AutoHeight-Eigenschaft des neuen Steuerelements auf TRUE und die Text-Eigenschaft auf die folgende Formel fest:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    Die Bezeichnung zeigt alle Fehlermeldungen aus dem Formular an.The label will show any errors from the form.

  9. Klicken oder tippen Sie in der linken Navigationsleiste auf die Miniaturansicht für den ChangeScreen, um diesen auszuwählen.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.

  10. Klicken oder tippen Sie auf der Registerkarte Insert (Einfügen) auf Icons (Symbole) und dann auf die Option zum Hinzufügen eines Rückwärtspfeils, und verschieben Sie dann den Pfeil in die linke untere Ecke des Bildschirms.On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.

  11. Legen Sie die OnSelect-Eigenschaft des Pfeils auf diese Formel fest:Set the arrow's OnSelect property to this formula:

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

    Wenn der Benutzer auf den Pfeil klickt oder tippt, öffnet die Navigate-Funktion den ViewScreen.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. Fügen Sie ein Steuerelement Button (Schaltfläche) unterhalb des Formulars hinzu, und legen Sie die Text-Eigenschaft auf „Save“ fest.Add a Button control under the form, and set the button's Text property to "Save".

    Hinzufügen einer Schaltfläche „Save“

  13. Legen Sie die Eigenschaft OnSelect der Schaltfläche auf die folgende Formel fest:Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    Wenn der Benutzer auf die Schaltfläche klickt oder tippt, speichert die Funktion SubmitForm (Formular absenden) alle Änderungen an der Datenquelle, und der ViewScreen wird erneut angezeigt.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. Fügen Sie unten auf dem Bildschirm eine weitere Schaltfläche hinzu, legen Sie deren Text-Eigenschaft auf „Remove“ und deren Eigenschaft OnSelect auf die folgende Formel fest:At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

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

    Wenn der Benutzer auf diese Schaltfläche klickt oder tippt, entfernt die Funktion Remove (Entfernen) den Datensatz, und der ViewScreen wird erneut angezeigt.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Legen Sie die Eigenschaft Visible der Schaltfläche Remove (Entfernen) auf die folgende Formel fest:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    Dieser Schritt blendet die Schaltfläche Remove (Entfernen) aus, wenn der Benutzer einen Datensatz erstellt.This step hides the Remove button when the user is creating a record.

    Der ChangeScreen entspricht diesem Beispiel:The ChangeScreen matches this example:

    Abschließender ChangeScreen

Festlegen der Navigation auf dem ViewScreenSet navigation from ViewScreen

  1. Klicken oder tippen Sie in der linken Navigationsleiste auf die Miniaturansicht für den ViewScreen.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    Öffnen des ViewScreen

  2. Klicken oder tippen Sie beim ersten Datensatz im Katalog auf den Pfeil Next (Weiter).Click or tap the Next arrow for the first record in the gallery.

    Pfeil „Weiter“

  3. Legen Sie die Eigenschaft OnSelect des Pfeils auf die folgende Formel fest:Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. Klicken oder tippen Sie in der oberen rechten Ecke auf das Pluszeichen.In the upper-right corner, click or tap the plus icon.

    Hinzufügen eines Datensatzes

  5. Legen Sie die Eigenschaft OnSelect des ausgewählten Symbols auf die folgende Formel fest:Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    Wenn der Benutzer auf dieses Symbol klickt oder tippt, wird der ChangeScreen angezeigt, wobei jedes Feld leer ist, damit der Benutzer einen Datensatz einfacher erstellen kann.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

Ausführen der AppRun the app

Während Sie die App anpassen, testen Sie Ihre Änderungen, indem Sie die App im Vorschaumodus ausführen, wie in den Schritten dieses Abschnitts beschrieben.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. Klicken oder tippen Sie in der linken Navigationsleiste auf die obere Miniaturansicht, um den ViewScreen auszuwählen.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    Auswählen von ViewScreen

  2. Öffnen Sie den Vorschaumodus durch Drücken von F5 (oder durch Klicken oder Tippen auf das Symbol Preview (Vorschau) in der Nähe der oberen rechten Ecke).Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Öffnen des Vorschaumodus

  3. Klicken oder tippen Sie auf den Pfeil „Next“ bei einem Datensatz, um Details zu diesem Datensatz anzuzeigen.Click or tap the Next arrow for a record to show details about that record.

  4. Ändern Sie auf dem ChangeScreen die Informationen in mindestens einem Feld, und speichern Sie Ihre Änderungen anschließend, indem Sie auf Save (Speichern) klicken oder tippen, oder entfernen Sie den Datensatz, indem Sie auf Remove (Entfernen) klicken oder tippen.On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.

  5. Schließen Sie den Vorschaumodus, indem Sie die ESC-TASTE drücken (oder indem Sie auf das Schließen-Symbol unter der Titelleiste klicken oder tippen).Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Schließen des Vorschaumodus

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 Kataloge, Formulare und Formeln.Learn more about galleries, forms, and formulas.