Übung – Ihre erste Power Apps-App als herkömmlicher Entwickler erstellen

  • 10 Minuten

In dieser Lerneinheit erstellen Sie eine mobile App, mit deren Hilfe Mitarbeiter im Außendienst Bestände überprüfen und gegebenenfalls Teile bestellen können. Wir werden Excel als Datenquelle verwenden, um als „Entwicklungsdaten“ für die Erstellung der App zu fungieren, zunächst ohne eine Verbindung zu vorhandenen Systemen wie Microsoft SQL Server oder Salesforce herstellen zu müssen.

Es gibt Hunderte von Datenkonnektoren, mit denen Power Apps per Voreinstellung sofort eine Verbindung herstellen kann, für viele Microsoft-Produkte und ‑Dienste sowie für Dienste von Drittanbietern. Wenn für Ihre Anforderungen kein Konnektor vorhanden ist, kann ein Entwickler einen benutzerdefinierten Konnektor für diese Verbindung erstellen.

Hinweis

Für Power Apps ist entweder eine Microsoft 365-Lizenz oder eine kostenlose Testversion erforderlich. Erfahren Sie mehr über die Lizenzierungsoptionen. Microsoft-Produkte umfassen Microsoft Power Apps und Power Automate.

Mit einer Datenquelle verbinden

Gehen Sie wie folgt vor, um eine Verbindung mit einer Datenquelle herzustellen:

  1. Laden Sie die Arbeitsmappe „Flooring Inventory“ herunter, und speichern Sie sie in OneDrive.

  2. Navigieren Sie zu https://make.powerapps.com, und melden Sie sich mit Ihrem Organisationskonto an.

  3. Wählen Sie auf dem Startbildschirm im Navigationsbereich links die Schaltfläche + Erstellen aus.

  4. Wählen Sie unter den Optionen „Beginnen mit“ Excel aus.

  5. Ihnen wird möglicherweise eine Aufforderung angezeigt, eine bestehende Verbindung auszuwählen oder eine neue Verbindung zu erstellen. Stellen Sie sicher, eine OneDrive-Verbindung auszuwählen oder zu erstellen.

  6. Rechts auf dem Bildschirm wird die Aufforderung Eine Excel-Datei auswählen angezeigt. Suchen Sie nach FlooringInventory.xlsx, und wählen Sie diese Datei aus.

  7. Wählen Sie unter Tabelle auswählen FlooringEstimates aus, und klicken Sie unten rechts auf dem Bildschirm auf die Schaltfläche Verbinden.

Power Apps generiert die App, indem es Ihre Daten überprüft und sie mit den Funktionen von Power Apps abgleicht, sodass Sie eine funktionierende App mit drei Bildschirmen als Ausgangspunkt erhalten.

Vorschau der generierten App

Ihre neue App mit drei Bildschirmen wird jetzt in Power Apps Studio geöffnet.

Screenshot des Power Apps-Hauptentwicklungsfensters für Power Apps Studio

Drücken Sie zum Anzeigen einer Vorschau der App die F5-Taste, oder wählen Sie dafür das Symbol Wiedergeben oben rechts auf der Befehlsleiste aus. Die App enthält alle Daten aus der Tabelle und ist in der Standardversion bereits sehr benutzerfreundlich. Sie können das Suchfeld oben verwenden, Sie können durch Auswahl eines Artikels Details anzeigen usw.

Alle auf diese Weise aus Daten generierten Apps verfügen über die gleichen Bildschirme, die Sie im Bereich Strukturansicht anzeigen können:

  • Bildschirm zum Durchsuchen – Dieser Bildschirm wird standardmäßig angezeigt. Hier können Sie die Daten aus Ihrer Datenquelle durchsuchen, sortieren, filtern und aktualisieren. In diesem Bildschirm können Sie mithilfe des Pluszeichens (+) Elemente zur Datenquelle hinzufügen.
  • Detailbildschirm – Im Detailbildschirm werden alle Informationen über ein einzelnes Element angezeigt. In diesem Bildschirm können Sie ein Element zum Bearbeiten öffnen oder ein Element löschen.
  • Bildschirm zum Bearbeiten/Erstellen – In diesem Bildschirm können Sie ein vorhandenes Element bearbeiten oder ein neues Element erstellen.

Die generierte App erkunden

Wählen Sie das Symbol (X) oben rechts in der Vorschau aus, um die App in den Bearbeitungsmodus zurückzusetzen. Beachten Sie, dass die App auch im Bearbeitungsmodus aktiv ausgeführt wird, als wäre sie im Überwachungsmodus für eine herkömmliche Anwendung. Wenn Sie Änderungen an den Steuerelementeigenschaften und Power fx-Formeln vornehmen, reagiert die App automatisch auf diese Änderungen, auch wenn sie sich im Bearbeitungsmodus befindet.

Tipp

