Freigeben über

3. Kapitel: Erstellen eines codearmen Prototyps

  • Artikel

Hinweis

Kapitel 2 verwies auf die mobile App, die von den Außendiensttechnikern und -ingenieuren verwendet wird, und auf die Desktop-App, die von lokalen Mitarbeitern verwendet wird. Die folgenden Kapitel befassen sich mit dem Design, der Implementierung und dem Rollout der mobilen Apps, mit denen Power Apps erstellt wurde. Die Desktop-Apps bleiben als Übung für Leser übrig.

Kiana steht Low-Code-Lösungen und Power Apps skeptisch gegenüber. Kiana und Maria beschließen jedoch, gemeinsam eine App zu erstellen, mit deren Hilfe die Außendiensttechniker das Inventar überprüfen (und gegebenenfalls Teile bestellen), die Wissensdatenbank abfragen und ihren nächsten Termin überprüfen können, wenn sie bei Serviceanrufen nicht im Büro sind. Kiana und Maria planen, diese Erfahrung zu nutzen, um zu untersuchen, wie in Power Apps Steuerelemente hinzugefügt und Formeln verwendet werden.

Obwohl das Erstellen eines ersten Low-Code-Prototyps in der Regel eine Citizen Developer-Aufgabe ist, beschließt Kiana, den Prozess genau zu beachten, um zu verstehen, wie die App aufgebaut ist. Kiana benötigt diese Informationen, damit Maria die realen Datenquellen, Web-APIs und anderen erforderlichen Dienste in die App integrieren kann.

Punkt 1: Außendienstinventarverwaltung

Marias ursprüngliches Ziel ist es, eine Canvas-App zu erstellen, die eine Liste von Teilen anzeigt und es dem Benutzer ermöglicht, die Details eines beliebigen Teils anzuzeigen. Schließlich sollte der Benutzer auch in der Lage sein, ein Teil zu bestellen. Diese erste Version der App ist jedoch lediglich ein Prototyp und wird noch nicht an ein Back-End angeschlossen. Nachdem sie Feedback von Caleb, der leitenden Außendiensttechnikerin, erhalten hat, wird Maria mit Kiana an der Integration der lokal ausgeführten Canvas-App in das Inventarsystem arbeiten.

Maria ist mit dem vorhandenen Bestandsverwaltungssystem sehr vertraut und versteht die darin enthaltenen Informationen. Maria erstellt zunächst eine Excel-Arbeitsmappe, die Tabellen mit Pseudodaten mit Details zu einigen Beispielteilen enthält. Die Felder in der Tabelle sind ID, Name, CategoryID, Preis, Übersicht, NumberInStock und Bild (eine URL, die auf ein Bild des Teils verweist). Mit dieser Arbeitsmappe kann die Canvas-App erstellt und getestet werden, um sicherzustellen, dass die erforderlichen Daten korrekt angezeigt werden. Maria speichert diese Arbeitsmappe mit dem Namen BoilerParts.xlsx in einem OneDrive-Konto.

Hinweis

Eine Kopie dieser Arbeitsmappe finden Sie im Ressourcen-Ordner im Git-Repository für dieses Handbuch.

Arbeitsblatt für Kesselteile mit einer Liste der Teile mit den Spalten ID, Name, CategoryId, Preis, Übersicht, NumberInStock und Bild

Wenn Sie ein Designer von relationalen Datenbanken sind, werden Sie feststellen, dass die Excel-Arbeitsmappe eine denormalisierte Ansicht der Daten enthält. In der relationalen Datenbank Kategorie ID wäre dies zum Beispiel höchstwahrscheinlich eine numerische Kennung, die auf eine separate Tabelle verweist, die die Details der Kategorie einschließlich des Namens enthält.

Hinweis

Die URLs in der Bild-Spalte sind derzeit nur Platzhalter. In der fertigen App werden diese URLs durch die Adressen realer Bilddateien ersetzt.

Folgen Sie diesen Schritten, um die App mit Power Apps zu erstellen.

  1. Melden Sie sich bei Power Apps an.

  2. Wählen Sie auf der Home-Seite unter Von Daten starten Excel Online aus.

    Power Apps Studio-Homepage

  3. Auf der Verbindungen-Seite wählen Sie OneDrive for Business und dann Erstellen aus.

    Neue OneDrive-Verbindung

  4. Wählen Sie auf der OneDrive for Business-Seite dieBoilerParts.xlsx-Datei.

    Stellen Sie eine Verbindung mit der Excel-Arbeitsmappe her.

  5. Wählen Sie die Tabelle in der Excel-Datei aus (Maria hat die Tabelle unter Verwendung des Standardnamens Tabelle 1 erstellt), und wählen Sie dann Verbinden.

    Stellen Sie eine Verbindung mit der Excel-Tabelle her.

  6. Warten Sie, während Power Apps die App generiert.

    Generieren Sie die App.

  7. Wenn die App generiert wurde, sehen Sie den Durchsuchen-Bildschirm, der die Felder CategoryID, ID und Bild aus jeder Zeile der Teiletabelle in der Arbeitsmappe anzeigt.

    Auf dem Durchsuchen-Bildschirm angezeigte Teile

  8. Die aktuell angezeigten Felder sind nicht sehr nützlich, um einem Techniker bei der Auswahl eines Produkts zu helfen. Wählen Sie in dem Bereich, in dem der Durchsuchen-Bildschirm angezeigt wird, die Wärmetauscher-Bezeichnung in der ersten Datenzeile aus. Wählen Sie in der Formelleiste die Text-Eigenschaften aus der Dropdown aus. Ändern Sie den Wert der Eigenschaft zu ThisItem.Name. Der Text im ersten Feld jeder Zeile wechselt zur Anzeige des Teilenamens.

    Hinweis

    Im folgenden Bild wurde die ursprünglich auf dem Formular angezeigte Wärmetauscher-Bezeichnung in den Produktnamen 3,5 W/S-Heizung geändert.

    Ändern Sie den Text für ein Beschriftungssteuerelement.

  9. Wiederholen Sie den vorherigen Schritt für die ID- und Bild-Bezeichnungen. Ändern Sie die Text-Bezeichnung des ID-Felds zu CategoryID, und die Text-Eigenschaft des Bild-Felds zu Übersicht. Der Durchsuchen-Bildschirm sollte nun wie das folgende Bild aussehen, das ein Außendiensttechniker für die Teileauswahl eher nützlich findet.

    Eine Liste der Elemente, die den Namen eines Teils, die Kategorie, in der es sich befindet, und eine beschreibende Übersicht anzeigt.

  10. Die Suchfunktion des Durchsuchen-Bildschirms verwendet standardmäßig die Felder, die ursprünglich beim Generieren des Bildschirms ausgewählt wurden — in diesem Fall,CategoryID, ID und Bild. Die Ergebnisse sind nach CategoryID sortiert. Es ist sinnvoll, dies auf die Felder Name, CategoryID und Übersicht umzuschalten, wobei die Ergebnisse nach Name sortiert werden. Wählen Sie das BrowseGallery1-Steuerelement im Feld Strukturansicht aus. Wählen Sie in der Dropdown-Liste auf der linken Seite der Formelleiste die Eigenschaft Artikel aus. Ziehen Sie den unteren Rand der Formelleiste nach unten, damit die Formel vollständig sichtbar ist. Die Formel enthält den folgenden Ausdruck:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))

    Sortier- und Suchfelder

  11. Ändern Sie den Suchen-Ausdruck mit der folgenden Formel so, dass er auf die Felder Name, CategoryID und Übersicht verweist:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))

  12. Der Titel in der Formularüberschrift ist nicht hilfreich, und das Standarddesign entspricht nicht dem Geschäftserscheinungsbild von VanArsdel. Wählen Sie im Durchsuchen-Bildschirm die Tabelle 1-Beschriftung aus und ändern Sie in der Formelleiste die Text-Eigenschaft der Beschriftung zu „Teile durchsuchen“ (fügen Sie die doppelten Anführungszeichen in den Wert ein).

  13. Wählen Sie in der Symbolleiste Design aus (möglicherweise müssen Sie die Symbolleiste erweitern, um weitere Elemente anzuzeigen), und wählen Sie das Thema Wald. Die Farben und der Stil für den Durchsuchen-Bildschirm ändern sich entsprechend dem Thema.

    Wählen Sie das Design aus.

