Übung: Eine Canvas-App erstellen

Abgeschlossen

In dieser Lerneinheit erstellen Sie eine Canvas-App mit einer Microsoft Excel-Arbeitsmappe als Datenquelle, die in Microsoft OneDrive gespeichert ist. Diese Excel-Arbeitsmappe enthält eine Tabelle mit verschiedenen Gebäuden von Contoso Manufacturing. Heute müssen sie die gemeinsam genutzte Arbeitsmappe per E-Mail zwischen Personen versenden, während sie zu verschiedenen Orten reisen, um Aktualisierungen vorzunehmen. Mit einer Power Apps-Canvas-App können sie die Gebäude direkt auf ihren Smartphones anzeigen. Darüber hinaus können sie die Informationen bearbeiten und sogar neue Gebäude hinzufügen.

In diesem Beispiel wird Excel verwendet. Beachten Sie jedoch, dass Sie Daten aus vielen anderen Quellen verwenden können, beispielsweise:

  • Microsoft Dataverse
  • Microsoft SharePoint
  • Cloud-Dienste wie Salesforce
  • Lokale Quellen wie Microsoft SQL Server

Dadurch entsteht für Sie die Flexibilität, Ihre App aus Ihren Daten zu erstellen – unabhängig davon, wo sie sich befinden. Sie können auch Datenquellen in Power Apps kombinieren, um auf einfache Weise Assoziationen zwischen verschiedenen Datenquellen herzustellen. Wenn Sie über kein Power Apps-Konto verfügen, können Sie sich kostenlos für einen Power Apps-Community-Plan registrieren. Auf diese Weise können Sie Power Apps in Ihrer eigenen Umgebung erkunden und mehr darüber erfahren. Weitere Informationen und die Möglichkeit zur Registrierung finden Sie unter https://powerapps.microsoft.com/communityplan/

Eine Basis-Canvas-App erstellen

Mit einer Datenquelle verbinden

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

  1. Laden Sie die Datei Contoso-Site-Tracking.zip herunter, extrahieren Sie alle Dateien und speichern Sie sie in Ihrem OneDrive-Konto.

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

  3. Wählen Sie im linken Bereich Erstellen aus.

  4. Wählen Sie im Abschnitt Mit Daten beginnen die Option Excel aus.

  5. Klicken Sie unter Verbindungen auf OneDrive. Wenn die Verbindung nicht verfügbar ist, klicken Sie auf Neue Verbindung, um eine zu erstellen.

  6. Wählen Sie unter Excel-Datei auswählen rechts die Datei Contoso Site Tracking.xlsx aus.

  7. Klicken Sie unter Tabelle auswählen auf SiteInspector und auf Verbinden.

Power Apps generiert die App, indem es Ihre Daten überprüft und sie mit den Fähigkeiten von Power Apps abgleicht, sodass Sie eine funktionierende App als Ausgangspunkt erhalten. Generierte Apps basieren immer auf einer einzelnen Liste oder Tabelle, aber Sie können der App später weitere Daten hinzufügen.

Screenshot von veröffentlichten Anwendungen

Die generierte App erkunden

Ihre neue Anwendung mit drei Bildschirmen wird jetzt in Power Apps Studio geöffnet. Alle aus Daten generierten Apps verfügen über dieselben Bildschirme, die Sie im Bereich „Bildschirme“ anzeigen können:

  • Bildschirm durchsuchen – Dieser Bildschirm wird standardmäßig angezeigt. Hier können Sie die Daten aus Ihrer Datenquelle durchsuchen, sortieren und aktualisieren. In diesem Bildschirm können Sie mithilfe des Pluszeichens (+) Elemente zur Datenquelle hinzufügen.

    Hinweis

    Dies wird in der Benutzeroberfläche als BrowseScreen1 aufgeführt.

  • 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.

    Hinweis

    Dies wird in der Benutzeroberfläche als DetailScreen1 aufgeführt.

  • Bildschirm zum Bearbeiten/Erstellen – In diesem Bildschirm können Sie ein vorhandenes Element bearbeiten oder ein neues Element erstellen.

    Hinweis

    Dies wird in der Benutzeroberfläche als EditScreen1 aufgeführt.

