Übung: Hinzufügen einer Datenquelle zur Canvas-App und Entwerfen funktionaler Seiten

8 Minuten

In Power Apps können Sie Ihre Daten mit einer bereits vorhandenen Anwendung oder mit einer Anwendung verbinden, die Sie von Grund auf neu erstellen. Ihre App kann eine Verbindung mit SharePoint, Microsoft Dataverse, Salesforce, OneDrive oder einer anderen Datenquelle herstellen.

Wir verwenden SharePoint als primäre Datenquelle für diese Anwendung. Sie können eine Verbindung mit der SharePoint-Website herstellen, um automatisch eine App aus einer benutzerdefinierten Liste zu generieren, eine Verbindung zu erstellen, bevor Sie Einer vorhandenen App Daten hinzufügen oder eine App von Grund auf neu erstellen.

Erstellen einer SharePoint-Website

Melden Sie sich mit Ihren Microsoft-Organisationsanmeldeinformationen beim SharePoint-Portal an.
Wählen Sie auf der SharePoint-Startseite +Website erstellen, um die SharePoint-Website zu erstellen.
Auf der SharePoint-Startseite finden Sie die folgenden Informationen:
- Wählen Sie den Websitetyp aus. die Wahl ist Kommunikationswebsite oder Teamwebsite. Wählen Sie "Kommunikationswebsite" aus.
- Geben Sie einen geeigneten Namen für die Website ein; Zum Beispiel Easy Sales.
- Fügen Sie bei Bedarf die Websitebeschreibung hinzu (optional).
- Wählen Sie in der Dropdownliste die Gewünschte Sprache aus.
Wählen Sie "Fertig stellen" aus, um eine SharePoint-Website zum Laden Ihrer Daten zu erstellen.

Eine moderne SharePoint-Website wird erstellt und kann in Sekunden verwendet werden. Sie können jetzt eine Liste, Dokumentbibliothek, Seite usw. in Ihrer neu erstellten Website erstellen.

Hinweis

Wenn Sie eine Teamwebsite ausgewählt haben, wird auch eine Microsoft 365-Gruppe erstellt.

Erstellen einer SharePoint-Liste

Eine SharePoint-Liste sammelt Daten mit einer bestimmten Struktur, ähnlich einer Tabelle, einer Kalkulationstabelle oder einer einfachen Datenbank. Es kann viele verschiedene Arten von Informationen enthalten, z. B. Zahlen, Text, Anlagen und sogar Bilder.

Für unsere Easy Sales-Anwendung erstellen wir eine Liste mit Details aller Produktkategorien: Sofas, Stühle, Tische und Teppiche.

Wählen Sie auf der neu erstellten SharePoint-Website unter dem Namen "Easy Sales" das Dropdown "+Neu " und dann " Liste" aus, um Ihre SharePoint-Liste zu erstellen.
Wählen Sie im Fenster "Liste erstellen " die Option "Leere Liste " aus, um eine SharePoint-Liste von Grund auf neu zu erstellen.
Konfigurieren Sie den Bereich "Erstellen " wie folgt:
- Geben Sie einen geeigneten Namen für die Liste ein; Zum Beispiel Easy Sales.
- Geben Sie ggf. die Beschreibung ein (optional).
- Lassen Sie das Kontrollkästchen In Websitenavigation anzeigen aktiviert.
- Wählen Sie "Erstellen" aus.

Hinzufügen von Daten zu Ihrer SharePoint-Liste

Sobald die Liste erstellt wurde, ist es an der Zeit, die Daten hinzuzufügen. Hier sind "Daten" die Details eines bestimmten Produkts. Die Produktdetails enthalten die folgenden Informationen: Name, Bild, Preis, Abmessungen, Gewicht, Farbe, Primärmaterial, Fläche, Höhe und 3D-Modell/Bild des Produkts, das in gemischter Realität angezeigt werden soll.