Den Detailbildschirm nützlicher gestalten

Sie haben die Basis-App erstellt und den Durchsuchen-Bildschirm geändert, sodass Felder angezeigt werden, anhand derer ein Techniker ein Teil identifizieren kann. Die App enthält auch einen Details-Bildschirm, auf dem alle Informationen für ein ausgewähltes Teil angezeigt werden. Die Felder auf diesem Bildschirm werden derzeit nicht in einer logischen Reihenfolge angezeigt, daher sollten Sie sie neu anordnen. Sie können auch das ID-Feld von diesem Bildschirm löschen, da diese Informationen für einen Techniker irrelevant sind.

  1. Scrollen Sie im Strukturansicht-Bereich nach unten, und wählen Sie DetailScreen1. Dieser Bildschirm zeigt Details zu dem Teil an, den ein Benutzer auf dem Durchsuchen-Bildschirm auswählt.

    Detailbildschirm für Teile

  2. In der Kopfzeile des Details-Bildschirms wählen Sie im mittleren Bereich die Tabelle 1-Beschriftung. Ändern Sie im rechten Bereich in der Eigenschaften-Registerkarte die Text-Eigenschaft auf Teiledetails.

    Hinweis

    In vielen Fällen können Sie dieselben Ergebnisse erzielen, indem Sie die Formelleiste wie das Eigenschaften-Feld verwenden. Allerdings sind einige Eigenschaften nur über das Feld Eigenschaften verfügbar.

    Ändern Sie die Kopfzeile des Bildschirms „Teile durchsuchen“.

  3. Wählen Sie im Bereich Strukturansicht unter DetailScreen1 auf DetailForm1. Wählen Sie im rechten Bereich auf der Registerkarte Eigenschaften die Option Felder bearbeiten neben Felder aus. Wählen Sie im mittleren Bereich die Felder aus, und ziehen Sie sie so, dass sie in der folgenden Reihenfolge von oben nach unten angezeigt werden:

    • Name
    • CategoryID
    • Überblick
    • Preis
    • NumberInStock
    • Bild
    • ID

    Ordnen Sie Felder auf dem Detailbildschirm an.

  4. Wählen Sie das Feld ID aus, wählen Sie die Auslassungspunkte aus, die auf der rechten Seite des Felds angezeigt werden, und wählen Sie dann Entfernen aus dem angezeigten Dropdown-Menü aus. Diese Aktion entfernt das ID-Feld aus dem Formular.

    Entfernen Sie das ausgewählte ID-Feld aus dem Formular.

  5. Wählen Sie im Bereich Strukturansicht unter DetailForm1 CategoryID_DataCard1. Dieses Element ist ein DataCard-Steuerelement, das den Namen eines Feldes (genannt Schlüssel) und seinen Wert anzeigt.

    CategoryID-Datenkartensteuerelement

    Wählen Sie im rechten Bereich auf der Registerkarte Erweitert die Option Zum Ändern von Eigenschaften entsperren aus. Ändern Sie im Daten-Abschnitt das Anzeigename-Feld zu „Kategorie“ (einschließlich Anführungszeichen).

    Hinweis

    Wie bei der Eigenschaften-Registerkarte, kann auf viele der Eigenschaften auf der Erweitert-Registerkarte auch über die Formelleiste zugegriffen werden. Um diese Eigenschaften festzulegen, können Sie die Formelleiste verwenden, wenn Sie dies bevorzugen.

    Ändern Sie den Anzeigenamen des CategoryID-Detailfelds.

  6. Wiederholen Sie den vorherigen Schritt, um den Schlüssel für NumberInStock_DataCard1 zu „Nummer auf Lager“ (einschließlich Anführungszeichen) zu ändern.

  7. Sie müssen die Formatierung des Preis-Felds anpassen, um die Daten als Währungswert anzuzeigen. Wählen Sie im Bereich Strukturansicht unter DetailForm1 unter Preis_DataCard1 DataCardValue7. Dieses Feld zeigt den Wert des Preis-Feldes an. Ändern Sie im Bereich DataCardValue7 rechts auf der Erweitert-Registerkarte die Text-Eigenschaft auf Text(Value(Parent.Default), "[$-en-US]$ ###,##0,00")

    Formatieren Sie den Preis als Währung.

    Der Ausdruck Parent.Default bezieht sich auf das Datenelement, an das das übergeordnete Steuerelement (DataCard) gebunden ist—in diesem Fall die Spalte Preis. Die Text-Funktion formatiert diesen Wert neu, indem sie das als zweites Argument angegebene Format verwendet. In diesem Beispiel ist dies die lokale Währung mit zwei Dezimalstellen.

  8. Die Bilddatenkarte sollte ein Bild des Teils anstelle der URL der Bilddatei anzeigen. Wählen Sie im Bereich Strukturansicht unter DetailForm1 unter Bild_DataCard1 die Option DataCardValue3 und dann Löschen aus, um dieses Steuerelement zu entfernen.

  9. Wählen Sie Bild_DataCard1. Wählen Sie im linken Bereich + Einfügen aus. Erweitern Sie im Einfügen-Bereich Medien und wählen Sie dann Bild.

    Ersetzen Sie eine Bild-URL durch ein Bild.

  10. Kehren Sie zum Bereich Strukturansicht zurück, und überprüfen Sie, ob das Bild1-Textsteuerelement dem Bild_DataCard1-Steuerelement hinzugefügt wurde.

    Stellen Sie sicher, dass das Bildsteuerelement hinzugefügt wurde.

  11. Wählen Sie im Strukturansicht-Bereich Bild_DataCard1 aus. Ändern Sie im rechten Bereich auf der Erweitert-Registerkarte die Höhe zu 500, um ausreichend Platz für die Anzeige eines Bilds zu schaffen.

    Legen Sie die Höhe der Bilddatenkarte fest.

  12. Wählen Sie im Strukturansicht-Bereich Image1 aus. Legen Sie die folgenden Eigenschaften fest:

    • Bild: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Breite: 550
    • Höhe: 550

    Hinweis

    Das angezeigte Bild ist derzeit leer, da die URL in der Excel-Arbeitsmappe nur ein Platzhalter ist. Sie werden dieses Problem beheben und eine echte URL abrufen, wenn Sie die App in einem späteren Kapitel an eine Web-API binden.