Halten Sie die ALT-Taste gedrückt, um im Bearbeitungsmodus vorübergehend in den Vorschaumodus zu wechseln. Wenn Sie diese Taste gedrückt halten und die App auswählen, verhält sie sich wie im Vorschaumodus. Wenn Sie die Taste loslassen, kehrt die App automatisch in den Bearbeitungsmodus zurück, und Sie können auf Ihre App klicken, um die Steuerelemente normal auszuwählen.

Bestandsanforderungsbildschirm hinzufügen

Die generierte App enthält einen Bildschirm zum Hinzufügen von Datenzeilen durch eine Neuverwendung des Datenbearbeitungsbildschirms. Unsere App verwendet jedoch stattdessen das (+)-Symbol in der App, um dem Benutzer die Möglichkeit zu geben, Bestandserweiterungen für das Lager aus dem Home Office anzufordern.

  1. Klicken Sie auf den Bildschirm EditScreen1 des Strukturansichtsbereichs links auf Ihrem Bildschirm.

  2. Klicken Sie auf die Auslassungspunkte ... rechts neben „EditScreen1“, das nun hervorgehoben ist, und wählen Sie dann Bildschirm duplizieren aus.

  3. Klicken Sie in der Strukturansicht mit der rechten Maustaste auf EditScreen1_1, und wählen Sie dann Umbenennen aus. Geben Sie InventoryRequest als neuen Namen für den Bildschirm ein, und drücken Sie die EINGABETASTE, um dies zu speichern.

  4. Klicken Sie in der Strukturansicht auf BrowseScreen1, um zum ersten Bildschirm zurückzukehren, und auf das Symbol (+) oben rechts auf dem App-Bildschirm, um dies zu bearbeiten.

  5. Passen wir jetzt die Eigenschaft OnSelect an. Standardmäßig sollte sie in der Formelleiste angezeigt werden. Wenn dies nicht der Fall ist, können Sie diese Eigenschaft aus der Dropdownliste links von der Formelleiste auswählen und den Inhalt der Formelleiste mit Folgendem ersetzen:

        Navigate(InventoryRequest, ScreenTransition.None)

  6. Halten Sie die ALT-Taste gedrückt, und klicken Sie auf das Symbol (+), um die Navigate-Funktion zu testen, die Sie gerade geschrieben haben. Die App sollte den InventoryRequest-Bildschirm laden, den Sie gerade erstellt haben.

  7. Klicken Sie in der Strukturansicht nun auf EditForm1_1, und drücken Sie die Taste ENTF zum Löschen des Steuerelements.

Dem neuen Bildschirm Steuerelemente hinzufügen

  1. Wählen Sie die Schaltfläche Einfügen auf der Befehlsleiste aus, und öffnen Sie den Bereich Einfügen.

  2. Wählen Sie Textbeschriftung und Texteingabe aus, um von jedem Steuerelementtyp einen dem Bildschirm hinzuzufügen.

  3. Ziehen Sie die beiden Steuerelemente so auf den Bildschirm, dass sie sich unter der Kopfzeile befinden und an der Mitte des Bildschirms ausgerichtet sind. Beachten Sie, wie Power Apps Ihnen dabei hilft, die Steuerelemente beim Ziehen auszurichten.

  4. Klicken Sie auf die Beschriftung auf dem App-Bildschirm, um sie auszuwählen, und ändern Sie auf der rechten Seite im Fenster Eigenschaften die Eigenschaft Text in Anforderungsgrund.

  5. Klicken Sie auf das Textfeld auf dem App-Bildschirm, um es auszuwählen, und ändern Sie auf der rechten Seite im Fenster Eigenschaften die Angabe der Eigenschaft Default in Bestand für Kundenbedürfnisse benötigt.

  6. Verwenden Sie Einfügen, um Ihrem Bildschirm eine weitere Textbeschriftung hinzuzufügen.

  7. Wählen Sie erneut Einfügen aus, und verwenden Sie das Suchfeld, um nach einem Dropdown-Steuerelement zu suchen. Geben Sie „drop“ ein, und wählen Sie Dropdown aus, um dem Bildschirm ein Dropdown-Steuerelement hinzuzufügen.

  8. Klicken Sie auf beide Steuerelemente, und ziehen Sie sie entsprechend, um sie mit den anderen Steuerelementen und untereinander auszurichten. Ändern Sie den Text für die neue Beschriftung in Lagerartikel.

  9. Klicken Sie auf das Dropdown-Steuerelement, um es auszuwählen, und wählen Sie im Eigenschaftenfenster auf der rechten Seite die Dropdownliste der Eigenschaft Items und dann FlooringEstimates aus. Klicken Sie dann auf die Dropdownliste der Eigenschaft Value, und wählen Sie Name aus.

  10. Klick auf die Eigenschaftsbeschriftung Items, und beachten Sie, dass sich der Cursorfokus jetzt in der Formelleiste mit ausgewählter Items-Eigenschaft befindet.

  11. Sortieren Sie die Elemente nach Namen, indem Sie die folgende Formel eingeben:

        Sort(FlooringEstimates, Name, SortOrder.Ascending)

    Power Apps Studio-Bearbeitungsfenster mit Fehlern in der App nach dem letzten Schritt