Wählen Sie in der erstellten Easy Sales-Liste+Spalte hinzufügen aus, um eine Spalte eines bestimmten Typs hinzuzufügen. Die folgende Liste zeigt die Spalten, die erstellt werden müssen, mit ihren Namen und Typen in diesem Format: Name der Spalte - Spaltentyp.
- Name: Einzelne Textzeile
- ImageLink: Einzelne Textzeile
- Preis: Einzelne Textzeile
- Abmessungen: Einzelne Textzeile
- Gewicht: Einzelne Textzeile
- Farbe: Einzelne Textzeile
- PrimaryMaterial: Einzelne Textzeile
- Höhe: Zahl
- Tiefe: Zahl
- Breite: Zahl
- Preis/cm2: Zahl
- ProductCategory: Einzelne Textzeile
- FileType: Einzelne Textzeile
Wählen Sie den Spaltentyp aus der Dropdownliste aus. Wählen Sie z. B. "Einzelne Textzeile" aus.

Geben Sie die Details der Spalte auf der Registerkarte "Spalte erstellen " ein, und wählen Sie " Speichern" aus.

Wiederholen Sie dieselbe Prozedur für die restlichen Spalten in der vorherigen Liste.

Hinweis

Nachdem Sie eine SharePoint-Liste erstellt haben, wird eine Standardspalte "Titel " erstellt, die Sie als "Name" umbenennen können.
Nachdem wir die Spalten hinzugefügt haben, müssen wir die tatsächlichen Daten unter diesen Spalten hinzufügen. Beginnen Sie mit dem Hinzufügen von Daten zu Spalten, indem Sie den benutzerdefinierten Ordner herunterladen, der alle Produktdetails für alle vier Listen enthält. Um auf die Daten zuzugreifen, wählen Sie den folgenden Link aus, wählen Sie oben rechts auf der Seite die Schaltfläche "Weitere Dateiaktionen " (...) und dann "Herunterladen" aus.

Benutzerdefinierter Power Apps-Ordner
Wählen Sie +Neu aus, um ein Element hinzuzufügen, und füllen Sie dann die erforderlichen Details aus, wie in der heruntergeladenen Excel-Datei angegeben. Wählen Sie "Speichern" aus, um die eingegebenen Details zu speichern.

Hinweis

Mit der Rasteransicht können Sie Informationen frei zu unterschiedlichen Zeilen oder Spalten hinzufügen.
Beginnen Sie mit dem Hinzufügen Ihrer Daten in ihren jeweiligen Spalten, wie in der Abbildung dargestellt:

Hinweis

Wenn Sie eigene Bilder einbeziehen möchten, können Sie die Bildlinks öffentlicher Bilder hinzufügen, die im Internet unter der Spalte "ImageLink " verfügbar sind. Sie können die Bildlinks abrufen, indem Sie mit der rechten Maustaste klicken und die Option " Bildadresse kopieren " auswählen.

Hinweis

Für die Kategorieliste "Teppich " benötigen Sie keine Werte für Höhe, Tiefe und Breite. Diese Produktkategorie nimmt den während der Measure in MR Sitzung gemessenen Flächenwert auf und ermittelt den Preis des Teppichs basierend auf der berechneten Fläche. Wir haben jedoch die Spalte "Preis/cm2 " hinzugefügt, um den Berechnungsprozess zu unterstützen.

Verbindung erstellen

Da nun alle für die Anwendung erforderlichen Daten in der SharePoint-Liste gespeichert sind, richten wir eine Verbindung in Power Apps ein. Sobald die Verbindung hergestellt wurde, können Sie auf einfache Weise über die Anwendung auf die SharePoint-Daten zugreifen.

Um mit dem Erstellen einer Verbindung zu beginnen, melden Sie sich bei Power Apps an, und wählen Sie "Verbindungen" in der linken Navigationsleiste aus. Wählen Sie dann +Neue Verbindung in der Nähe der oberen linken Ecke aus.
Wählen Sie SharePoint aus. Wir wählen SharePoint aus, da wir die erforderlichen Daten in SharePoint-Listen gespeichert haben.
Wenn Sie eine Verbindung mit SharePoint Online herstellen möchten, wählen Sie "Direkt verbinden( Clouddienste)" und dann " Erstellen" aus, und geben Sie dann, wenn Sie dazu aufgefordert werden, Anmeldeinformationen ein.
Die Verbindung wird erstellt, und Sie können eine App von Grund auf neu erstellen.

Hinweis

Auch wenn die Verbindung erstellt wird, können Sie in Ihrer SharePoint-Liste gespeicherte Daten weiterhin hinzufügen, bearbeiten und löschen. Alle Änderungen werden über die Verbindung in der Anwendung wiedergegeben.

