Übung – Eine Bestands-App mit SharePoint erstellen

  • 12 Minuten

Stellen Sie sich ein Szenario vor, in dem Sie möchten, dass Benutzer in Ihrem Unternehmen Contoso ihre Kaffeemaschinen selbst bestellen. Contoso möchte, dass Sie eine App erstellen, die Sie für jemanden freigeben können, der diesen Prozess durchführt.

In dieser Übung richten Sie ein paar SharePoint Lists ein, um die Kaffeemaschinen‑ und Bestelldaten zu speichern. Anschließend erstellen Sie eine Power Apps-Canvas-App, um mit diesen Daten zu interagieren und Bestellungen aufzugeben.

Die Maschinenliste erstellen

Ihre erste Aufgabe ist das Erstellen einer Maschinenliste:

  1. Laden Sie die Excel-Datei Machine Order Data herunter.

  2. Wechseln Sie zu einer SharePoint Online-Website, auf der Sie die Daten für Ihre App speichern möchten.

  3. Wählen Sie oben links Neu > Liste aus.

  4. Wählen Sie die Option Aus Excel aus.

    Screenshot der Seite „Eine Liste erstellen“ in SharePoint mit der Option „Von Excel“

  5. Wählen Sie Datei hochladen aus, und wählen Sie dann die Datei Machine-Order-Data.xlsx aus, die Sie zuvor heruntergeladen haben.

  6. Überprüfen Sie auf der Seite Anpassen, ob die Tabelle Maschinen sich im Dropdownmenü Tabelle aus dieser Datei auswählen befindet, und klicken Sie dann unten rechts auf die Option Weiter.

    Screenshot der Seite „Anpassen“ mit den Maschinen, die für die Tabelle ausgewählt wurden

  7. Sie können den Namen Ihrer Liste anpassen und eine Beschreibung hinzufügen (optional). Klicken Sie auf die Schaltfläche Erstellen, um fortzufahren. Warten Sie dann einen Moment auf Ihre neue Liste.

Sobald Ihre neue Liste Fertig ist, sollte Ihr Browser automatisch zur neuen Liste navigieren. Alle Daten aus Ihrer Excel-Tabelle sollten geladen und zur Verwendung bereit sein.

Die Liste mit Aufträgen erstellen

Als Nächstes führen Sie folgende Schritte aus, um die Liste mit Aufträgen zu erstellen:

  1. Wählen Sie unter dem SharePoint-Websitenamen links oben die Option Homepage aus.

  2. Wählen Sie oben links Neu > Liste aus.

  3. Wählen Sie Leere Liste aus.

  4. Benennen Sie Ihre Liste Orders-List, und wählen Sie dann Erstellen aus.

    Screenshot des auf „Orders-List“ eingerichteten Namens

  5. Auf der Seite Orders-List wird direkt unter dem Namen der Liste eine Spalte mit dem Namen „Titel“ angezeigt. Rechts daneben befindet sich die Option Spalte hinzufügen. Wählen Sie Spalte hinzufügen aus.

  6. Wählen Sie im Dialogfeld Spalte erstellen die Option Datum und Uhrzeit und dann Weiter aus.

  7. Nennen Sie diese Spalte OrderDate, und klicken Sie dann auf Speichern.

    Screenshot des Dialogfelds „Spalte erstellen“ mit hervorgehobener Schaltfläche „Namenseingabe“ und „Speichern“

  8. Wählen Sie erneut Spalte hinzufügen aus.

  9. Scrollen Sie nach unten, und wählen Sie dann Währung und Weiter aus.

  10. Nennen Sie diese Spalte OrderTotal, und klicken Sie dann auf Speichern.

Sie verfügen jetzt über eine SharePoint-Liste, in der Sie die Auftragsdaten für die Kaffeemaschinen speichern können.

Die Canvas-App erstellen