Fehler beheben und eine Datenverbindung hinzufügen

  1. Klicken Sie oben rechts auf dem App-Bildschirm auf das Symbol ✖. Die OnSelect-Eigenschaft des Symbols wird in der Formelleiste angezeigt. Ändern Sie die Formel in ausschließlich Back(). So wird der Fehler behoben.

  2. Wählen Sie im linken Bereich das Datensymbol aus, um das Fenster Daten anzuzeigen. Die OneDrive-Verbindung, mit der wir die App gestartet haben, wird dort aufgeführt.

  3. Wählen Sie ➕ Daten hinzufügen aus, um das Verbindungssuchfeld zu öffnen und nach Office 365 Outlook zu suchen.

  4. Wenn Sie bereits eine Verbindung definiert haben, klicken Sie darauf, um sie hinzuzufügen. Wenn die Verbindung aufgelistet ist, wählen Sie die Option Eine Verbindung hinzufügen aus, und wenn der Bereich für eine neue Verbindung rechts geöffnet wird, klicken Sie auf Verbinden, um die Verbindung hinzuzufügen.

  5. Wählen Sie das Symbol ✔ in der Kopfzeile Ihrer App aus. Die OnSelect-Eigenschaft für das Symbol wurde für die Formelleiste ausgewählt.

  6. Ändern Sie die OnSelect-Formel des Symbols in die folgende Formel. Diese Formel sendet eine E-Mail an Sie selbst (oder den App-Benutzer) und fordert dazu auf, mehr Bestand zu bestellen.

Office365Outlook.SendEmailV2(
    User().Email,
    "New Request: " & TextInput1.Text,
    User().FullName & " has requested more inventory for " &
        Dropdown1.Selected.Name & " be ordered. There is currently " &
        Dropdown1.Selected.InventoryInSquareFeet & " square feet left in stock."
);
Back()

Hinweis

Verwenden Sie ein Semikolon (;) als Trennzeichen, um einem Ereignis mehr als eine Anweisung hinzuzufügen.

Ein Beispiel für die E-Mail, die gesendet wird, wenn eine Anfrage in der App gespeichert wird

App speichern und veröffentlichen

Sie müssen Ihre App speichern und veröffentlichen, damit sie auf einem Smartphone sichtbar ist. Wählen Sie im Menüband oben rechts den Dropdownpfeil neben dem Symbol „Speichern“ und dann die Option Speichern unter aus. Ersetzen Sie den aktuellen Titel „App“ durch Flooring-Bestand, und klicken Sie dann auf Speichern. Wählen Sie nun in Ihrem Menüband das Symbol Veröffentlichen aus, und nach einigen Minuten können Sie auf Ihrem Smartphone auf die App zugreifen und sie verwenden.

Wenn Sie eine neue App zum ersten Mal speichern, werden Sie aufgefordert, Ihre App zu veröffentlichen, damit diese Version „live“ ist. Nach dieser ersten Speicherung werden zusätzliche Speicherungen nicht automatisch „live“ geschaltet, sondern als neue Versionen gespeichert. In Zukunft müssen Sie die Schaltfläche Veröffentlichen auswählen, die nach dem Klicken auf Speichern auf dem Speicherbildschirm angezeigt wird.

Die App auf Ihrem Gerät installieren

Um zu sehen, wie die App auf dem Mobilgerät läuft, installieren Sie die Power Apps Mobile-App auf Ihrem Mobiltelefon. Wenn Sie eine App erstellen, sollten Sie sie mit dem Formfaktor testen, den die Benutzer verwenden.

  1. Laden Sie die Power Apps Mobile-App aus dem App Store für die Plattform, die Sie verwenden möchten, herunter.

  2. Melden Sie sich mit Ihrem Office 365-Benutzernamen und ‑Kennwort an.

  3. Führen Sie auf Ihrem Telefon oder Tablet die App Flooring-Bestand in Power Apps Mobile aus. Wenn Sie die App nicht installieren möchten, können Sie sie in einem Browser ausführen.

  4. Wenn Sie die App „Flooring-Bestand“ nicht sehen, wählen Sie in Ihrer Power Apps Mobile-App das Hamburger-Menü oben links auf dem Bildschirm aus, und aktivieren Sie Nicht für Produktionsumgebungen bestimmte Apps anzeigen.

Sie haben jetzt gesehen, wie einfach es ist, eine App aus einer Excel-Tabelle zu erstellen und anzupassen. Es war keine komplexe Programmierung Ihrerseits erforderlich, und Sie konnten einige schnelle, geringfügige Code-Änderungen vornehmen, um die App besser Ihren Bedürfnissen anzupassen.