Das Bild zeigt, wie Ihre App mit drei Bildschirmen im App Studio angezeigt wird.

Screenshot der App mit drei Bildschirmen in App Studio

Wählen Sie Screenshot des Pfeils zum Starten der App-Vorschau Abspielen in der oberen rechten Ecke aus, um die Verwendung der App zu üben. Die App enthält alle Daten aus der Tabelle und ist in der Standardversion bereits sehr benutzerfreundlich.

Nachdem Sie die Contoso Site Tracking-App generiert haben, sollten Sie sich einige Minuten Zeit nehmen, um durch die App zu klicken und ihr Design zu erkunden. Beachten Sie, wie Sie einen Katalog verwenden, um die Datensätze aus der Excel-Datei zu durchsuchen. Wenn Sie auf einen Datensatz klicken, gelangen Sie zu einem anderen Bildschirm, auf dem ein Form-Steuerelement die zusätzlichen Details anzeigt. Die App bietet auch die Möglichkeit, diese Zeilen zu bearbeiten oder sogar eine neue Zeile zu erstellen. Sie haben eine funktionale App erstellt, auf der Sie jetzt aufbauen können.

Schließen Sie nach Abschluss der Erkundung der App den Vorschaumodus, indem Sie in der oberen rechten auf „X“ klicken. Sie müssen Ihre App speichern, damit sie auf einem Smartphone sichtbar ist.

Ihre App speichern

Wählen Sie die Schaltfläche Speichern direkt neben der Wiedergabe-Schaltfläche aus, um Ihre App zu speichern. Ersetzen Sie den aktuellen Titel „App“ durch Contoso Site Tracking-App, und klicken Sie dann auf Speichern. Wenn alle Änderungen erfolgreich gespeichert wurden, wird ein grünes Häkchen angezeigt. Sie können jetzt die App auf Ihrem Smartphone öffnen. Später werden wir den Zugriff einer App über Ihr Smartphone durchgehen.

Screenshot der Schaltfläche „Speichern“

Steuerelemente in Power Apps

Ein Steuerelement ist ein Element der Benutzeroberfläche, das eine Aktion auslöst oder Informationen anzeigt. Viele Steuerelemente in Power Apps funktionieren wie die Steuerelemente, die Sie aus anderen Apps kennen: Beschriftungen, Texteingabefelder, Dropdownlisten, Navigationselemente usw. Durch die Nutzung von Steuerelementen können Sie die Benutzererfahrung bereitstellen, die am besten darstellt, was Sie liefern möchten.

Über die Schaltfläche Einfügen können Sie auf die Power Apps-Steuerelemente zugreifen.

Screenshot der Liste „Steuerelementtyp“

Im Folgenden werden einige der üblichen Steuerelemente aufgeführt, die Ihre Apps ggf. interessanter und nützlicher gestalten:

  • Galleries – Bei diesen Steuerelementen handelt es sich um Layoutcontainer mit Steuerelementen, die Zeilen aus einer Datenquelle zeigen. Diese werden oft verwendet, wenn Sie mehrere Datensätze gleichzeitig anzeigen möchten.

  • Forms – Diese Steuerelemente zeigen Details zu Ihren Daten an und ermöglichen Ihnen das Erstellen und Bearbeiten von Datensätzen.

  • Media – Mit diesen Steuerelementen können Sie Hintergrundbilder, eine Kameraschaltfläche (damit Benutzer über die App Bilder aufnehmen können) und einen Barcodeleser (für die schnelle Erfassung und Identifizierung von Informationen) und weitere Elemente hinzufügen.

  • Charts – Mit diesen Steuerelementen können Sie Diagramme hinzufügen, sodass Benutzer unterwegs sofort Analysen durchführen können.