Beginnen wir mit dem Erstellen der Easy Sales-Anwendung basierend auf den SharePoint-Daten und fügen dann bei Bedarf Daten aus anderen Quellen hinzu. Wenn Sie diesem Verfahren folgen, können Sie einige der Hauptseiten der Anwendung entwerfen. Sie erfahren beispielsweise, wie Sie einen Begrüßungsbildschirm, eine Produktseite und eine Produktlistenseite entwerfen. Außerdem greifen wir über das Power Apps-Galerie-Steuerelement auf Daten zu, die in der SharePoint-Liste gespeichert sind.

Öffnen einer leeren App

Wechseln Sie zur Power Apps-Startseite , und wählen Sie dann im linken Menü " Erstellen" aus. Wählen Sie Leere App aus, und wählen Sie dann unter Leere Canvas-AppErstellen aus.
Geben Sie einen Namen für Ihre App an. Zum Beispiel Easy-Sales. Wählen Sie "Telefon" und dann " Erstellen" aus.

Power Apps Studio erstellt eine leere App für Smartphones.

Hinweis

Während Sie eine App von Grund auf neu für verschiedene Geräte entwerfen können, konzentriert sich dieses Thema auf das Entwerfen einer App für Smartphones.
Wenn das Dialogfeld "Willkommen bei Power Apps Studio " geöffnet wird, wählen Sie "Überspringen" aus.

Herstellen einer Verbindung mit Daten

Um Daten in Ihre Power App einzuschließen, müssen Sie über die Connectors in Ihrer Anwendung eine Verbindung mit den Daten herstellen. Da wir alle Daten in einer SharePoint-Liste gespeichert haben, wählen wir SharePoint als einen der Connectors aus.

Wählen Sie auf der linken Seite von Power Apps Studio die Option "Daten " aus.
Wählen Sie nach dem Öffnen des Datenbereichs die Schaltfläche " Daten hinzufügen " aus, um eine Verbindung mit den Daten herzustellen.
Erweitern Sie im Fenster " Datenquelle auswählen " den Abschnitt "Connectors " und wählen Sie die SharePoint-Option aus.
In der vorherigen Übung haben wir bereits eine Verbindung erstellt. Wählen Sie die erstellte Verbindung aus, um die Daten zu Ihrer Anwendung hinzuzufügen. Wählen Sie die SharePoint-Website aus, die unter dem Namen Easy Sales erstellt wurde.
Nachdem Sie die SharePoint-Website für einfache Verkäufe ausgewählt haben, werden alle listen angezeigt, die auf dieser Website erstellt wurden. Wählen Sie als Nächstes die SharePoint-Liste aus, die für die Anwendung erstellt wurde, und klicken Sie auf "Verbinden".
Alle erforderlichen Daten sind verbunden und können in der Anwendung verwendet werden. Sie können jetzt mit der Erstellung der Anwendung beginnen.

Erstelle den Begrüßungsbildschirm

Wählen Sie links neben Power Apps Studio die Option "Strukturansicht" aus. Sie sollten bereits über einen leeren Bildschirm im Power Apps Studio verfügen. wenn nicht, wählen Sie auf der Registerkarte " Start " den Abwärtspfeil neben dem Bildschirm "Neu" aus, der die Bildschirmtypliste öffnet. Wählen Sie dann "Leer" aus, um einen leeren Bildschirm zu erstellen.
Benennen Sie den Bildschirm in den Begrüßungsbildschirm um, indem Sie das drei Punktesymbol (...) neben dem Bildschirmnamen auswählen und die Option "Umbenennen " auswählen.
Wählen Sie den neu erstellten Bildschirm aus, um seine Eigenschaften auf der Registerkarte "Eigenschaften " auf der rechten Seite des Bildschirms zu ändern.
Wählen Sie die Dropdownliste neben der Eigenschaft "Hintergrundbild " aus, um dem Bildschirm ein Bild hinzuzufügen. Wählen Sie +Fügen Sie eine Bilddatei hinzu, um die heruntergeladene Logodatei auszuwählen.
Legen Sie die Bildposition auf "Anpassen" fest, damit das gesamte Bild in die angegebene Größe passt. Mit der Option Anpassen wird das Bild proportional skaliert, und das Bild wird nicht zugeschnitten.
Erweitern Sie auf der Registerkarte "Einfügen " das Dropdownmenü " Eingabe ", und wählen Sie "Timer" aus. Ziehen Sie dann die Schaltfläche auf dem Bildschirm, und platzieren Sie sie an der gewünschten Stelle.
Zum Bearbeiten der Timereigenschaften können Sie entweder die Dropdownliste Eigenschaft in der oberen linken Ecke oder den Bereich Eigenschaften verwenden. Legen Sie die folgenden Eigenschaften fest:
- AutoStart: true
- Dauer: 2000
- Sichtbar: false
  
  Hinweis
  
  Die Dauer wird standardmäßig in Millisekunden gemessen. Seit 1 Sekunde = 1000 Millisekunden geben wir 2000 als Wert für die Dauer ein.
