Übung: Canvas-App für die Fahrradwerkstatt erstellen

  • 10 Minuten

In dieser Übung wenden Sie Ihr erlerntes Wissen an, um den Prozess der Erstellung einer Canvas-App auf der Grundlage des Designs, das Sie in der Übung: Mit Figma eine App für eine Fahrradwerkstatt entwickeln erstellt haben, abzuschließen.

Szenario

Sie möchten eine Canvas-App für Ihre Kollegen erstellen, die auf einem Figma-Design basiert. Mit dieser App können Ihre Kollegen mithilfe eines speziellen Tablets mögliche Teilnehmenden für einen VIP-Verkauf registrieren und deren Vorlieben erfassen.

Sie erfassen die Informationen der Teilnehmenden in einer Microsoft Excel-Tabelle, damit das Marketingteam Kunden vor und nach der Veranstaltung kontaktieren kann.

Schritte zur Vorbereitung

Befolgen Sie die Schritte in der Einheit Canvas-App auf der Grundlage eines Figma-Designs erstellen, um das von Ihnen erstellte Design der Fahrradwerkstatt zu verwenden. In Schritt 11 können Sie der App den Namen VIP-Fahrradveranstaltung geben.

Laden Sie die Excel-Tabelle Bicycle VIP registration.xlsx herunter. Diese Datei dient als Datenquelle der App. Speichern Sie sie in einem Microsoft OneDrive for Business-Verzeichnis, auf das Sie Zugriff haben.

Screenshot der Microsoft Excel-Tabelle mit dem Namen „Bicycle VIP registration“

Übung

Führen Sie die folgenden Schritte aus, um die Canvas-App zu erstellen, in der die Registrierungen in der Tabelle „Bicycle VIP registration“ gespeichert werden:

  1. Stellen Sie eine Verbindung zur Datenquelle her, und wählen Sie Daten hinzufügen im Bereich Daten links im Power Apps-Canvas-Studio aus.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der Option „Daten hinzufügen“ im Bereich „Daten“ des linken Navigationsbereichs.

  2. Wählen Sie Excel Online (Business) als Datenquelle aus.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der Datenquelle „Excel Online Business“.

  3. Wählen Sie Verbinden aus.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der Option „Verbinden“ für die Datenquelle „Excel Online Business“.

  4. Wechseln Sie zum Verzeichnis der Tabelle Bicycle VIP registration, die Sie im Abschnitt Schritte zur Vorbereitung gespeichert haben, und wählen Sie die Tabelle aus.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der Excel-Datei „Bicycle VIP registration“.

  5. Wählen Sie Registrierungen als Tabelle aus, und wählen Sie dann Verbinden.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der Tabelle „Registrierungen“ und der Schaltfläche „Verbinden“.

  6. Wählen Sie die Option Eindeutige Spalte aus Excel-Tabelle verwenden als Bezeichner für Registrierungen aus. Wählen Sie _PowerAppsId_ und dann Verbinden aus.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der Power Apps-ID und der Option „Eindeutige Spalte aus Excel-Tabelle verwenden“.

  7. Um das Steuerelement msft_Form mit der Datenquelle zu verbinden, ändern Sie die Eigenschaft DataSource in Registrierungen.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf „Registrierungen“ als Eigenschaft „DataSource“.

  8. Um die Identifizierung der Steuerelemente in den folgenden Schritten sicherzustellen, sollten Sie die Datenkarte und Eingabekomponenten umbenennen.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der Option „Umbenennen“ für ein Datenkartensteuerungselement.

    Das Ergebnis sollte nun dem nächsten Bild ähneln.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf den umbenannten Komponenten.

  9. Um die Datenkarten mit Spalten in der Excel-Tabelle zu verbinden, geben Sie den Spaltennamen für die Eigenschaft DataField für jedes Datenkartensteuerelement an, einschließlich der Anführungszeichen.

    • PreferencesDC – „Preference“

    • PhoneDC – „Phone“

    • CustomerEmailDC – „Email“

    • CustomerNameDC – „Name“

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der DataField-Eigenschaft für „PreferencesDC“ und auf dem Eigenschaftswert „Präferenz“.

  10. Um die Werte aus der App in die Excel-Tabelle einzufügen, geben Sie für jedes Datenkartensteuerelement eine Eingabeelementtexteigenschaft für die Eigenschaft Update an.

    • PreferencesDC – PreferencesInput.SelectedText.Value

    • PhoneDC – PhoneInput.Text

    • CustomerEmailDC – CustomerEmailInput.Text

    • CustomerNameDC – CustomerNameInput.Text

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der Update-Eigenschaft für „PreferencesDC“ und auf dem Eigenschaftswert „PreferencesInput.SelectedText.Value“.

  11. Um die Werte in der Excel-Tabelle zu speichern und das Canvas-App-Formular in den Dateneingabemodus zurückzusetzen, legen Sie die Eigenschaft OnSelect der Schaltfläche Senden auf SubmitForm(msft_Form); NewForm(msft_Form); fest.

    Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf der OnSelect-Eigenschaft für „msft_Button“.

Sie verfügen nun über eine vollständige App, die die Registrierung von Kunden für den bevorstehenden VIP-Verkauf ermöglicht. Um die App zu testen, wählen Sie die Symbole Speichern und Wiedergabe aus. Wählen Sie die Schaltfläche Freigeben aus, wenn Sie die App mit Ihren Kollegen teilen möchten.

Screenshot des Power Apps-Canvas-Studios. Der Fokus liegt auf den Symbolen „Freigeben“, „Wiedergabe“ und „Speichern“.

Das folgende Video zeigt die Schritte für diese Einheit.

Nächste Schritte

Sie haben gelernt, wie Sie mithilfe eines Figma-Designs eine Canvas-App erstellen. Diese App ist mit einer Datenquelle verbunden, und Sie und Ihre Kollegen können damit Kundeninformationen und Präferenzen für einen VIP-Verkauf registrieren. Als Nächstes können Sie überprüfen, was Sie in diesem Modul gelernt haben.