Folgen Sie diesen Schritten, um eine Canvas-App in Power Apps zu erstellen:

  1. Wechseln Sie zu make.powerapps.com.

  2. Wählen Sie links die Option Neue Rechnung erstellen aus.

  3. Wählen Sie Leere App aus.

    Screenshot der Seite „App erstellen“ in Power Apps mit der ausgewählten Option „Leere App“

  4. Wählen Sie die Option Erstellen unter Leere Canvas-App aus.

  5. Geben Sie Ihrer App den Namen Contoso Coffee Machine Ordering, und klicken Sie dann auf die Schaltfläche Erstellen.

  6. Nach einer kurzen Wartezeit wird der Canvas-App-Editor auf dem Bildschirm geöffnet, wo Sie Ihre Power Apps-Anwendung für die Interaktion mit Ihren SharePoint-Daten entwerfen und bearbeiten.

    Screenshot des Canvas-App-Editors

  7. Wählen Sie das Symbol Speichern in der rechten oberen Ecke aus. (Standardmäßig speichert Power Apps Ihre App automatisch alle zwei Minuten, jedoch erst nach dem ersten manuellen Speichern. Es ist daher immer eine gute Idee, Ihre App zu speichern, nachdem Sie sie erstellt haben.)

  8. Wählen Sie das Dropdownmenü Daten hinzufügen aus.

  9. Suchen Sie nach SharePoint (die Standardoption SharePoint, nicht SharePoint-Websites). Möglicherweise müssen Sie etwas durch die Ergebnisse scrollen, bis Sie es finden. Wenn noch keine Verbindung hergestellt wurde, wählen Sie Verbindung hinzufügen aus. Wenn bereits eine Verbindung besteht, können Sie Ihre vorhandene Verbindung beenden und zum nächsten Schritt wechseln, um fortzufahren.

    Screenshot des erweiterten Dropdownmenüs „Daten hinzufügen“ zum Anzeigen von Suchergebnissen für SharePoint

  10. Zum Erstellen einer neuen Verbindung wird auf der rechten Seite des Bildschirms ein Bereich geöffnet. Stellen Sie sicher, dass die Option Direkt verbinden (Cloud-Dienste) ausgewählt ist, und klicken Sie dann im unteren Teil des Bildschirms auf die Option Verbinden.

  11. Auf der rechten Seite Ihres Bildschirms sollte nun die Option Mit SharePoint-Website verbinden angezeigt werden, die Sie auffordert, die URL für den Speicherort Ihrer Liste einzugeben. Alternativ können Sie die SharePoint-Website unter den zuletzt geöffneten Websites suchen.

    Die SharePoint-Website, auf der Sie Ihre Maschinenlisten erstellt haben, sollte in der Liste mit aktuellen Websites erscheinen. Sie können die Website einfach auswählen, um fortzufahren.

    Wenn Ihre Website nicht in der Liste angezeigt wird, gehen Sie zurück zu der Website, auf der Sie die Liste erstellt haben, und kopieren Sie die URL (den Startbildschirm der Website, nicht die Listenseite). Fügen Sie die URL anschließend in die oberste Zeile des Bereichs ein. Sobald Power Apps die Website identifiziert hat, können Sie Verbinden auswählen und fortfahren.

  12. Im Bereich Liste auswählen. Wählen Sie die Kontrollkästchen Machine-Order-Data und Orders-List aus.

  13. Wählen Sie Verbinden aus.

    Screenshot des Dialogfelds „Liste auswählen“ mit den beiden ausgewählten Listen und der Schaltfläche „Verbinden“

Sie haben jetzt Ihre Power Apps-Anwendung erstellt und mit Ihren Daten verbunden, sodass Sie SharePoint direkt über die App lesen und darauf zurückschreiben können.

Die Canvas-App entwerfen