Wir möchten, dass der Begrüßungsbildschirm nur zwei Sekunden lang sichtbar ist und dann zur Startseite wechselt. Erstellen Sie einen leeren Bildschirm wie im vorherigen Schritt, und benennen Sie ihn als Startseite um. Wählen Sie später die Timerschaltfläche aus, die dem Begrüßungsbildschirm hinzugefügt wurde, und konfigurieren Sie die OnTimerEnd-Eigenschaft . Ersetzen Sie "false" durch den folgenden Inhalt:
```
Navigate('Home Page',ScreenTransition.Fade)
```
Speichern Sie Ihre Anwendung, indem Sie zu "Datei>speichern" navigieren. Wählen Sie als Nächstes die Cloudoption und dann "Speichern" aus.

Erstellen der Startseite

Wählen Sie die zuvor erstellte Startseite aus. Um vier Schaltflächen einzufügen, navigieren Sie zur Registerkarte "Einfügen" , und wählen Sie die Option "Schaltfläche " aus, um dem Bildschirm Schaltflächen hinzuzufügen. Passen Sie die Größe und Position dieser Schaltflächen nach Bedarf an. Benennen Sie sie als Sofas_button, Chairs_button, Tables_button bzw. Carpets_button um.
Ändern Sie den Anzeigetext der Schaltflächen, um Produktkategorien wie Sofas, Stühle, Tische und Teppiche anzugeben.
Wir verwenden diese Schaltflächen, um zur Liste der Produkte unter verschiedenen Kategorien zu navigieren. Dazu müssen wir die Produkte aus der SharePoint-Liste basierend auf der Produktkategorie herausfiltern. Erstellen Sie zwei neue Blank-Bildschirme und benennen Sie sie in Produkte und Teppiche um.
Wählen Sie die neu erstellte Schaltfläche Sofas_button aus, und konfigurieren Sie die OnSelect-Eigenschaft . Nachdem Sie die Schaltfläche ausgewählt haben, sollte es uns zur Produktliste-Seite weiterleiten, die im vorherigen Schritt erstellt wurde. Ersetzen Sie " false" durch den folgenden Code:
```
Navigate(Products,ScreenTransition.Cover, {ID:1});
```
Hinweis

Die ID ist eine Kontextvariable mit einem bestimmten zugewiesenen Wert. Dieser Wert wird an die Zielseite übergeben, die in der Navigationsfunktion erwähnt wird. Der der Variablen zugewiesene Wert filtert die Produkte basierend auf der Produktkategorie aus.
Wiederholen Sie dieselbe Prozedur für die anderen drei Schaltflächen. Stellen Sie erneut sicher, dass Sie in der Navigationsfunktion die richtigen Bildschirmnamen angeben. Verwenden Sie zum Konfigurieren der OnSelect-Eigenschaft der Schaltflächen "Stühle", "Tabellen" und "Teppiche " die Funktion "Navigieren" wie folgt:
```
Navigate(Products,ScreenTransition.Cover, {ID:2});
```
```
Navigate(Products,ScreenTransition.Cover, {ID:3});
```
```
Navigate(Carpets,ScreenTransition.Cover)
```
Tipp

Um den Fortschritt zu speichern, wählen Sie oben die Registerkarte "Datei " und dann die Option " Speichern" aus . Sie können auch STRG+S verwenden, um den Fortschritt zu speichern.
Hinweis