Die App enthält auch einen Bearbeiten-Bildschirm, auf dem ein Benutzer die Informationen für ein Teil ändern kann. Ein Techniker sollte nicht in der Lage sein, die Details eines Teils zu ändern, neue Teile zu erstellen oder Teile aus dem Katalog zu löschen.

  1. Wählen Sie im Strukturansicht-Bereich EditScreen1 aus. Wählen Sie die Auslassungspunkte und dann Löschen aus, um diesen Bildschirm zu entfernen.

    Löschen Sie den Bearbeitungsbildschirm.

  2. Wählen Sie im Strukturansicht-Bereich DetailsScreen1 aus. Beachten Sie, dass Power Apps Studio eine Fehlermeldung für diesen Bildschirm anzeigt. Dieser Fehler tritt auf, weil DetailsScreen1 Ausdrücke enthält, die auf den EditScreen1-Bildschirm verweisen, der nicht mehr existiert.

  3. Wählen Sie in der Kopfzeile von DetailsScreen1 das Stift-Symbol (IconEdit1). Die OnSelect-Eigenschaft für dieses Steuerelement enthält den Ausdruck EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Wenn das Symbol Bearbeiten ausgewählt ist, wird dieser Ausdruck ausgeführt und versucht, zum EditScreen1-Bildschirm zu wechseln.

    Bearbeiten Sie die Eigenschaft „OnSelect“.

  4. Wählen Sie im Strukturansicht-Bereich IconEdit1 und dann Löschen aus. Dieses Symbol wird nicht mehr benötigt.

  5. Wählen Sie IconDelete1 und dann Löschen. Dieses Symbol wird zum Löschen des aktuellen Teils verwendet und ist auch nicht erforderlich.

    Entfernen Sie die Löschungs- und Bearbeitungssymbole.

  6. Beachten Sie, dass der Teiledetails-Text aus der Kopfzeile des Bildschirms verschwunden ist und Power Apps Studio stattdessen eine Fehlermeldung anzeigt. Dies ist passiert, weil die Breite des Beschriftungssteuerelements, das den Text anzeigt, berechnet wird. Wählen Sie im Strukturansicht-Bereich LblAppName2 aus. Untersuchen Sie die Breite-Eigenschaft. Der Wert dieser Eigenschaft ist das Ergebnis des Ausdrucks Parent.Width – Self.X – IconDelete1.Width – IconEdit1.Width.

    LblAppName2-Steuerelement, das einen Breitenfehler anzeigt.

  7. Ändern Sie den Ausdruck für die Breite-Eigenschaft auf Parent.Width – Self.X. Der Fehler sollte verschwinden und der Teiledetails-Text sollte wieder in der Kopfzeile des Bildschirms erscheinen.

  8. Wählen Sie im Strukturansicht-Bereich BrowseScreen1 aus. Dieser Bildschirm zeigt auch eine Fehlermeldung an. Das +-Symbol in der Symbolleiste (IconNewItem1) ermöglicht es dem Benutzer, ein neues Teil hinzuzufügen. Die OnSelect-Eigenschaft für dieses Symbol verweist auf den EditScreen1-Bildschirm.

    Symbol „Neues Element“, das einen Fehler anzeigt.

  9. Wählen Sie IconNewItem1 und dann Löschen. Wie zuvor verschwindet der Text in der Kopfzeile des Bildschirms und aus demselben Grund wird eine Fehlermeldung angezeigt.

  10. Wählen Sie im Bereich Strukturansicht unter BrowseScreen1 auf LblAppName1. Ändern Sie den Ausdruck für die Breite-Eigenschaft durch Entfernen des Verweises auf IconNewItem1.Width. Der neue Ausdruck sollte Parent.Width – Self.X – IconSortUpDown1.Width – IconRefresh1.Width sein.

    Ändern Sie die Breite der Beschriftung.

  11. Es gibt immer noch ein Problem mit der Kopfzeile. Obwohl der Teile durchsuchen-Text erneut angezeigt wurde, wird ein Fehler angezeigt und die Aktualisierungs- und Sortierungssymbole befinden sich an der falschen Stelle. Wählen Sie im Strukturansicht-Bereich IconSortUpDown1 aus. Suchen Sie die X-Eigenschaft für dieses Steuerelement. Diese Eigenschaft bestimmt die horizontale Position des Symbols in der Kopfzeile. Sie wird derzeit basierend auf der Breite des IconNewItem1 Steuerung berechnet.

    Fehler des Sortierungssymbols

  12. Ändern Sie den Ausdruck für die X-Eigenschaft auf Parent.Width – Self.Width.

  13. Wählen Sie im Strukturansicht-Bereich IconRefresh1 aus. Ändern Sie den Ausdruck für die X-Eigenschaft auf Parent.Width – IconSortUpDown1.Width – Self.Width. Die Fehler sollten alle verschwinden.

Speichern und testen der App