Verschaffen Sie sich einen Überblick über die verfügbaren Steuerelemente, indem Sie die Registerkarte Einfügen auswählen und sich die einzelnen Optionen ansehen.

Den Bildschirm zum Durchsuchen erkunden (BrowseScreen1)

Nachdem wir nun einige der verfügbaren Steuerelemente untersucht haben, möchten wir feststellen, wie sie in unserer App zur Inspektion der Website genutzt werden. Der erste Bildschirm in der App ist der Bildschirm zum Durchsuchen, dem standardmäßig der Name „BrowseScreen1“ zugewiesen ist.

Der Bildschirm zum Durchsuchen verfügt über mehrere Steuerelemente. Im Folgenden werden Steuerelemente des Bildschirms zum Durchsuchen aufgeführt, mit denen Sie sich vertraut machen sollten:

  • BrowseGallery1 – Dieses Katalogsteuerelement nimmt den größten Teil des Bildschirms ein und zeigt Daten aus Ihrer Datenquelle an.

  • NextArrow1 – Beim Klicken auf dieses Icon-Steuerelement wird der Detailbildschirm geöffnet.

  • IconNewItem1 – Durch Klicken auf dieses Symbolsteuerelement wird der Bildschirm zum Erstellen/Bearbeiten geöffnet.

Screenshot einer veröffentlichten Ansicht der hervorgehobenen Steuerelemente

Den Detailbildschirm erkunden

Der Detailbildschirm ist standardmäßig mit DetailScreen1 benannt. Er unterhält u. a. die folgenden Steuerelemente:

Screenshot des Detailbildschirms mit hervorgehobenen Steuerelementen

  1. DetailForm1 – Dieses Steuerelement enthält weitere Steuerelemente und eine Datenkarte für jede Spalte der Zeile, die angezeigt wird.

  2. Address_DataCard1 – Dies ist ein Kartensteuerelement. Jede Karte stellt eine einzelne Spalte der Zeile dar. In diesem Fall wird die Adresse aus der „Site Inspector“-Tabelle angezeigt, wie in der vorherigen Lerneinheit gezeigt.

  3. IconEdit1 – Beim Klicken auf dieses Steuerelement wird der Bildschirm zum Bearbeiten/Erstellen geöffnet, damit der Benutzer die entsprechende Aktion für das aktuelle Element ausführen kann.

Elemente des Bildschirms zum Bearbeiten/Erstellen

Der dritte Bildschirm in der App heißt EditScreen1. Er unterhält u. a. die folgenden Steuerelemente:

Screenshot des Bearbeitungsbildschirms mit hervorgehobenen Steuerelementen

  1. EditForm1 – Dieses Steuerelement enthält weitere Steuerelemente und eine Datenkarte für jede Spalte der Zeile, der bearbeitet wird.

  2. Address_DataCard2 – Dies ist ein Kartensteuerelement, das die Adresse aus der „Site Inspector“-Tabelle anzeigt, wie in der vorherigen Einheit gezeigt.

  3. IconAccept1 – Wenn dieses Steuerelement ausgewählt wird, werden die Änderungen des Benutzers gespeichert.

Die App auf Ihrem Gerät installieren

Power Apps kann auf mobilen Geräten mit der mobilen Power Apps-Anwendung verwendet werden. Installieren Sie die Power Apps Mobile-App auf Ihrem Smartphone, um zu erleben, wie es auf einem mobilen Gerät aussieht.

  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 Benutzernamen und dem zugehörigen Kennwort an.

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

Wenn die von Ihnen erstellte App auf einem mobilen Gerät verwendet wird, sollten Sie überprüfen, wie die Power App auf Mobilgeräten aussieht und ausgeführt wird, damit Sie Ihren Benutzern die bestmögliche Erfahrung bieten können.