Die Standardsyntax der Navigationsfunktion lautet: Navigate(Screen [, Transition [, UpdateContextRecord]])
- Bildschirm: Erforderlich. Der anzuzeigende Bildschirm.
- Übergang: Optional. Der visuelle Übergang, der zwischen dem aktuellen und dem nächsten Bildschirm verwendet werden soll. Der Standardwert ist None.
- UpdateContextRecord: Optional. Ein Datensatz, der den Namen von mindestens einer Spalte und einen Wert für jede Spalte enthält. Dieser Datensatz aktualisiert die Kontextvariablen des neuen Bildschirms so, als ob sie an die UpdateContext-Funktion übergeben wird.
Tipp

Sie können Ihre Anwendung testen, indem Sie die F5-TASTE auf der Tastatur drücken oder auf die Schaltfläche " Wiedergeben " in der oberen rechten Ecke von Power Apps Studio klicken.

Verwenden des Katalog-Steuerelements

Nachdem wir die Produktkategorien hinzugefügt haben, wird die Liste der Produkte unter jeder Kategorie angezeigt. In Power Apps verwenden wir das Katalog-Steuerelement, um einen Datensatz mit Daten zu sehen.

Wählen Sie im Bildschirm "Produkte " auf der Registerkarte " Einfügen " die Option " Katalog>vertikal " aus, um ihrem Bildschirm ein Katalogsteuerelement hinzuzufügen.
Benennen Sie sie in Gallery_products um. Konfigurieren Sie auf der Registerkarte "Eigenschaften " im linken Bereich die Eigenschaft "Items " wie folgt:
```
If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))
```
Wir filtern die in der SharePoint-Liste gespeicherten Produkte basierend auf der Produktkategorie. Die Kontextvariablen werden für den Filtervorgang verwendet.
Konfigurieren Sie die Eigenschaft Galerie-Felder> im Eigenschaftenbereich, indem Sie Bearbeiten auswählen:
- Weisen Sie der Überschrift "Untertitel1" den Preis zu.
- Weisen Sie den Titel der Überschrift "Titel1 " zu.
Beim Zuweisen der vorherigen Felder werden Sie beobachten, dass die Daten in Ihrer Galerie angezeigt werden.
Passen Sie die Größe des Gallery_products nach Bedarf an. Wenn Sie die Bildverknüpfung zur Überschrift "Bild1 " hinzufügen möchten, wählen Sie das Bild im Katalog aus, und konfigurieren Sie die Eigenschaft auf der Registerkarte " Eigenschaft ", indem Sie diese Codezeile hinzufügen:
```
ThisItem.ImageLink
```
Nun fügen wir am oberen Rand des Bildschirms eine Beschriftung ein, indem wir die Option "Bezeichnung" auswählen. Passen Sie dann die Position, Farbe und Textanzeige an, wie in der Abbildung dargestellt:
Fügen Sie ein Zurück-Symbol oberhalb des zuvor hinzugefügten Labels hinzu, damit der Benutzer bei Bedarf zur Startseite navigieren kann. Um das Symbol "Zurück " hinzuzufügen, erweitern Sie das Dropdownmenü "Symbole ", und wählen Sie das Symbol " Zurück " aus.
Positionieren Sie das Symbol "Zurück " richtig, und ändern Sie bei Bedarf die Anzeigefarbe. Konfigurieren Sie die OnSelect-Eigenschaft , indem Sie Folgendes hinzufügen:
```
Navigate('Home Page',ScreenTransition.Cover)
```
Befolgen Sie das gleiche Verfahren für die Teppiche-Seite. Konfigurieren Sie die Items-Eigenschaft der Galerie, die zur Seite "Teppiche" hinzugefügt wurde, wie folgt:
```
Filter('Easy Sales',ProductCategory = "Carpet")
```
Tipp

Um den Fortschritt zu speichern, wählen Sie oben die Registerkarte "Datei " und dann die Option " Speichern" aus . Sie können auch STRG+S verwenden, um den Fortschritt zu speichern.

Nachdem Sie die vorstehenden Schritte implementiert haben, erfahren Sie, wie Ihre Anwendung aussehen muss. Die Anwendung enthält einen ausgezeichneten Begrüßungsbildschirm, eine Startseite und einen Produktbestand zum Durchsuchen von Produkten.

Feedback

War diese Seite hilfreich?