Jetzt können Sie die App speichern und testen.

  1. Wählen Sie Datei > Speichern unter aus.

  2. Wählen Sie unter Speichern als, Die Cloud aus, geben Sie den Namen VanArsdelApp ein, und wählen Sie Speichern.

    Speichern Sie die App.

  3. Wählen Sie den nach links weisenden Pfeil aus, um zum Home-Bildschirm zurückzukehren.

    Zurück zum Startbildschirm

  4. Wählen Sie F5 zur Vorschau der App. Wählen Sie auf der Teile durchsuchen-Seite die rechte spitze Klammer (>) rechts von einem Teil aus. Der Detail-Bildschirm für das Teil wird angezeigt.

    Erstausführung der App

  5. Wählen Sie die linke spitze Klammer (<) in der Details-Bildschirmkopfzeile, um zum Durchsuchen- Bildschirm zurückzukehren.

  6. Geben Sie auf dem Bildschirm Teile durchsuchen Text in das Feld Suche ein. Während der Eingabe werden die Elemente gefiltert, um nur diejenigen anzuzeigen, die übereinstimmenden Text in den Feldern Name, CategoryID oder Übersicht enthalten.

    Führen Sie eine Suche auf dem Bildschirm „Teile durchsuchen“ durch.

  7. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

Punkt 2: Außendienst-Wissensdatenbank

Für den Zugriff auf die Wissensdatenbank stellen sich Maria und Caleb (der Techniker) eine einfache Oberfläche vor, über die der Benutzer ein Suchbegriff eingibt und die App alle Artikel zur Wissensdatenbank anzeigt, in denen der Begriff erwähnt wird. Maria weiß, dass dieser Prozess Azure Cognitive Search beinhalten wird, muss diesen aber nicht verstehen— oder möchte dies auch gar nicht. Daher beschließt Maria, nur die grundlegende Benutzeroberfläche bereitzustellen und später mit Kiana zusammenzuarbeiten, um die eigentliche Funktionalität hinzuzufügen.

Maria beschließt, einen neuen Bildschirm basierend auf der Liste-Vorlage zu erstellen, die in Power Apps Studio verfügbar ist.

  1. Wählen Sie auf der Symbolleiste des Power Apps Studio-Home-Bildschirms Neuer Bildschirm und dann Liste aus.

    Die Listenvorlage

  2. Wählen Sie in der Bildschirmkopfzeile die Beschriftung aus, auf der der Text [Titel] angezeigt wird. Ändern Sie die Text-Eigenschaft auf „Abfrage“ (einschließlich Anführungszeichen).

    Ändern Sie den Kopfzeilentext des Abfragebildschirms.

  3. Wählen Sie in der Kopfzeile das Pluszeichen (+) und dann Löschen. Das +-Zeichen soll es dem Benutzer ermöglichen, der Liste weitere Elemente hinzuzufügen. Die Wissensdatenbank ist nur für Abfragen verfügbar, daher wird diese Funktion nicht benötigt.

    Entfernen Sie das +-Symbol.

    Beachten Sie, dass das Entfernen dieses Symbols aufgrund der Art und Weise, in der die Position und die Breite der anderen Elemente berechnet werden, zu einem Fehler in der Kopfzeile führt. Sie haben dies bereits im Bestandsverwaltungsbildschirm gesehen, und die Lösung ist dieselbe, wie in den folgenden Schritten beschrieben.

  4. Scrollen Sie im Strukturansicht-Bereich nach unten zum Screen1-Abschnitt, und wählen Sie LblAppName3. Ändern Sie die Breite-Eigenschaft der Formel Parent.Width – LblAppName3.X – IconSortUpDown2.Width – IconRefresh2.Width.

    Ändern Sie die Kopfzeilenbreite des Abfragebildschirms.

  5. Wählen Sie im Strukturansicht-Bereich IconSortUpDown2 aus. Ändern Sie die X-Eigenschaft der Formel Parent.Width - IconSortUpDown2.Width.

  6. Wählen Sie im Strukturansicht-Bereich IconRefresh2 aus. Ändern Sie die X-Eigenschaft zu Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Dies sollte alle Fehler auf dem Bildschirm beheben.

  7. Wählen Sie Datei > Speichern aus.

  8. Geben Sie im Versionshinweis-Feld den Text Knowledgebase-Benutzeroberfläche hinzugefügt ein, und wählen Sie Speichern.

  9. Kehren Sie zum Home-Bildschirm zurück, und wählen Sie F5, um eine Vorschau des neuen Bildschirms anzuzeigen. Er sollte dem folgenden Bild ähneln.

    Der ausgeführte Abfragebildschirm

    Beachten Sie, dass, wenn Sie das >-Symbol neben einem der Dummy-Einträge auswählen, die Detailfunktion derzeit nicht funktioniert. Sie werden dies später beheben, wenn Sie Azure Cognitive Search in die App integrieren.

  10. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

Punkt 3: Außendienstplanung und Notizen

Maria arbeitet mit Malik, der Rezeptionistin, zusammen, um die Schnittstelle für den Außendienstplanungsteil der App und Termine in der App zu entwerfen. Malik stellt eine Excel-Arbeitsmappe mit einigen Beispieldaten zur Verfügung, mit denen Maria den Terminbildschirm erstellen kann. Die Arbeitsmappe enthält eine Tabelle mit den folgenden Spalten:

  • ID (die Termin-ID)
  • Kunden-ID (eine eindeutige Kennung für den Kunden)
  • Name des Kunden
  • Kundenadresse
  • Problemdetails (eine Textbeschreibung des Problems, auf das der Kunde stößt)
  • Kontaktnummer
  • Status
  • Datum des Termins
  • Termin
  • Notizen (eine Textbeschreibung mit allen vom Techniker hinzugefügten Notizen)
  • Bild (ein Foto der Appliance, entweder nach der Reparatur in einwandfreiem Zustand oder als ergänzendes Bild zu den Notizen des Technikers)

Arbeitsmappe für Termine

Hinweis

Wie bei der Außendienstbestandsverwaltungsdaten bietet diese Arbeitsmappe eine denormalisierte Ansicht der Daten. Im bestehenden Terminsystem werden diese Daten in separaten Tabellen gespeichert, die Termindaten und Kundendaten enthalten.

Maria speichert diese Datei in einem OneDrive-Konto unter dem Namen Appointments.xlsx. Sie erinnerte sich daran, dass zuvor der Standardname für die Tabelle in der Arbeitsmappe verwendet wurde und der Titel in den verschiedenen generierten Bildschirmen geändert werden musste, daher benennt Maria die Tabelle in der Arbeitsmappe in Termine um.

Hinweis

Diese Arbeitsmappe ist im Ressourcen-Ordner vom Git-Repository für dieses Handbuch verfügbar.

Maria möchte den Terminbereich der App direkt aus der Excel-Datei erstellen. Maria beschließt, einen ähnlichen Ansatz wie bei der Außendienstinventarverwaltung zu verfolgen, mit der Ausnahme, dass der Techniker diesmal Termine erstellen und bearbeiten darf.