Lassen Sie uns unsere Canvas-App entwerfen, indem wir einige Steuerelemente einfügen und verbinden.

  1. Wählen Sie Einfügen > Textbeschriftung aus.

    Screenshot des erweiterten Menüs Einfügen, um wichtige Elemente, einschließlich Textbeschriftung, anzuzeigen

  2. Verschieben Sie die angezeigte Beschriftung oben links auf den Canvas, und ändern Sie dann ihre Größe, sodass sie sich über den gesamten Canvas erstreckt.

  3. Rechts auf dem Bildschirm können Sie die Steuerelementeigenschaften in Ihren Canvas-Apps über eine benutzerfreundliche Oberfläche bearbeiten, ohne Code bearbeiten zu müssen. Ändern Sie den Text bei weiterhin ausgewählter Beschriftung in Contoso Coffee Machine Ordering.

  4. Ändern Sie die Schriftgröße in 18.

  5. Wählen Sie für Textausrichtung Mitte aus.

  6. Neben der Farbe zeigt der Buchstabe A gibt die Textfarbe an, und das Farbeimer-Symbol gibt die Hintergrundfarbe der Beschriftung an. Wählen Sie das Textfarbe-SymbolA aus, und klicken Sie dann auf weiß.

  7. Wählen Sie das Farbeimer-Symbol und dann ein dunkles Blau aus (oder eine andere gewünschte Farbe).

    Screenshot des ausgewählten Farbeimersymbols zum Anzeigen der Farbauswahl

    Hinweis

    Bei den meisten Steuerelementen können Sie Einstellungen wie Schriftarten, Farben und Hintergrundfarben auf verschiedene Weise ändern. Der Bereich Eigenschaften ist eine Möglichkeit, aber möglicherweise stellen Sie auch fest, dass dieselben Optionen im Menüband der Befehlsleiste angezeigt werden.

  8. Wählen Sie im oberen Menüband Einfügen > Vertikaler Katalog aus.

  9. Es wird ein Popup-Fenster angezeigt, in dem Sie aufgefordert werden, den Katalog mit einer Datenquelle zu verbinden. Wählen Sie Machine-Order-Data aus.

  10. Zum Anpassen der Felder versuchen wir, die Menübandoberfläche der Befehlsleiste zu verwenden. Wählen Sie auf der Befehlsleiste Felder bearbeiten aus.

  11. Stellen Sie sicher, dass das Dropdownmenü Subtitle1 Price und die Option Title1 Machine Name anzeigt. Wählen Sie außerhalb des Dialogfelds Felder bearbeiten aus, um fortzufahren.

  12. Der in Ihrer Galerie angezeigte Text sollte den Namen der Maschine sowie den Preis mit einem „Beispielbild“ enthalten, das wir gleich korrigieren. Passen Sie nun die Größe der Galerie so an, dass sie unter die Kopfzeilenbeschriftung passt und somit die linke Hälfte der Canvas unter Ihrer Beschriftung einnimmt.

  13. Ersetzen wir dieses Beispielbild, damit wir das tatsächliche Produktbild anzeigen können. Wählen Sie im Katalog das erste Bildsymbol aus. Direkt unter dem Menüband der Befehlsleiste befindet sich das Eingabefeld für die fx-Formel, in das Sie Code schreiben können, um die Eigenschaften eines Steuerelements in Power Apps zu ändern. Löschern Sie den Text SampleImage, und geben Sie dann ThisItem.Photo ein.

    Screenshot des in der Bearbeitungsleiste ausgewählten Bildes, mit der auf „ThisItem.Photo“ eingerichteten Formel

  14. Als Nächstes ändern wir das Textformat unseres Untertitelfelds, um die Währung anzuzeigen. Wählen Sie die Beschriftung Subtitle1 im ersten Element Ihrer Galerie aus, die den Preis des Artikels anzeigt. Beachten Sie, dass dieses Steuerelement in der Strukturansicht grau hervorgehoben ist und das Formelfeld ThisItem.Price anzeigt.

    Screenshot der Strukturansicht, in der der erste Bildschirm erweitert ist, um den ersten Katalog anzuzeigen, der erweitert ist, um den ersten Untertitel anzuzeigen.

  15. Ändern Sie im Formularfeld die Eigenschaft „Text“ in: Text(ThisItem.Price,"$##,###.00"). Sie sehen sofort, dass Ihr Preis mit Dollarzeichen, Tausendertrennzeichen und Cent angezeigt wird.

  16. Als Nächstes fügen wir ein Formular hinzu, sodass wir unsere Daten ändern können. Wählen Sie die leere Hälfte Ihres Bearbeitungsbereichs (um die Galerie zu verlassen) und dann Einfügen > Formular bearbeiten aus.

  17. Wählen Sie die Orders-List als Datenquelle aus, und Power Apps füllt das Formular mit Feldern entsprechend unseren SharePoint-Listenspalten.

  18. Positionieren Sie das Formular neu, und passen Sie seine Größe an, damit es in die rechte Hälfte Ihres Canvas passt.

    Screenshot der Canvas mit dem ausgewählten Formular und der „Orders-List“ als DataSource in der Formelleiste.

  19. Wählen Sie die Karte Titel aus dem Formular aus. Beachten Sie, dass links neben dem Kartennamen direkt über der ausgewählten Karte ein Vorhängeschlosssymbol angezeigt wird. Wir entsperren Karte, um sie anzupassen. Klicken Sie mit der rechten Maustaste auf die ausgewählte Karte, und wählen Sie Entsperren aus.

    Bild der ausgewählten Karte „Titel“ mit den Rechtsklick-Optionen und der hervorgehobenen Option „Entsperren“

  20. Entsperren Sie die Karten OrderDate und OrderTotal im Formular, indem Sie dieselbe Technik verwenden.

  21. Wählen Sie in Ihrem Formular unter Titel das Texteingabefeld aus (entsperren Sie es bei Bedarf).

  22. Ändern Sie die Default-Formel von Parent.Default in Gallery1.Selected.'Machine Name'. Daraufhin sollte der Titel für das ausgewählte Element aus dem Katalog auf der linken Seite des Bildschirms angezeigt werden.

    Tipp

    Während der Eingabe Ihrer Formeln schlägt Power Apps Ihnen automatisch Optionen vor. Sie können den hervorgehobenen Vorschlag über die Registerkarte oder die Eingabe auswählen oder durch die Liste scrollen, um einen auszuwählen. Dies ist völlig optional, aber es kann die Erstellung von Formeln und die Genauigkeit mit der Zeit beschleunigen.

  23. Wählen Sie unter OrderDate das Datumsauswahl-Steuerelement aus, und ändern Sie dann die Formel für DefaultDate in Today().

  24. Wählen Sie unter OrderTotal das Texteingabefeld aus und ändern Sie dann die Formel in Gallery1.Selected.Price.

  25. Wählen Sie das gesamte Formular aus. In der oberen linken Ecke wird die Eigenschaft DataSource in einer Dropdownliste und im Eingabefeld für Formeln wird 'Orders-List' angezeigt. Durch Auswahl dieses Eigenschaften-Dropdownmenüs können Sie jede für ein Steuerelement verfügbare Eigenschaft auswählen und die Formel für diese Steuerelementeigenschaft ändern. In diesem Fall ändern Sie die Eigenschaft Item des Formulars. Wählen Sie also dieses Dropdownmenü und dann die Eigenschaft Item aus.

    Screenshot des Dropdownmenüs mit ausgewählter Standard-DataSource und angezeigtem Item

  26. Geben Sie in der Formel für Item Defaults('Orders-List') ein. Die Funktion „Defaults()“ teilt Power Apps mit, dass wir bei jeder Übermittlung dieses Formulars ein neues Element für die SharePoint-Liste „Orders-List“ erstellen.

  27. Wechseln Sie zur Befehlsleiste, und wählen Sie Einfügen > Schaltfläche aus.

  28. Ziehen Sie die Schaltfläche auf die rechte Seite Ihres Bildschirms unter die Formulareingaben.

  29. Ändern Sie die Eigenschaft „Text“ Ihrer Schaltfläche in Auftrag senden.

  30. Ändern Sie die Eigenschaft „OnSelect“ Ihrer Schaltfläche in SubmitForm(Form1).

Jetzt haben Sie eine App, mit der Benutzer eine Kaffeemaschine auswählen, eine Vorschau ihres Auftrags anzeigen und den Auftrag senden können. Ihre fertige App sollte dem folgenden Bild ähneln.

Screenshot der Auftragsvorschau mit der Schaltfläche „Auftrag senden“

Versetzen Sie Ihre App in den Vorschaumodus, indem Sie die Schaltfläche Wiedergeben (Dreieck) in der oberen rechten Ecke der Befehlsleiste auswählen (oder verwenden Sie Funktionstaste F5 auf Ihrer Tastatur). Wählen Sie eine Kaffeemaschine aus, und klicken Sie dann auf die Schaltfläche Auftrag senden. Die neu erstellte Bestellung sollte angezeigt werden, wenn Sie auf Ihrer SharePoint-Website zur Orders-List zurückkehren.

Screenshot des neu erstellten Auftrags in der Liste

Hoffentlich hat dies Ihr Interesse an den Möglichkeiten der Verwendung von Power Apps zur Interaktion SharePoint-Daten geweckt. Obwohl dies eine Basisanwendung ist, können Sie Anpassungen vornehmen, um die UI/UX entsprechend Ihren Geschäftsanforderungen zu ändern.