Maria beschließt, die Terminbildschirme zunächst als separate App zu erstellen. Auf diese Weise kann Maria Power Apps Studio verwenden, um einen Großteil der App automatisch generieren. Mit Power Apps Studio können Sie derzeit keine zusätzlichen Bildschirme aus einer Datenverbindung in einer vorhandenen App generieren. Nach dem Erstellen und Testen der Bildschirme kopiert Maria sie in die Außendienstinventar- und Wissensdatenbank-App.

Hinweis

Ein alternativer Ansatz ist, die Termine-Tabelle in der Excel-Datei als zweite Datenquelle zur vorhandenen App hinzuzufügen und dann die Bildschirme für Termine von Hand zu erstellen. Maria hat sich dafür entschieden, die neuen Bildschirme aus der Arbeitsmappe zu generieren und die Bildschirme zu kopieren. Derzeit ist Maria mit den Konzepten des Kopierens und Einfügens besser vertraut als mit dem manuellen Erstellen von Bildschirmen. Im Verlauf des Erstellungsprozesses dieser App wird sie schrittweise lernen, wie Sie Bildschirme von Grund auf neu erstellt.

So erstellen Sie die Termin-App

  1. Wählen Sie in der Power Apps Studio-Menüleiste Datei aus.

    Menü „Datei“

  2. Wählen Sie im linken Bereich Neu aus. Wählen Sie im Hauptbereich das Feld OneDrive für Unternehmen – Telefonlayout aus.

    Erstellen Sie eine neue App.

  3. Wählen Sie im Verbindungen-Bereich Termine.xlsx aus.

    Neue App aus der Arbeitsmappe für Termine

  4. Wählen Sie in der Excel-Datei die Tabelle Termine und dann Verbinden aus.

    Wählen Sie die Termintabelle aus.

  5. Warten Sie, bis die App generiert wurde. Wenn die neue App angezeigt wird, enthält sie einen Durchsuchen-Bildschirm, einen Details-Bildschirm und einen Bearbeiten-Bildschirm im Standarddesign.

    Die generierte Termine-App

  6. Wählen Sie im Bereich Strukturansicht im BrowseScreen1-Abschnitt unter BrowseGallery1 Image1 und dann Löschen. Der Bildschirm Durchsuchen sollte nur Termine auflisten, keine damit verbundenen Bilder.

    Löschen Sie das Bild-Steuerelement.

    Beachten Sie, dass das Entfernen des Image1-Steuerelements mehrere Fehler auf dem Bildschirm verursacht, da die Breite und Position des Title1-Steuerelements beide auf das Bild-Steuerelement verweisen. Sie werden diese Probleme im folgenden Schritt beheben.

  7. Wählen Sie im Bereich Strukturansicht unter BrowseGallery1 auf Title1. Ändern Sie den Wert in der X-Eigenschaft in 16. Ändern Sie die Formel in der Breite-Eigenschaft in Parent.TemplateWidth – 104. Dies sollte die Fehler für den Bildschirm beheben.

  8. Wählen Sie im Bereich Strukturansicht unter BrowseGallery1 auf Body1. Dieses Steuerelement zeigt derzeit die Kontakttelefondetails für den Kunden an. Ändern Sie den Wert in der Text-Eigenschaft inThisItem.'Customer Name' (einschließlich der einfachen Anführungszeichen).

    Ändern Sie das Body1-Steuerelement in Kundenname.

    Die Details im Durchsuche-Bildschirmnamen zeigen jetzt den Kundennamen an.

  9. Wählen Sie im Strukturansicht-Bereich BrowseGallery1 aus. Untersuchen Sie anhand der Formelleiste den Ausdruck in der Artikel-Eigenschaft. Das Steuerelement sucht anhand des Termins, der Uhrzeit und der Kontaktnummer nach Terminen. Ändern Sie diese Formel, um den Kundennamen und nicht die Kontaktnummer zu suchen:

    SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).

    Beachten Sie, dass die Termine nach Datum und Uhrzeit sortiert sind (die ersten beiden Felder werden angezeigt).

  10. Löschen Sie im Strukturansicht-Bereich IconNewItem1 aus. Nur lokale Mitarbeiter können neue Termine für Ingenieure und Techniker buchen. Beachten Sie, dass diese Aktion zu Fehlern im Formular führt, da die Breite und Position anderer Steuerelemente in der Kopfzeile auf das gerade entfernte Symbol verweisen.

  11. Wählen Sie im Strukturansicht-Bereich LblAppName1 aus. Ändern Sie die Formel für die Breite-Eigenschaft. in Parent.Width – Self.X – IconSortUpDown1.Width – IconRefresh1.Width.

  12. Wählen Sie im Strukturansicht-Bereich IconRefresh1 aus. Ändern Sie den Wert für die X-Eigenschaft auf Parent.Width – IconSortUpDown1.Width – Self.Width.

  13. Wählen Sie im Strukturansicht-Bereich iconSortUpDown1 aus. Ändern Sie den Wert für die X-Eigenschaft auf Parent.Width – Self.Width.

  14. Wählen Sie im Strukturansicht-Bereich BrowseScreen1 und dann die Schaltfläche mit den Auslassungspunkten (...). Wählen Sie im angezeigten Dropdown-Menü Umbenennen, und ändern Sie den Namen des Bildschirms in BrowseAppointments.

    Benennen Sie den Bildschirm zum Durchsuchen um.

  15. Ändern Sie mit derselben Technik den Namen des BrowseGallery1-Steuerelements in BrowseAppointmentsGallery.

Damit ist der Durchsuchen-Bildschirm abgeschlossen.

So erstellen Sie den Detailbildschirm

Sie können jetzt Ihre Aufmerksamkeit auf den Details-Bildschirm richten.

  1. Scrollen Sie im Strukturansicht-Bereich nach unten zum Abschnitt DetailsScreen1. Sie können sehen, dass die Details in alphabetischer Reihenfolge nach Feldnamen dargestellt werden (z. B. das Notizen-Feld), und einige nützlichen Informationen werden überhaupt nicht angezeigt.

    Layout des Bildschirms mit den Einzelheiten zum Termin

  2. Wählen Sie im Strukturansicht-Bereich DetailForm1 aus. Wählen Sie im rechten Bereich auf der Registerkarte Eigenschaften die Option Felder bearbeiten neben Felder aus. Wählen Sie im mittleren Bereich jedes der folgenden Felder aus, und wählen Sie dann Löschen:

    • Datum des Termins
    • Termin
    • Kunden-ID
    • ID

  3. Wählen Sie + Feld hinzufügen, und fügen Sie die folgenden Felder hinzu:

    • Hinweise
    • Problemdetails
    • Status

    Fügen Sie dem Detailbildschirm Felder hinzu.

  4. Ziehen Sie jedes Feld so, dass es in der folgenden Reihenfolge von oben nach unten angezeigt wird:

    • Name des Kunden
    • Kundenadresse
    • Kontaktnummer
    • Problemdetails
    • Status
    • Hinweise
    • Bild

  5. Wählen Sie im Strukturansicht-Bereich Notizen_DataCard1 aus. Ändern Sie die Eigenschaft Höhe in 320.

    Ändern Sie die Größe des Notizfelds.

  6. Löschen Sie im Strukturansicht-Bereich IconDelete1 aus. Techniker sollten nicht in der Lage sein, Termine aus dem System zu entfernen.

  7. Wählen Sie LblAppName2, und ändern Sie die Berite-Eigenschaft in Parent.Width - Self.X - IconEdit1.Width.

  8. Ändern Sie mit der zuvor beschriebenen Technik den Namen von DetailsScreen1 in AppointmentDetails.

So bearbeiten Sie den Bearbeiten-Bildschirm an

Der letzte Bildschirm, der vorerst angezeigt werden muss, ist der Bearbeiten-Bildschirm.

  1. Wählen Sie im Strukturansicht-Bereich EditScreen1 aus.

  2. Wählen Sie im Bereich Strukturansicht im Abschnitt EditScreen1 auf EditForm1. Wählen Sie im rechten Bereich auf der Registerkarte Eigenschaften die Option Felder bearbeiten neben Felder aus.

  3. Entfernen Sie die folgenden Felder:

    • Kundenadresse
    • ID
    • Kunden-ID
    • Datum des Termins
    • Termin

  4. Fügen Sie die folgenden Felder hinzu:

    • Problemdetails
    • Status
    • Hinweise

  5. Ziehen Sie jedes Feld so, dass es in der folgenden Reihenfolge von oben nach unten angezeigt wird:

    • Kontaktname
    • Kundennummer
    • Problemdetails
    • Status
    • Hinweise
    • Bild

  6. Wählen Sie das Kundenname-Feld aus, und erweitern Sie es, um seine Eigenschaften anzuzeigen. Ändern Sie den Steuerelementtyp in Text anzeigen. Diese Änderung macht das Steuerelement schreibgeschützt. Es ist nützlich, den Namen des Kunden auf dem Bearbeiten-Bildschirm zu sehen, aber ein Techniker sollte nicht in der Lage sein, ihn zu ändern.

    Weisen Sie dem Kundennamen die Eigenschaft „Schreibgeschützt“ zu.

  7. Wählen Sie das Kundennummer-Feld aus, und erweitern Sie es, um seine Eigenschaften anzuzeigen. Ändern Sie den Steuerelementtyp in Text anzeigen. Dieses Feld sollte ebenfalls schreibgeschützt sein.

  8. Wählen Sie das Notizen-Feld, erweitern Sie es und ändern Sie den Steuerelementtyp in Mehrzeiligen Text bearbeiten. Mit dieser Einstellung kann der Techniker detaillierte Notizen hinzufügen, die mehrere Zeilen umfassen können.

  9. Wählen Sie das Status-Feld, erweitern Sie es und ändern Sie den Steuerelementtyp in Zulässige Werte.

  10. Wählen Sie im Strukturansicht-Bereich Status_DataCard5 aus. Wählen Sie im rechten Bereich auf der Registerkarte Eigenschaften die Option Zum Ändern von Eigenschaften entsperren aus. Scrollen Sie nach unten zur AllowedValues-Eigenschaft, und ändern Sie den Text in [„Behoben“, „Bestellte Teile“, „Ungelöst“] (einschließlich der eckigen Klammern). Der Außendiensttechniker kann nur den Status einer dieser definierten Werte festlegen.

    Legen Sie die zulässigen Statuswerte fest.

  11. Benennen Sie im Strukturansicht-Bereich EditScreen1 in EditAppointment um.

Sie können jetzt die App speichern und testen.

  1. Wählen Sie Datei > Speichern unter aus.

  2. Wählen Sie unter Speichern als, Die Cloud aus, geben Sie den Namen VanArsdelAppointments ein, und wählen Sie Speichern.

  3. Wählen Sie den Zurückpfeil in der Power Apps Studio-Symbolleiste aus, um zum Home-Bildschirm zurückzukehren.

  4. Wählen Sie F5 zur Vorschau der App. Wählen Sie auf der Termine-Seite das >-Symbol neben einem Termin. Der Details-Bildschirm für den Termin sollte angezeigt werden. Wählen Sie in der Kopfzeile Bearbeitenaus, um den Termin zu aktualisieren. Überprüfen Sie Folgendes:

    • Die Kundenname- und Kontaktnummer-Felder sind schreibgeschützt.
    • Das Statusfeld ist auf die Werte in der Dropdown-Liste beschränkt.
    • Sie können Notizen eingeben, die mehrere Zeilen umfassen.
    • Sie können eine Bilddatei in das Bildfeld hochladen.

    Hinweis

    Eine Erweiterung, die Sie später hinzufügen werden, ermöglicht es Ihnen, ein Bild mit Ihrem Telefon aus der App heraus aufzunehmen und es dem Bildfeld hinzuzufügen.

    Die ausgeführte Termine-App

Die Bildschirme zu einer einzigen App kombinieren

Maria hat zwei Apps erstellt, möchte diese aber zu einer einzigen App kombinieren. Dazu kopiert Maria die Bildschirme für die Termine-App wie folgt in die Außendienstinventarverwaltungs- und Wissensdatenbank-App:

  1. Öffnen Sie ein neues Browserfenster, und melden Sie sich mit Ihren Kontodaten in Power Apps Studio an.

  2. Wählen Sie im linken Bereich Apps aus, wählen Sie VanArdselApp und dann Bearbeiten.

    Öffnen Sie die VanArdsel-App.

  3. Wählen Sie in der Symbolleiste Neuer Bildschirm und anschließend Leer aus. Diese Aktion fügt der App einen neuen Bildschirm hinzu, in den Sie die Steuerelemente für den Durchsuchen -Bildschirm für die VanArsdelAppointments-App kopieren können.

    Fügen Sie einen leeren Bildschirm hinzu.

  4. Der neue Bildschirm erhält den Namen Screen2. Benennen Sie ihn im Strukturansicht-Bereich BrowseAppointmentsum.

  5. Wiederholen Sie den vorherigen Schritt noch zweimal, um zwei weitere leere Bildschirme (Screen3 und Screen4) hinzuzufügen.

  6. Benennen Sie Screen3 in AppointmentDetails und Screen4 in EditAppointment um.

  7. Wählen Sie auf der linken Symbolleiste von Power Apps Studio das Daten-Symbol. Wählen Sie im Daten-Bereich Daten hinzufügen aus. Geben Sie in der Eine Datenquelle auswählen-Dropdown-Liste im Suchen-Feld OneDrive ein, und wählen Sie dann OneDrive for Business.

    Wählen Sie die Datenquelle aus.

  8. Wählen Sie die Excel-Datei Appointments.xlsx, die Tabelle Termine und dann Verbinden aus.

  9. Wechseln Sie in das Browserfenster, in dem die VanArsdelAppointments-App angezeigt wird.

  10. Wählen Sie in der Symbolleiste Design aus (möglicherweise müssen Sie die Symbolleiste erweitern, um weitere Elemente anzuzeigen), und wählen Sie das Thema Wald. Dies ist das gleiche Design, das von der VanArsdel-App verwendet wird.

  11. Wählen Sie in der linken Symbolleiste das Symbol Strukturansicht, den BrowseAppointments-Bildschirm und dann STRG+A aus. Diese Aktion wählt alle Steuerelemente auf dem Bildschirm aus.

  12. Wählen Sie STRG+C, um diese Steuerelemente in die Zwischenablage zu kopieren.

  13. Kehren Sie in das Browserfenster zurück, in dem die VanArsdelApp-App angezeigt wird.

  14. Wählen Sie in der linken Symbolleiste das Symbol Strukturansicht und dann den BrowseAppointments-Bildschirm aus.

  15. Wählen Sie STRG + V, um die Steuerelemente auf dem Bildschirm einzufügen.

    Hinweis

    Manchmal erscheint die Bildschirmkopfzeile etwas zu tief unten. Um dieses Problem zu beheben, wählen Sie die Steuerelemente IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 und RectQuickActionBar1_1 im Strukturansicht-Bereich aus (halten Sie die Umschalttaste gedrückt und klicken Sie, um mehrere Steuerelemente gleichzeitig auszuwählen), und verschieben Sie sie dann mit der Maus oder den Pfeiltasten nach oben in Bereich der Entwurfsansicht zu verschieben.

  16. Wechseln Sie zurück zum Browserfenster, in dem die VanArsdelAppointments-App angezeigt wird, und wählen und kopieren Sie dann die Steuerelemente auf dem AppointmentDetails-Bildschirm in die Zwischenablage (STRG+A gefolgt von STRG+C).

  17. Kehren Sie zum Browserfenster zurück, in dem die VanArsdelApp-App angezeigt wird, wählen Sie den AppointmentDetails-Bildschirm, und fügen Sie dann die Steuerelemente ein (STRG+V). Passen Sie gegebenenfalls die Position der Steuerelemente in der Kopfzeile des Bildschirms an.

    Hinweis

    In der Kopfzeile des AppointmentDetails-Bildschirms wird ein Fehler angezeigt. Dieser Fehler tritt auf, weil der Bildschirm auf Steuerelemente im EditAppointment-Bildschirm verweist, die noch nicht kopiert wurden. Die nächsten Schritte sollten diesen Fehler beheben.

  18. Wechseln Sie zurück zum Browserfenster, in dem die VanArsdelAppointments-App angezeigt wird, und wählen und kopieren Sie dann die Steuerelemente auf dem EditAppointment-Bildschirm in die Zwischenablage.

  19. Kehren Sie zum Browserfenster zurück, in dem die VanArsdelApp-App angezeigt wird, wählen Sie den EditAppointment-Bildschirm, und fügen Sie dann die Steuerelemente ein. Verschieben Sie die Steuerelemente gegebenenfalls erneut in der Kopfzeile des Bildschirms.

  20. Wählen Sie im Bereich Strukturansicht den AppointmentDetails-Bildschirm und überprüfen Sie, ob der zuvor angegebene Fehler jetzt verschwunden ist.

  21. Wählen Sie im Strukturansicht-Bereich den Bildschirm BrowseScreen1 aus. Benennen Sie diesen Bildschirm in BrowseParts um.

  22. Benennen Sie den DetailsScreen1-Bildschirm in PartDetails um.

  23. Benennen Sie den Screen1-Bildschirm in Wissensdatenbank um.

    Hinweis

    Es wird empfohlen, Bildschirme so umzubenennen, dass ihre Funktion widergespiegelt wird, anstatt die von Power Apps Studio generierten Standardnamen zu verwenden, insbesondere wenn eine App mehrere Bildschirme enthält. Dies kann helfen, später Verwirrung zu vermeiden, wenn die App von einem anderen Entwickler geändert wird.

Der App einen Home-Bildschirm hinzufügen

Die letzte Stufe ist das Hinzufügen eines Home-Bildschirm zur App. Auf dem Home-Bildschirm kann der Techniker zwischen den verschiedenen Teilen der App wechseln (Bestandsverwaltung, Wissensdatenbank und Termine).

  1. Wählen Sie in der VanArsdelApp-App in der Symbolleiste Neuer Bildschirm und dann Leer aus.

  2. Nennen Sie im Strukturansicht-Bereich den Screen2 in Home um.

  3. Wählen Sie auf der Symbolleiste Einfügen aus. Erweitern Sie in der Liste der Steuerelemente Medien, und wählen Sie dann Bild. Das Steuerelement wird dem Bildschirm hinzugefügt.

    Fügen Sie dem Startbildschirm ein Bildsteuerelement hinzu.

  4. Legen Sie die X-Position des Steuerelements auf 16 und die Y-Position auf 22 fest. Ändern Sie die Breite in 605 und die Höhe in 127. Ändern Sie die Bildposition in Füllen.

    Legen Sie die Bildgröße und -position fest.

  5. Wählen Sie noch auf der Eigenschaften-Registerkarte in derBild-Dropdown-Liste + Eine Bilddatei hinzufügen aus, und laden Sie dann das VanArsdelLogo.png-Bild zum Steuerelement hoch.

    Hinweis

    Die Bilddatei ist im Ressourcen-Ordner im Git-Repository für dieses Handbuch verfügbar.

    Fügen Sie dem Bild ein Logo hinzu.

  6. Fügen Sie aus der Liste der Steuerelemente vier Textbeschriftung-Steuerelemente für das Formular hinzu, und positionieren Sie sie so, dass sie unter dem VanArsdel-Logo gestapelt sind.

    Fügen Sie Steuerelemente „Textbeschriftung hinzufügen“ hinzu.

  7. Wählen Sie das oberste Textbeschriftung-Steuerelement. Legen Sie im rechten Bereich in der Eigenschaften-Registerkarte die Text-Eigenschaft auf Nächster Termin fest. Legen Sie die Schriftgröße auf 30 fest, und verwenden Sie die Farbauswahl, um die Schriftfarbe auf Grün festzulegen (passend zum Logo).

    Legen Sie die Schriftfarbe fest.

  8. Wählen Sie das zweite Textbeschriftung-Steuerelement. Ändern Sie den Wert der Text-Eigenschaft in First(Appointments)'Customer Name' (einschließlich der einfachen Anführungszeichen). Diese Formel ruft den Kundennamen aus der ersten Zeile in der Termintabelle ab.

    Zeigen Sie den Kundennamen an.

    Hinweis

    Derzeit fungiert diese Formel nur als Platzhalter. Sie werden die Beschriftung später ändern, um den nächsten Termin für den Techniker abzurufen, anstatt immer den ersten anzuzeigen.

  9. Wählen Sie das dritte Textbeschriftung Steuerelement, und legen Sie die Text Eigenschaft auf First(Appointments).'Appointment Date' fest.

  10. Legen Sie die Text-Eigenschaft des vierten Beschriftungssteuerelements auf First(Appointments).'Appointment Time' fest. Legen Sie die Font size-Eigenschaft auf „30“ fest.

  11. Fügen Sie aus der Liste der Steuerelemente ein Rectangle-Steuerelement hinzu. Legen Sie die folgenden Eigenschaften für dieses Steuerelement fest:

    • Anzeigemodus: Ansicht
    • X: 0
    • Y: 632
    • Breite: 635
    • Höhe: 1

    Dieses Steuerelement fungiert als visuelles Trennzeichen in der Mitte des Bildschirms.

  12. Fügen Sie dem Bildschirm drei Schaltfläche-Steuerelemente hinzu, die vertikal angeordnet und gleichmäßig unter dem Trennzeichen verteilt sind. Legen Sie die Text-Eigenschaft für die oberste Schaltfläche auf Termine, die Text-Eigenschaft für die mittlere Schaltfläche auf Teile und die Text-Eigenschaft für die untere Schaltfläche auf Wissensdatenbank fest.

    Schaltflächen des Startbildschirms

  13. Wählen Sie die Termine-Schaltfläche aus. Ändern Sie den Ausdruck in der OnSelect-Aktion zur Formel Navigate(BrowseAppointments, ScreenTransition.Fade). Diese Aktion schaltet die Anzeige auf den Terminbildschirm um, wenn der Benutzer die Schaltfläche auswählt.

    Schaltfläche „Termine“

  14. Legen Sie die OnSelect-Aktion für die Teile-Schaltfläche auf Navigate(BrowseParts, ScreenTransition.Fade) fest.

  15. Legen Sie die OnSelect-Aktion für die Wissensdatenbank-Schaltfläche auf Navigate(Knowledgebase, ScreenTransition.Fade) fest.

Neben der Navigation vom Home-Bildschirm zu den anderen Bildschirmen im System, benötigen die Bildschirme Termine, Teile und Wissensdatenbank eine Möglichkeit, damit der Benutzer zum Home-Bildschirm zurückkehren kann. Maria beschließt, diesen Bildschirmen Zurück-Schaltflächen hinzuzufügen.

  1. Wählen Sie im Strukturansicht-Bereich den Bildschirm BrowseParts aus.

  2. Wählen Sie das RectQuickActionBar1-Steuerelement aus, um es den Fokus zu geben.

  3. Wählen Sie das Einfügen-Menü und Symbol hinzufügen. Verschieben Sie das Symbol nach links vom RectQuickActionBar1-Steuerelement. Beachten Sie, dass das Symbol einen Teil der Teile durchsuchen-Beschriftung verdeckt.

    Fügen Sie ein Symbol hinzu.

  4. Ändern Sie im Menü Strukturansicht den Namen des neuen Symbolsteuerelements in IconReturn1.

  5. Ändern Sie die Formel für die OnSelect-Aktion in den Ausdruck Back(ScreenTransition.Fade). Die Zurück-Funktion navigiert den Benutzer zum vorherigen Bildschirm, den er besucht hat.

  6. Ändern Sie auf der Registerkarte Eigenschaften die Symboleigenschaft in < Links.

  7. Wählen Sie in der Bildschirmkopfeile die Beschriftung Teile durchsuchen aus. Ändern Sie den Wert in der X-Eigenschaft zu IconReturn1.Width + 20. Die Teile durchsuchen-Beschriftung sollte nicht mehr teilweise verdeckt sein.

    Verschieben Sie die Beschriftung „Teile durchsuchen“.

  8. Fügen Sie Prozess, der in den Schritten 16 bis 22 beschrieben wurde, fügen Sie ein Symbol mit dem Namen IconReturn2 zum RectQuickActionBar3-Steuerelement auf dem Wissensdatenbank-Bildschirm hinzu.

  9. Fügen Sie in ähnlicher Weise ein Symbol mit dem Namen IconReturn3 zum RectQuickActionBar1_1-Steuerelement auf dem BrowseAppointments-Bildschirm hinzu.

  10. Wählen Sie im Strukturansicht-Bereich das App-Objekt aus. Ändern Sie die Eigenschaft StartScreen in den Ausdruck Home. Dies stellt sicher, dass der Home-Bildschirm angezeigt wird, wenn die App gestartet wird:

    Legen Sie die App-OnStart-Formel fest.

    Hinweis

    Wenn Sie nicht angeben, welcher Bildschirm beim Start der App angezeigt werden soll, wird der oben im Strukturansicht-Bereich erscheinende Bildschirm verwendet. Um einen Bildschirm an den Anfang der Liste zu verschieben, klicken Sie mit der rechten Maustaste auf den Bildschirm im Strukturansicht-Bereich, und wählen Sie Nach oben verschieben, bis er oben ist.

Schließlich können Sie die App testen.

  1. Wählen Sie Datei > Speichern aus. Geben Sie im Versionshinweise-Feld Komplettversion mit Home-Bildschirm ein, und wählen Sie Speichern.

  2. Wählen Sie den Zurückpfeil, um zum Home-Bildschirm zurückzukehren, und wählen Sie dann F5, um die App auszuführen.

  3. Stellen Sie sicher, dass der Home-Bildschirm für die App angezeigt wird.

  4. Wählen Sie Termine. Der Terminbildschirm sollte angezeigt werden.

  5. Wählen Sie den nach links weisenden Pfeil aus, um zum Home-Bildschirm zurückzukehren.

  6. Wählen Sie Teile. Der Teilebrowser sollte erscheinen.

  7. Wählen Sie den nach links weisenden Pfeil aus, um zum Home-Bildschirm zurückzukehren.

  8. Wählen Sie Wissensdatenbank. Der Abfragebildschirm für die Wissensdatenbank sollte angezeigt werden.

  9. Wählen Sie den nach links weisenden Pfeil aus, um zum Home-Bildschirm zurückzukehren.

  10. Schließen Sie das Vorschaufenster und kehren Sie zu Power Apps Studio zurück.

Die Prototyp-App ist nun vollständig.

Zurück Weiter