Kapitel 7: Hinzufügen von Funktionen zur App

Kiana und Maria freuen sich, die Bestandsverwaltungs-App caleb, dem Außendiensttechniker, zu zeigen. Caleb mag es, schlägt aber vor, einige zusätzliche Benutzeroberflächenfunktionen hinzuzufügen, um die Verwendung zu erleichtern. Insbesondere möchte Caleb folgende Möglichkeiten haben:

• Fügen Sie ein Foto der Arbeit auf einem Kessel oder einer Klimaanlage hinzu, und fügen Sie sie den Termindetails auf dem Bildschirm "Termin bearbeiten " hinzu. Dieses Bild könnte sich als Beweis für die durchgeführten Reparaturen als dokumentationswürdig erweisen. Der Bildschirm " Termin bearbeiten " ermöglicht es dem Benutzer derzeit, dem Termin ein Bild hinzuzufügen, aber das Bild wird nicht gespeichert, da dieses Feature noch nicht vollständig implementiert wurde. Der Grund für diese Unterlassung ist, dass Kiana und Preeti den besten Ort zum Speichern von Bilddaten bestimmen müssen. Caleb möchte diese Funktionalität so schnell wie möglich hinzufügen.

• Zeigen Sie einen vollständigen Terminverlauf für einen Kunden an, um angeforderte Reparaturen zu dokumentieren und alle laufenden Probleme zu überwachen, die möglicherweise mehrfach Technikerbesuche erfordern.

• Teile über den Bildschirm Teildetails bestellen.

Darüber hinaus zeigt das Bildsteuerelement auf dem Bildschirm " Teildetails " die Bilder an, die unter einer angegebenen URL gespeichert sind. Derzeit sind die URLs in den Daten einfach Platzhalter. Wie die Fotos für den Terminbildschirm müssen Kiana und Preeti den besten Ort zum Speichern von Bildern ermitteln, damit sie für die App verfügbar sind.

Hinzufügen eines Fotos zu einem Termin

Fotos müssen irgendwo gespeichert werden, auf die von der App zugegriffen werden kann. Aus Leistungs- und Sicherheitsgründen möchte Preeti keine Fotos auf OneDrive oder in Azure SQL-Datenbank speichern. Stattdessen entscheiden sie sich, Azure Blob Storage zu verwenden. Blob Storage ist für die Aufbewahrung großer binärer Objekte optimiert und ist robust, mit integrierter Sicherheit. Power Apps verfügt über einen Connector, der den Zugriff auf Blob Storage ermöglicht. Maria schlägt vor, einen neuen Bildaufnahmebildschirm hinzuzufügen und die Benutzererfahrung für Caleb zu verbessern.

Weitere Informationen: Azure Blob Storage

Preeti erstellt das Blob Storage-Konto aus dem Azure-Portal, indem Sie die folgenden Schritte ausführen:

1. Wählen Sie im Azure-Portal auf der Seite Home+ Ressource erstellen aus. Geben Sie im Feld Search the MarketplaceStorage account ein und wählen Sie dann Enter aus.

   

2. Wählen Sie auf der Seite " Speicherkonto " die Option "Erstellen" aus.

3. Geben Sie auf der Seite "Speicherkonto erstellen " die folgenden Details ein, und wählen Sie dann "Überprüfen+ erstellen" aus:

   • Abonnement: Wählen Sie Ihr Abonnement aus
   • Ressourcengruppe: webapi_rg
   • Speicherkontoname: Geben Sie einen global eindeutigen Namen an, und notieren Sie ihn für später
   • Standort: Wählen Sie Ihren nächstgelegenen Standort aus.
   • Leistung: Standard
   • Kontotyp: BlobStorage
   • Replikation: RA-GRS

   

4. Wählen Sie auf der Überprüfungsseite Create aus, und warten Sie, bis das Speicherkonto bereitgestellt wird.

5. Wechseln Sie zur Seite für das neue Speicherkonto.

6. Wählen Sie auf der Seite "Übersicht"die Option "Container" aus.

   

7. Wählen Sie auf der Seite Container+ Container aus. Erstellen Sie einen neuen Container mit dem Namen "Fotos", und wählen Sie dann "Erstellen" aus. Ändern Sie die Ebene des öffentlichen Zugriffs in BLOB.

   

8. Zurück auf der Seite "Übersicht" für das Speicherkonto, wählen Sie unter den Einstellungen die Option "Zugriffsschlüssel". Wählen Sie auf der Seite "Zugriffstasten " die Option "Tasten anzeigen" aus. Notieren Sie sich den Wert des Schlüssels für Key1.

   

Preeti gibt den Speicherkontonamen und den Schlüssel an Kiana, die diese Informationen verwendet, um einen benutzerdefinierten Connector für die App zu erstellen, indem sie die folgenden Schritte ausführt:

1. Melden Sie sich bei Power Apps an.

2. Erweitern Sie im linken Bereich "Daten", und wählen Sie "Verbindungen" aus. Die vorhandenen Verbindungen, die von der App verwendet werden, sollten aufgelistet werden. Wählen Sie + Neue Verbindung aus.

   

3. Scrollen Sie auf der Seite Neue Verbindung nach unten, wählen Sie Verbinden, Azure Blob Storage aus, und wählen Sie dann Create aus.

   

4. Geben Sie im Dialogfeld Azure Blob Storage den Namen des Speicherkontos und den Zugriffsschlüssel ein, den Preeti bereitgestellt hat, und wählen Sie dann Create aus.

   

5. Warten Sie, während die neue Verbindung erstellt wird. Er sollte in der Liste der Verbindungen angezeigt werden.

Maria kann diese Verbindung mit Blob Storage in der App verwenden, um fotografische Bilder zu speichern und abzurufen. Marias erste Aufgabe besteht darin, die Verbindung zur App hinzuzufügen, indem Sie die folgenden Schritte ausführen:

1. Öffnen Sie die VanArsdelApp-App zum Bearbeiten in Power Apps Studio.

2. Im Datenbereich wählen Sie Daten hinzufügen, suchen Sie nach dem Azure Blob Storage-Connector, und wählen Sie dann den Connector aus.

   

3. Wählen Sie im Dialogfeld Azure Blob Storage den Connector Azure Blob Storage aus, um ihn Ihrer App hinzuzufügen.

   

Marias nächste Aufgabe besteht darin, eine Bildschirmfunktion einzufügen, die es einem Techniker oder Ingenieur ermöglicht, ein Foto zu speichern. Maria entscheidet sich, einen neuen Bildschirm mit einem Bildsteuerelement hinzuzufügen. Wenn die App auf einem mobilen Gerät ausgeführt wird, kann dieses Steuerelement in die Kamera integriert werden, damit der Techniker ein Foto aufnehmen kann. Auf anderen Geräten fordert dieses Steuerelement den Benutzer auf, stattdessen eine Bilddatei hochzuladen. Maria fügt über den EditAppointment-Bildschirm einen Link zu diesem neuen Bildschirm hinzu, indem Sie die folgenden Schritte ausführen:

1. Wählen Sie im Menü Einfügen die Option Neuer Bildschirm aus, und wählen Sie dann die Bildlauf-Vorlage aus.

   

2. Wählen Sie im Bereich "Strukturansicht " den neuen Bildschirm aus, und benennen Sie ihn in TakePhoto um.

3. Ändern Sie die Text-Eigenschaft des LblAppNameX-Steuerelements auf diesem Bildschirm in "Aufnehmen eines Fotos".

4. Löschen Sie das CanvasX-Steuerelement vom Bildschirm.

5. Wählen Sie im Menü "Einfügen " in der Dropdownliste "Medien " die Option "Bild hinzufügen " aus, um ein neues Bildsteuerelement zu erstellen.

   

   Schein

   Das Bildsteuerelement ist tatsächlich eine zusammengesetzte benutzerdefinierte Komponente, mit der der Benutzer dem Bildschirm ein Bild hinzufügen und die Ergebnisse anzeigen kann.

6. Ändern Sie die Größe des Bildsteuerelements und positionieren Sie es neu, um den Hauptteil des Bildschirms einzunehmen.

7. Wählen Sie im Bereich Strukturansicht das Steuerelement IconBackarrowX auf dem Bildschirm AppointmentDetails und wählen Sie dann Kopieren.

   

8. Klicken Sie im Menü "Strukturansicht " mit der rechten Maustaste auf den Bildschirm "TakePhoto ", und wählen Sie dann "Einfügen" aus. Das IconBackArrow-X-Steuerelement wird dem Bildschirm hinzugefügt.

   

9. Verschieben Sie das IconBackArrowX-Steuerelement links oben in die Kopfzeile.

10. Wählen Sie im Bereich "Strukturansicht" das IconBackArrowX-Steuerelement auf dem TakePhoto-Bildschirm aus. Ändern Sie im rechten Bereich auf der Registerkarte Erweitert die Aktionseigenschaft OnSelect in Navigate(EditAppointment, ScreenTransition.None).

11. Fügen Sie oben rechts in der Kopfzeile ein neues Symbolsteuerelement " Speichern " hinzu. Legen Sie die Visible-Eigenschaft dieses Steuerelements auf If(IsBlank(AddMediaButton1.Media), false, true) fest.

    Diese Einstellung macht das Symbol "Speichern " unsichtbar, wenn der Benutzer kein Bild ausgewählt hat.

    

12. Ändern Sie die Formel in der OnSelect-Aktionseigenschaft des Steuerelements " Symbol speichern " wie folgt.

    Set(ImageID, GUID() & ".jpg");
    
    AzureBlobStorage.CreateFile("photos", ImageID, AddMediaButton1.Media);
    
    Patch(appointmentsCollection, LookUp(appointmentsCollection,id=BrowseAppointmentsGallery.Selected.id), {imageUrl:"https://myappphotos.blob.core.windows.net/photos/" & ImageID});
    
    Navigate(EditAppointment,ScreenTransition.Cover);
    

    Ersetzen Sie <den Namen des Speicherkontos> durch den Namen des Azure-Speicherkontos, das Preeti erstellt hat.

    Dieser Code lädt das Bild in den Container photos in Blob Storage hoch. Jedes Bild erhält einen eindeutigen Dateinamen. Die Funktion Patch aktualisiert die Eigenschaft imageUrl im Termindatensatz mit der URL des Bilds in Blob Storage.

13. Erweitern Sie im Strukturansichtsbereich das AddMediaWithImageX-Steuerelement . Ändern Sie die Image-Eigenschaft des UploadedImageX-Steuerelements , und legen Sie sie auf AppointmentImage fest.

    AppointmentImage ist eine Variable, die mit einem Bild gefüllt wird, das entweder vom Benutzer hochgeladen wurde, oder als Ergebnis der Aufnahme eines Fotos. Sie initialisieren diese Variable später im EditAppointment-Bildschirm .

14. Wählen Sie im Strukturansichtsbereich das AddMediaButtonX-Steuerelement aus. Legen Sie die UseMobileCamera-Eigenschaft dieses Steuerelements auf "true" fest. Legen Sie die OnChange-Aktionseigenschaft des Steuerelements auf Folgendes fest.

    Set(AppointmentImage, AddMediaButton1.Media)
    

    Mit dieser Formel wird die AppointmentImage-Variable so geändert, dass auf das neue Bild verwiesen wird. Das Steuerelement "UploadedImageX " zeigt dieses Bild an.

15. Wählen Sie im Bereich "Strukturansicht " den Bildschirm "EditAppointment " aus.

16. Erweitern Sie das EditForm-SteuerelementX. Entfernen Sie unter dem steuerelement Image_DataCardX das AddPictureX-Steuerelement .

    

17. Wählen Sie das Steuerelement ImageX aus. Ändern Sie die folgenden Eigenschaften:

    • Bild: Parent.Default
    • X: 30
    • Y: DataCardKeyX.Y + DataCardKeyX.Höhe + 150 (wobei DataCardKeyX die Datenkarte ist, die das ImageX-Steuerelement enthält)
    • Breite: Parent.Width - 60
    • Höhe: 400

    Schein

    Das Bildsteuerelement wird unter dem unteren Bildschirmrand angezeigt. Es wird jedoch automatisch eine Bildlaufleiste hinzugefügt, damit das Bild angezeigt werden kann.

18. Fügen Sie der Datenkarte ein Kamerasymbol hinzu, und positionieren Sie es dann zwischen der Bildbezeichnung und dem ImageX-Steuerelement . Ändern Sie den Namen des Steuerelements in CameraIcon.

    Schein

    Stellen Sie sicher, dass Sie das Kamerasymbol-Steuerelement und nicht das Kameramedien-Steuerelement auswählen.

    

19. Legen Sie die OnSelect-Aktionseigenschaft des CameraIcon-Steuerelements auf Folgendes fest.

    Set(AppointmentImage, SampleImage);
    
    Navigate(TakePhoto, ScreenTransition.None);
    

    Wenn der Benutzer dieses Symbol auswählt, wechselt er zum TakePhoto-Bildschirm , auf dem er ein Foto aufnehmen oder ein Bild hochladen kann. Das angezeigte Anfangsbild ist das Standardbeispielbild.

Gehen Sie wie folgt vor, um die App zu testen:

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

2. Wählen Sie F5 aus, um eine Vorschau der App anzuzeigen.

3. Wählen Sie auf dem Startbildschirm"Termine" aus.

4. Wählen Sie im Bildschirm "Durchsuchen" einen beliebigen Termin aus.

5. Wählen Sie auf dem Detailbildschirm für den Termin das Bearbeitungssymbol in der Bildschirmüberschrift aus.

6. Wählen Sie auf dem Bearbeitungsbildschirm das Kamerasymbol für das Bild aus.

7. Überprüfen Sie, ob der Bildschirm " Foto aufnehmen " angezeigt wird.

8. Wählen Sie "Bild ändern" aus, und laden Sie ein Bild Ihrer Wahl hoch (oder nehmen Sie ein Foto auf, wenn Sie die App auf einem mobilen Gerät ausführen).

9. Wählen Sie Speichern. Stellen Sie sicher, dass das Bild auf der Detailseite angezeigt wird, und wählen Sie dann das Teilstrichsymbol aus, um die Änderungen wieder in der Datenbank zu speichern.

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

Anzeigen von Bildern von Teilen

Nachdem sie festgestellt haben, dass Blob Storage ein idealer Ort zum Speichern von Bildern ist, die mit Terminen verknüpft sind, entscheiden Preeti und Kiana, dass sie denselben Ansatz zum Speichern der Bilder von Teilen verwenden sollten. Ein wichtiger Vorteil dieses Ansatzes besteht darin, dass keine Änderungen an der App erforderlich sind. Die App verwendet dasselbe Speicherkonto und dieselbe Verbindung. Als separate Migrationsübung können sie die folgenden Aktionen ausführen:

1. Erstellen Sie einen neuen Blob Storage-Container.

2. Laden Sie die Teilimages in diesen Container hoch.

3. Ändern Sie die ImageUrl-Verweise in der Tabelle "Parts" in der InventoryDB-Datenbank in die URL der einzelnen Bilder.

Die App übernimmt die neue URL für jedes Teilbild automatisch, und das Bildsteuerelement auf dem Bildschirm "PartDetails " zeigt das Bild an.

Nachverfolgen des Terminverlaufs für einen Kunden

Maria glaubt, dass die Möglichkeit, den gesamten Verlauf der früheren Technikerbesuche eines Kunden schnell anzuzeigen, der App hinzugefügt werden könnte, indem eine benutzerdefinierte Komponente erstellt wird. Gemeinsam mit Caleb erarbeitet Maria, welche Informationen sie sehen möchten, und skizziert ein einfaches Design, das die Notizen und das Datum jedes Besuchs umfasst.

Wenn sie die Daten betrachtet, glaubt Maria, dass ein Galeriesteuerelement die beste Möglichkeit ist, die Tabellendaten auf einem Bildschirm anzuzeigen.

Maria erstellt die benutzerdefinierte Komponente wie folgt:

1. Wählen Sie im Power Apps Studio im Bereich BaumansichtKomponenten aus, und wählen Sie dann + Neue Komponente aus.

   

   Es wird eine neue leere Komponente namens "Component1 " erstellt. Benennen Sie die Komponente in "DateHistoryComponent" um.

   

2. Wählen Sie im Einfügen-Menü Galerie und dann die Leere flexible Höhe Galerie-Vorlage aus.

   

3. Verschieben Sie das Galerie-Steuerelement, und ändern Sie dessen Größe, um die benutzerdefinierte Komponente zu füllen.

4. Wählen Sie im Einfügebereich 'Element hinzufügen' und dann 'Textbeschriftung' aus.

   

5. Nennen Sie im Strukturansicht-Bereich das Beschriftungssteuerelement in NotesLabel um. Legen Sie die Overflow-Eigenschaft auf Overflow.Scroll fest. Mit dieser Einstellung kann das Steuerelement mehrere Textzeilen anzeigen und dem Benutzer das Scrollen ermöglichen. Legen Sie die folgenden Eigenschaften fest, damit Sie das Steuerelement positionieren und anpassen können:

   • LineHeight: 2
   • X: 28
   • Y: 18
   • Breite: 574
   • Höhe: 140

6. Fügen Sie dem Steuerelement eine zweite Textbezeichnung hinzu. Benennen Sie dieses Steuerelement als DateLabel um, und legen Sie die folgenden Eigenschaften fest:

   • LineHeight: 2
   • X: 28
   • Y: 174
   • Breite: 574
   • Höhe: 70

7. Um zu sehen, wie das Steuerelement aussehen wird, wenn es in die App eingefügt und mit seinem Design angezeigt wird, wählen Sie im Bereich "Strukturansicht " "DateHistoryComponent" aus. Wählen Sie im rechten Bereich auf der Registerkarte " Erweitert " das Feld " Füllung " aus, und ändern Sie die Farbe in RGBA(0, 0, 0, 1).

   Zeigen Sie die Komponente an.

8. Erweitern Sie im Einfügen-Bereich Formen und fügen Sie der benutzerdefinierten Komponente ein Rectangle-Steuerelement hinzu. Legen Sie die folgenden Eigenschaften für dieses Steuerelement fest:

   • X: 0
   • Y: 273
   • Breite: Parent.Width
   • Höhe: 2

   Dieses Steuerelement fungiert als Trennzeichen zwischen den Datensätzen, die in der Galerie angezeigt werden.

   

Maria ist mit dem Hinzufügen von Steuerelementen zu Bildschirmen und dem Erstellen von Apps mit Power Apps vertraut. Wiederverwendbare Komponenten funktionieren jedoch nicht auf die gleiche Weise. Kiana erklärte Maria, dass, um Daten in einer benutzerdefinierten Komponente verwenden zu können, einige zusätzliche benutzerdefinierte Eingabeeigenschaften hinzugefügt werden müssen. Kiana erklärte außerdem, dass Maria Beispieldaten für diese Eigenschaften bereitstellen muss, um auf die Datenfelder in den Steuerelementen in der Komponente zu verweisen, wie folgt:

1. Wählen Sie im Bereich "Strukturansicht " die Option "DateHistoryComponent" aus. Wählen Sie im rechten Bereich auf der Registerkarte "Eigenschaften " die Option "Neue benutzerdefinierte Eigenschaft" aus.

   

2. Geben Sie im Dialogfeld "Neue benutzerdefinierte Eigenschaft " die folgenden Werte an, und wählen Sie dann "Erstellen" aus:

   • Anzeigename: Daten
   • Name: Daten
   • Beschreibung: Die Tabelle der Termine für einen Kunden mit den Notizen und Datumsangaben
   • Eigenschaftstyp: Eingabe
   • Datentyp: Tabelle
   • OnReset auslösen, wenn sich der Wert ändert: Leer lassen

   

3. Wenn Sie die vom Steuerelement angezeigten Beispieldaten ändern möchten, wählen Sie die neue benutzerdefinierte Dateneigenschaft aus. Geben Sie im Formel-Feld Table({Hinweise: "Beispielfeldtext für Hinweise.", 'Termin Datum': Text(Heute())}) ein.

   

4. Wählen Sie im Bereich "Strukturansicht " das Steuerelement " GalleryX " in "DateHistoryComponent" aus, und benennen Sie es in "AppointmentHistory" um.

5. Legen Sie im rechten Bereich auf der Registerkarte Erweitert die Eigenschaft Items des Galerie-Steuerelements "AppointmentHistory" auf Parents.Data fest.

   

6. Wählen Sie das NotesLabel-Steuerelement aus. Ändern Sie im rechten Bereich auf der Registerkarte Erweitert die Eigenschaft Text in ThisItem.Notes, und ändern Sie die Eigenschaft Size in 20.

   Schein

   Die Size-Eigenschaft gibt den Schriftgrad für den Text an, der vom Steuerelement angezeigt wird.

7. Wählen Sie das DateLabel-Steuerelement aus, um die Text-Eigenschaft in ThisItem.'Appointment Date' zu ändern und die Size-Eigenschaft auf 20 zu ändern. Die Felder in der benutzerdefinierten Komponente sollten die Beispieldaten anzeigen.

   

Die benutzerdefinierte Komponente ist abgeschlossen. Maria erstellt einen neuen Bildschirm, um den Terminverlauf für einen Kunden mithilfe dieser Komponente wie folgt anzuzeigen:

1. Wählen Sie im Bereich "Strukturansicht " die Registerkarte "Bildschirme " aus.

2. Erweitern Sie den Bildschirm "BrowseAppointments ", erweitern Sie das Steuerelement "BrowseAppointmentsGallery ", und wählen Sie das Body1_1-Steuerelement aus. Wählen Sie im Menü "Einfügen" die Option "Symbole" und dann das Symbol "Detailliste" aus.

   

3. Ändern Sie den Namen des Symbolsteuerelements in ViewAppointments.

4. Wählen Sie im Menü "Baumansicht" das Steuerelement "BrowseAppointmentsGallery" aus. Ändern Sie im rechten Bereich auf der Registerkarte " Erweitert " die Eigenschaft "TemplateSize " in "220". Durch das Erhöhen dieser Eigenschaft wird der verfügbare Raum in der Galerie erweitert.

5. Verschieben Sie das ViewAppointments-Symbol in das leere Leerzeichen unter dem Kundennamen.

   

6. Wählen Sie das ViewAppointments-Symbolsteuerelement aus. Legen Sie die OnSelect-Aktionseigenschaft auf die folgende Formel fest.

   ClearCollect(customerAppointmentsCollection, FieldEngineerAPI.getapicustomeridappointments(ThisItem.customerId));
   
   Navigate(AppointmentsHistoryScreen, ScreenTransition.Fade)
   

   Mit dieser Formel wird eine Sammlung namens customerAppointmentsCollection mit den Terminen für den ausgewählten Kunden aufgefüllt und dann zum AppointmentHistoryScreen verschoben, um sie anzuzeigen. Sie erstellen diesen Bildschirm in den folgenden Schritten.

7. Wählen Sie im Menü Einfügen die Option Neuer Bildschirm aus, und wählen Sie dann die Bildlauf-Vorlage aus.

   

8. Ändern Sie den Namen des neuen Bildschirms in AppointmentHistoryScreen.

9. Löschen Sie das Canvas-X Steuerelement, das zu diesem Bildschirm hinzugefügt wurde.

   

10. Wählen Sie das Steuerelement LblAppNameX auf diesem Bildschirm aus. Ändern Sie im rechten Bereich auf der Registerkarte "Erweitert " die Eigenschaft "Text " wie folgt.

    "Appointments History for " &  BrowseAppointmentsGallery.Selected.customer.name
    

11. Legen Sie die folgenden Eigenschaften für das LblAppNameX-Steuerelement fest, um die Position und Größe anzupassen:

    • X: 90
    • Y: 0
    • Breite: 550
    • Höhe: 140

12. Wählen Sie das RectQuickActionBarX-Steuerelement aus, und legen Sie die Height-Eigenschaft auf 140 fest.

13. Fügen Sie der Bildschirmkopfzeile links neben dem Titel ein Linkes Symbol-Steuerelement hinzu. Legen Sie die OnSelect-Aktionseigenschaft für dieses Steuerelement auf Navigate(BrowseAppointments, Transition.None) fest.

    

14. Wählen Sie im Menü "Einfügen " die Option "Benutzerdefiniert" und dann " DateHistoryComponent" aus.

    

15. Verschieben und ändern Sie die Größe der Komponente so, dass sie den Hauptbereich des Bildschirms unterhalb der Überschrift einnimmt.

    

16. Legen Sie die folgenden Eigenschaften für diese Komponente fest:

    • Daten: customerAppointmentsCollection
    • Termindatum: startDateTime
    • Hinweise: Notizen

17. Speichern Sie die App.

Gehen Sie wie folgt vor, um die App zu testen:

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

2. Wählen Sie F5 aus, um eine Vorschau der App anzuzeigen.

3. Wählen Sie auf dem Startbildschirm"Termine" aus.

4. Wählen Sie im Suchbildschirm das Symbol "Detailliste " für einen beliebigen Termin aus.

5. Überprüfen Sie, ob der Bildschirm " Terminverlauf" für den ausgewählten Kunden angezeigt wird.

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

Bestellen von Teilen

Eine wichtige Anforderung des Systems besteht darin, einem Techniker die Bestellung von Teilen zu ermöglichen, die beim Besuch eines Kunden erforderlich sind. Wenn die Teile vorrätig sind, sollte es möglich sein, einen weiteren Besuch zu planen, um die Reparatur am nächsten praktischen Termin für den Kunden abzuschließen. Wenn die Teile zurzeit nicht mehr vorrätig sind und bestellt werden müssen, kann der Techniker dem Kunden mitteilen. Malik kann dann einen Termin mit dem Kunden vereinbaren, wenn Maria Benachrichtigung erhält, dass die Teile im Lager angekommen sind.

Der Reservierungsteil der App verwendet die Tabellen in der InventoryDB-Datenbank , die in der folgenden Abbildung dargestellt sind. Die Tabelle "Bestellungen" enthält Informationen zu Bestellungen, die für Teile aufgegeben wurden. In der Tabelle "Reservierungen" sind die Reservierungsanforderungen aufgeführt, die Techniker und Ingenieure für Teile beantragt haben. Die Tabelle "Ingenieure" enthält den Namen und die Kontaktnummer des Ingenieurs, der die Reservierung vorgenommen hat, wodurch Maria, die Bestandsmanagerin, bei Bedarf nachfragen kann.

Um dieses Feature zu unterstützen, muss Kiana die Web-API mit einer Methode aktualisieren, die die Anzahl der reservierten Elemente für einen angegebenen Teil abruft, wie folgt:

1. Öffnen Sie das FieldEngineerApi Web-API-Projekt in Visual Studio Code.

2. Fügen Sie dem Ordner "Models" eine Datei mit dem Namen Order.cs hinzu. Fügen Sie dieser Datei den folgenden Code hinzu. Die Orders-Klasse verfolgt die Details der Bestellungen, die für Teile aufgegeben wurden.

   using System;
   using System.ComponentModel.DataAnnotations;
   using System.ComponentModel.DataAnnotations.Schema;
   
   namespace FieldEngineerApi.Models
   {
       public class Order 
       {
           [Key]
           public long Id { get; set; }
   
           public long BoilerPartId { get; set; }
   
           public BoilerPart BoilerPart { get; set; }
   
           public long Quantity { get; set; }
   
           [Column(TypeName = "money")]
           public decimal TotalPrice { get; set; }
   
           [Display(Name = "OrderedDate")]
           [DataType(DataType.DateTime)]
           [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
           public DateTime OrderedDateTime { get; set; }
   
           public bool Delivered { get; set; }
   
           [Display(Name = "DeliveredDate")]
           [DataType(DataType.DateTime)]
           [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
           public DateTime? DeliveredDateTime { get; set; }
       }
   }
   

3. Fügen Sie dem Ordner "Models" eine weitere neue Datei namens Reservation.cs hinzu, und fügen Sie dieser Datei den folgenden Code hinzu. Die Reservierungsklasse enthält Informationen zur Anzahl der Artikel für einen bestimmten Teil, die derzeit für andere Kunden reserviert sind.

   using System;
   using System.ComponentModel.DataAnnotations;
   
   namespace FieldEngineerApi.Models
   {
       public class Reservation
       {
           [Key]
           public long Id { get; set; }
   
           public long BoilerPartId { get; set; }
   
           public BoilerPart BoilerPart { get; set; }
   
           public int NumberToReserve { get; set; }
   
           public string EngineerId { get; set; }
   
           public InventoryEngineer Engineer { get; set; }
       }
   }
   

4. Fügen Sie dem Ordner "Models" eine weitere Datei mit dem Namen "InventoryEngineer.cs" mit dem folgenden Code hinzu. Die InventoryEngineer-Klasse zeichnet auf, welche Ingenieure welche Reservierungen vorgenommen haben.

   using System.ComponentModel.DataAnnotations;
   using System.Collections.Generic;
   
   namespace FieldEngineerApi.Models
   {
       public class InventoryEngineer
       {
           [Key]
           public string Id { get; set; }
   
           [Required]
           public string Name { get; set; }
   
           public string ContactNumber { get; set; }
   
           public List<Reservation> Reservations { get; set; }
       }
   }
   

5. Öffnen Sie die datei InventoryContext.cs im Ordner "Models ", und fügen Sie der InventoryContext-Klasse die folgenden Anweisungen hinzu.

   public class InventoryContext : DbContext
   {
       public InventoryContext(DbContextOptions\<InventoryContext\> options)
           : base(options)
       {
   
       }
   
       public DbSet<BoilerPart> BoilerParts { get; set; }
       public DbSet<InventoryEngineer> Engineers { get; set; }
       public DbSet<Order> Orders { get; set; }
       public DbSet<Reservation> Reservations { get; set; }
   }
   

6. Führen Sie im Terminalfenster in Visual Studio Code die folgenden Befehle aus, um Controller für die Bearbeitung von Bestellungen und Reservierungen zu erstellen.

   dotnet aspnet-codegenerator controller ^
       -name OrdersController -async -api ^
       -m Order ^
       -dc InventoryContext -outDir Controllers
   
   dotnet aspnet-codegenerator controller ^
       -name ReservationsController -async -api ^
       -m Reservation ^
       -dc InventoryContext -outDir Controllers
   

7. Öffnen Sie die datei BoilerPartController.cs im Ordner "Controller", und fügen Sie der BoilerPartsController-Klasse die folgende GetTotalReservations-Methode hinzu.

   public class BoilerPartsController : ControllerBase
   {
       private readonly InventoryContext _context;
   
       public BoilerPartsController(InventoryContext context)
       {
           _context = context;
       }
   
       ...
   
       // GET: api/BoilerParts/5/Reserved 
       [HttpGet("{id}/Reserved")]
       public async Task<ActionResult<object>> GetTotalReservations(long id)
       { 
           var reservations = await _context
               .Reservations
               .Where(r => r.BoilerPartId == id) 
               .ToListAsync();
   
           int totalReservations = 0; 
   
           foreach(Reservation reservation in reservations) 
           { 
               totalReservations += reservation.NumberToReserve; 
           } 
   
           return new {id, totalReservations}; 
       }
       ...
   }
   

8. Bearbeiten Sie die OrdersController.cs Datei, und ändern Sie die PostOrder-Methode in der OrdersController-Klasse , wie im Folgenden dargestellt.

   [HttpPost]
   public async Task<ActionResult<Order>> PostOrder(long boilerPartId, int quantity)
   {
       var part = await _context.BoilerParts.FindAsync(boilerPartId);
   
       Order order = new Order 
       {
           BoilerPartId = boilerPartId,
           Quantity = quantity,
           OrderedDateTime = DateTime.Now,
           TotalPrice = quantity * part.Price
       };
   
       _context.Orders.Add(order);
       await _context.SaveChangesAsync();
   
       return CreatedAtAction("GetOrder", new { id = order.Id }, order);
   }
   

9. Bearbeiten Sie die ReservationsController.cs Datei. Ändern Sie die PostReservation-Methode in der ReservationsController-Klasse wie folgt.

   [HttpPost]
   public async Task<ActionResult<Reservation>> PostReservation(long boilerPartId, string engineerId, int quantityToReserve)
   {
       Reservation reservation = new Reservation 
       {
           BoilerPartId = boilerPartId,
           EngineerId = engineerId,
           NumberToReserve = quantityToReserve
       };
   
       _context.Reservations.Add(reservation);
       await _context.SaveChangesAsync();
   
       return CreatedAtAction("GetReservation", new { id = reservation.Id }, reservation);
   }
   

10. Führen Sie im Terminalfenster die folgenden Befehle aus, um die Web-API für die Bereitstellung zu erstellen und zu veröffentlichen.

    dotnet build
    dotnet publish -c Release -o ./publish
    

11. Klicken Sie in Visual Studio Code mit der rechten Maustaste auf den Ordner publish, und wählen Sie dann Deploy to Web App aus.

Preeti kann nun den API-Verwaltungsdienst aktualisieren, der von der VanArsdel-App verwendet wird, um die aktualisierte Web-API widerzuspiegeln. Dies ist eine Non-Breaking Change; vorhandene Vorgänge werden weiterhin funktionieren. Der Unterschied besteht in, den neuen Controllern und Vorgängen, die Reservierungen vornehmen und Bestellungen aufgeben. Preeti führt die folgenden Aufgaben aus:

Schein

Preeti könnte sich dafür entschieden haben, die vorhandene Field Engineer-API zu löschen und durch eine neue Version zu ersetzen, aber dieser Ansatz riskiert, vorhandene Anwendungen zu unterbrechen, die derzeit die API verwenden. Es empfiehlt sich, die vorhandene API an Ort und Stelle zu lassen und die Änderungen als Revision hinzuzufügen.

1. Wechseln Sie im Azure-Portal zum API-Verwaltungsdienst.

2. Wählen Sie auf der Seite API-Verwaltungsdienst im linken Bereich unter APIs die Option APIs aus.

3. Wählen Sie die Feldtechniker-API aus, wählen Sie das Dreipunktemenü und dann Überarbeitung hinzufügen aus.

   

4. Geben Sie in dem Eine Überarbeitung der Außendiensttechniker-API erstellen-Dialog, die Beschreibung GET-Operation und POST-Operationen für Teilereservierungen und Bestellungen hinzugefügt ein und wählen Sie dann Erstellen aus.

   

5. Wählen Sie auf der Seite "REVISION 2 " die Option "Entwurf" aus.

   

6. Wählen Sie auf der Seite " Entwurf " die Option "Vorgang hinzufügen" aus. Legen Sie im Bereich "FrontEnd " die folgenden Eigenschaften fest, und wählen Sie dann "Speichern" aus. Dieser Vorgang wird zum Abrufen der Anzahl der Elemente verwendet, die für einen bestimmten Kesselteil reserviert sind:

   • Anzeigename: api/BoilerParts/{id}/Reserved
   • Name: api-boilerparts-id-reserved
   • URL: GETapi/BoilerParts/{id}/Reserved

   

7. Legen Sie auf der Registerkarte "Test " für den neuen Vorgang den ID-Parameter auf eine gültige Teilenummer fest (das Beispiel im Bild verwendet Teil 1), und wählen Sie dann "Senden" aus.

   

8. Überprüfen Sie, ob der Test erfolgreich ist. Der Vorgang sollte mit einer HTTP 200-Antwort und einem Textkörper abgeschlossen werden, der die Anzahl der Reservierungen für das Produkt anzeigt.

   

9. Wählen Sie auf der Seite " Entwurf " die Option "Vorgang hinzufügen" aus. Legen Sie im Bereich "FrontEnd " die folgenden Eigenschaften fest (dieser Vorgang definiert POST-Anforderungen für das Erstellen neuer Aufträge):

   • Anzeigename: api/Orders - POST
   • Name: api-orders-post
   • URL: POSTapi/Orders

10. Wählen Sie auf der Registerkarte "Abfrage " +Parameter hinzufügen, fügen Sie die folgenden Parameter hinzu, und wählen Sie dann "Speichern" aus:

    • Name: boilerPartId, Beschreibung**: Kesselteil-ID**, Typ: long
    • Name: Menge, Beschreibung**: Menge**, Typ: ganze Zahl

    

11. Wählen Sie im Bereich "FrontEnd" den Befehl "Hinzufügen" erneut aus, und legen Sie die folgenden Eigenschaften fest (dieser Vorgang definiert POST-Anforderungen zum Erstellen neuer Reservierungen):

    • Anzeigename: api/Reservations - POST
    • Name: api-reservations-post
    • URL: POST-API/Reservierungen

12. Fügen Sie auf der Registerkarte "Abfrage " die folgenden Parameter hinzu, und wählen Sie dann "Speichern" aus:

    • Name: boilerPartId, Beschreibung: Kesselteil-ID, Typ: lang
    • Name: engineerId, Description: Engineer ID, Type: string
    • Name: quantityToReserve, Beschreibung: Menge zu reservieren, Typ: ganze Zahl

13. Wählen Sie auf der Registerkarte " Überarbeitungen " die neue Version aus. Wählen Sie im Auslassungszeichenmenü für diese Version die Option "Aktuell machen" aus.

    

14. Wählen Sie im Dialogfeld " Überarbeitung aktuell erstellen " die Option "Speichern" aus.

15. Öffnen Sie eine andere Seite in Ihrem Webbrowser, und wechseln Sie zur URL https://<APIM name>. azure-api.net/api/boilerparts/1/reserved wobei <APIM name> der Name Ihres API-Diensts ist. Vergewissern Sie sich, dass Sie eine Ähnliche Antwort erhalten wie die folgenden.

    {"id":1,"totalReservations":5}
    

Die aktualisierte Web-API ist jetzt verfügbar. Theoretisch könnte Kiana einen neuen benutzerdefinierten Connector für die aktualisierte Web-API erstellen und der App hinzufügen. Die App könnte dann eine eigene Logik implementieren, um zu bestimmen, wie viele Artikel des angegebenen Produkts aktuell vorrätig sind, wie viele reserviert sind, die Ergebnisse mit der Anzahl der erforderlichen Artikel vergleichen, bei Bedarf eine Bestellung für weitere Lagerbestände aufgeben oder Artikel aus der vorhandenen Lagerbestände reservieren. Diese Art von Logik ist jedoch in einer Azure-Logik-App besser implementiert. Power Apps können die Logik-App über einen benutzerdefinierten Connector aufrufen, wenn ein Techniker einen Teil reservieren oder bestellen möchte.

Zum Erstellen der Logik-App verwendet Kiana die folgenden Schritte:

Schein

Um die Dinge einfach zu halten, ist die in diesem Beispiel erstellte Logik-App nicht transaktional. Es ist möglich, dass zwischen der Überprüfung der Verfügbarkeit eines Teils und der Reservierung ein gleichzeitiger Benutzer eine widersprüchliche Reservierung vornehmen kann. Sie können transaktionsale Semantik implementieren, indem Sie einige der Logik in dieser Logik-App durch eine gespeicherte Prozedur in der InventoryDB-Datenbank ersetzen.

1. Wählen Sie im Azure-Portal auf der Seite Home+ Ressource erstellen aus.

2. Geben Sie im Feld 'Marketplace durchsuchen'Logic App ein, und wählen Sie dann Enter-Taste aus.

3. Wählen Sie auf der Seite "Logik-App " die Option "Erstellen" aus.

   

4. Geben Sie auf der Seite "Logik-App erstellen " die folgenden Werte ein, und wählen Sie dann "Überprüfen+ erstellen" aus:

   • Abonnement: Wählen Sie Ihr Azure-Abonnement aus
   • Ressourcengruppe: webapi_rg
   • Name der Logik-App: FieldEngineerPartsOrdering
   • Region: Wählen Sie denselben Speicherort aus, den Sie für die Web-API verwendet haben.
   • Zuordnen zur Integrationsdienstumgebung: Leer lassen
   • Protokollanalyse aktivieren: Leer lassen

5. Wählen Sie auf der Überprüfungsseite "Erstellen" aus, und warten Sie, während die Logik-App bereitgestellt wird.

6. Wenn die Bereitstellung abgeschlossen ist, wählen Sie "Zur Ressource wechseln" aus.

7. Scrollen Sie auf der Seite "Logic Apps Designer " nach unten zum Abschnitt " Vorlagen ", und wählen Sie dann "Leere Logik-App" aus.

   

8. Wählen Sie auf der Alle-Registerkarte im Nach Konnektoren und Triggern suchen-Textfeld Anforderung.

    

9. Wählen Sie auf der Registerkarte "Trigger" die Option "Wenn eine HTTP-Anforderung empfangen wird" aus.

   

10. Geben Sie im Feld JSON-Schema für den Anforderungstext das folgende Schema ein, und wählen Sie dann +Neuer Schritt aus.

    {
        "type": "object",
        "properties": {
            "boilerPartId": {
                "type": "integer"
            },
            "numberToReserve": {
                "type": "integer"
            },
            "engineerId": {
                "type": "string"
            }
        }
    }
    

    

    Dieses Schema definiert den Inhalt der HTTP-Anforderung, die die Logik-App erwartet. Der Anforderungstext besteht aus der ID eines Kesselteils, der Anzahl der zu reservierenden Elemente und der ID des Technikers, der die Anforderung vornimmt. Die App sendet diese Anforderung, wenn ein Techniker einen Teil reservieren möchte.

11. Wählen Sie im Feld "Vorgang auswählen" "Alle" und dann "HTTP" aus.

    

    Die Logik-App ruft den BoilerParts{id} -Vorgang der Web-API auf, um Informationen über das von der Anforderung bereitgestellte Kesselpart abzurufen.

12. Wählen Sie im Bereich "Aktionen " die HTTP-Aktion aus.

    

13. Wählen Sie im Http-Aktionsfeld im Menü mit den Auslassungspunkten "Umbenennen" aus, und ändern Sie den Namen der Aktion in "CheckBoilerPart".

    

14. Legen Sie die Eigenschaften der HTTP-Aktion wie folgt fest, und wählen Sie dann +Neuer Schritt aus:

    • Methode: GET
    • URI: https://<APIM name>. azure-api.net/api/boilerparts/, wobei <APIM name> der Name Ihres API Management-Diensts ist. Wählen Sie im Feld "Dynamischer Inhalt" für diesen URI auf der Registerkarte "Dynamischer Inhalt" die Option "boilerPartId" aus.

    

15. Im Feld "Operation auswählen" geben Sie im Feld "Connectors und Aktionen suchen" JSON analysieren ein, und wählen Sie dann die Aktion 'JSON analysieren' aus.

    

16. Benennen Sie die Aktion mithilfe des Auslassungszeichenmenüs für die JSON-Parse-Aktion in ParseBoilerPart um.

17. Wählen Sie im Inhaltsfeld für die Aktion ParseBoilerPart im Feld für dynamische Inhalte den Eintrag Body aus. Geben Sie im Feld "Schema " das folgende JSON-Schema ein, und wählen Sie dann +Neuer Schritt aus.

    {
        "type": "object",
        "properties": {
            "id": {
                "type": "integer"
            },
            "name": {
                "type": "string"
            },
            "categoryId": {
                "type": "string"
            },
            "price": {
                "type": "number"
            },
            "overview": {
                "type": "string"
            },
            "numberInStock": {
                "type": "integer"
            },
            "imageUrl": {
                "type": "string"
            },
        }
    }
    

    

    Diese Aktion analysiert die Antwortnachricht, die von der getBoilerParts/{id} -Anforderung zurückgegeben wird. Die Antwort enthält die Einzelheiten des Kesselteils, einschließlich der derzeit auf Lager befindlichen Anzahl.

18. Wählen Sie im Feld "Vorgang auswählen" für den neuen Schritt den HTTP-Connector aus.

19. Wählen Sie auf der Registerkarte "Aktionen " die HTTP-Aktion aus.

20. Benennen Sie unter Verwenden des Menüs mit den Auslassungspunkten für den Vorgang in CheckReservations um.

21. Legen Sie die folgenden Eigenschaften für diesen Vorgang fest, und wählen Sie dann +Neuer Schritt aus:

    • Methode: GET
    • URI: https://<APIM name.azure-api.net/api/boilerparts/>. Wählen Sie wie zuvor im Feld "Dynamischer Inhalt " für diesen URI auf der Registerkarte "Dynamischer Inhalt " die Option "boilerPartId" aus. Fügen Sie im URI-Feld den Text "/reserved " nach dem Platzhalter "boilerPartId " an.

    

22. Im Feld "Operation auswählen" für die neue Aktion, im Suchfeld für Connectoren und Aktionen , geben Sie Parse JSON ein und wählen Sie dann die Parse JSON-Aktion aus.

23. Benennen Sie den Vorgang in ParseReservations um.

24. Legen Sie die Inhaltseigenschaft auf "Textkörper" fest.

25. Geben Sie das folgende Schema ein, und wählen Sie dann +Neuer Schritt aus.

    {
        "type": "object",
        "properties": {
            "id": {
                    "type": "integer"
            },
            "totalReservations": {
                    "type": "integer"
            }
        }
    }
    

    

26. Geben Sie im Feld "Operation auswählen" für die neue Aktion im Feld "Verbinder und Aktionen suchen" den Begriff "Bedingung" ein, und wählen Sie dann die Aktion "Bedingungssteuerung" aus.

    

27. Benennen Sie den Vorgang in CompareStock um.

28. Wählen Sie das Feld "Wert auswählen" aus. Geben Sie im Feld "Dynamischen Inhalt hinzufügen " auf der Registerkarte " Ausdruck " den folgenden Ausdruck ein, und wählen Sie dann "OK" aus.

    add(body('ParseReservations')?['totalReservations'], triggerBody()?['numberToReserve'])
    

    Dieser Ausdruck berechnet die Summe der Anzahl der Elemente des angegebenen Kesselteils, die aktuell reserviert sind, und die vom Techniker angeforderte Zahl.

    

29. Im Dropdown-Menü "Bedingung" wählen Sie größer als aus.

30. Im verbleibenden Feld Wert auswählen, im Feld Dynamischer Inhalt auf der Registerkarte Dynamischer Inhalt unter ParseBoilerPart wählen Sie numberInStock aus.

    

31. Wenn die Anzahl der benötigten Artikel plus der reservierten Anzahl größer als die Vorratszahl ist, muss die App eine Bestellung aufgeben, um den Bestand aufzufüllen. Wählen Sie im True-Zweig der CompareStock-Aktion Aktion hinzufügen aus.

32. Wählen Sie auf der Registerkarte "Alle " für den neuen Vorgang "HTTP" und dann die HTTP-Aktion aus.

33. Benennen Sie den Vorgang in PostOrder um.

34. Legen Sie die folgenden Eigenschaften für den PostOrder-Vorgang fest:

    • Methode: POST
    • URI: https:// <APIM name.azure-api.net/api/orders>
    • Geben Sie in der Tabelle "Abfragen " in der ersten Zeile den Schlüssel "boilerPartId" ein. Wählen Sie für den Wert im Feld " Dynamischen Inhalt hinzufügen " auf der Registerkarte "Dynamischer Inhalt " die Option **boilerPartId ** aus.
    • Geben Sie in der zweiten Zeile der Tabelle "Abfragen " die Schlüsselmenge ein. Geben Sie im Feld "Wert " 50 ein.

    

    Die Logik-App bestellt automatisch 50 Artikel des angegebenen Teils, wenn die Lagerbestände niedrig sind.

    Schein

    Die Logik-App geht davon aus, dass der Techniker nicht tatsächlich versucht, mehr als 50 Elemente eines angegebenen Teils in einer einzigen Anforderung zu reservieren!

35. Lassen Sie den Falschzweig der Aktion CompareStock leer.

36. Wählen Sie unter der CompareStock-Aktion+Neuer Schritt aus.

37. Wählen Sie auf der Registerkarte "Alle " für den neuen Vorgang "HTTP" und dann die HTTP-Aktion aus.

38. Benennen Sie den Vorgang als PostReservation um.

39. Legen Sie die folgenden Eigenschaften für den PostReservation-Vorgang fest:

    • Methode: POST
    • URI: https:// <APIM name.azure-api.net/api/reservations>
    • Geben Sie in der Tabelle "Abfragen " in der ersten Zeile den Schlüssel "boilerPartId" ein. Wählen Sie für den Wert im Feld " Dynamischen Inhalt hinzufügen " auf der Registerkarte "Dynamischer Inhalt " die Option "boilerPartId" aus.
    • Geben Sie in der zweiten Zeile die Key engineerId ein. Wählen Sie für den Wert im Feld "Dynamischen Inhalt hinzufügen" auf der Registerkarte "Dynamischer Inhalt" die Option "engineerId" aus.
    • Geben Sie in der dritten Zeile den Schlüssel quantityToReserve ein. Wählen Sie für den Wert im Feld "Dynamischen Inhalt hinzufügen" auf der Registerkarte "Dynamischer Inhalt" die Option "numberToReserve" aus.

40. Wählen Sie + Neuer Schritt aus. Suchen Sie im Feld " Operation auswählen " nach der Antwortaktion , und wählen Sie sie aus.

41. Legen Sie die folgenden Eigenschaften für die Antwortaktion fest:

    • Statuscode: 200
    • Header: Schlüssel - Inhaltstyp, Wert - application/json
    • Text: Wählen Sie im Feld Dynamischer Inhalt das Text-Element aus der PostReservation-Anforderung aus. Dies ist der Text, der bei der Reservierung zurückgegeben wird.

    

42. Wählen Sie oben links auf der Seite "Logik-Apps-Designer " die Option "Speichern" aus. Stellen Sie sicher, dass die Logik-App ohne Fehler gespeichert werden kann.

Um den benutzerdefinierten Connector zu erstellen, den Power Apps zum Auslösen der Logik-App verwenden kann, führt Kiana die folgenden Schritte aus, während sie sich noch im Azure-Portal befinden:

1. Wählen Sie auf der Seite "Übersicht" für die Logik-App "Exportieren" aus.

   

2. Benennen Sie im Bereich "In Power Apps exportieren " den Connector "PartsOrderingConnector", wählen Sie Ihre Power Apps-Umgebung aus, und wählen Sie dann "OK" aus.

   

3. Melden Sie sich bei Power Apps an.

4. Wählen Sie in Ihrer Umgebung unter "Daten" die Option "Benutzerdefinierte Connectors " aus, und stellen Sie sicher, dass " PartsOrderingConnector " aufgeführt ist.

   

Maria kann jetzt die VanArsdel-App ändern, um einem Techniker das Bestellen von Teilen während der Teilnahme an einer Kundenwebsite zu ermöglichen. Maria fügt dem Bildschirm "PartDetails" wie folgt eine Schaltfläche "Bestellung" hinzu:

1. Melden Sie sich bei Power Apps an (sofern noch nicht angemeldet).

2. Wählen Sie unter "Apps" die VanArsdelApp-App aus. Wählen Sie im Auslassungszeichenmenü für die App "Bearbeiten" aus.

3. Im Datenbereich wählen Sie Daten hinzufügen, suchen Sie nach dem PartsOrderingConnector, und fügen Sie mit diesem Connector eine neue Verbindung hinzu.

   

4. Erweitern Sie im Bereich "Strukturansicht" den Bildschirm "PartDetails", und erweitern Sie dann das Formular "DetailForm1".

5. Wählen Sie im Eigenschaftenbereich auf der rechten Seite "Felder bearbeiten" aus. Wählen Sie im Bereich "Felder" im Menü mit den Auslassungspunkten die Option Benutzerdefinierte Karte hinzufügen aus.

   

6. Benennen Sie im Bereich "Strukturansicht " die neue Karte von DataCard1 in "ReserveCard" um. Ändern Sie im Fenster "Entwurfsansicht " die Größe der Karte so, dass sie den unteren Teil des Bildschirms unter dem Image_DataCard1-Steuerelement einnimmt.

   

7. Fügen Sie im Menü "Einfügen" im Untermenü "Eingabe" ein Texteingabesteuerelement, ein Schaltflächensteuerelement und ein Bezeichnungssteuerelement zum ReserveCard-Steuerelement hinzu.

8. Ändern Sie die Größe der Steuerelemente, und positionieren Sie sie so, dass sie nebeneinander angeordnet sind, mit dem Schaltflächen-Steuerelement rechts neben dem Texteingabesteuerelement und der Beschriftung unter dem Schaltflächensteuerelement.

9. Löschen Sie im Eigenschaften-Bereich für das Texteingabe-Steuerelement die Standard-Eigenschaft.

10. Legen Sie im Eigenschaftenbereich für das Schaltflächen-Steuerelement die Eigenschaft "Text " auf "Reservieren" fest.

    

11. Benennen Sie das Texteingabesteuerelement in "NumberToReserve" um, benennen Sie das Schaltflächensteuerelement als Reserve um, und benennen Sie das Bezeichnungssteuerelement als Nachricht um.

12. Legen Sie im Eigenschaftenbereich für das Nachrichtensteuerelement die Eigenschaft "Text " auf "Parts Reserved" fest, und legen Sie die Visible-Eigenschaft auf MessageIsVisible fest.

    Schein

    MessageIsVisible ist eine Variable, die Sie beim Anzeigen des Bildschirms auf "false " initialisieren, aber sie wird in "true " geändert, wenn der Benutzer die Schaltfläche " Reservieren " auswählt.

13. Legen Sie die OnSelect-Eigenschaft für das Steuerelement "Schaltfläche reservieren" auf die folgende Formel fest.

    FieldEngineerPartsOrdering.manualinvoke({boilerPartId:ThisItem.id, engineerId:"ab9f4790-05f2-4cc3-9f01-8dfa7d848179", numberToReserve:NumberToReserve.Text});
    
    Set(MessageIsVisible, true);
    

    Schein

    Diese Formel verwendet eine hartcodierte Ingenieur-ID, um den Techniker darzustellen, der derzeit die App ausführt. In Kapitel 8 wird beschrieben, wie die ID für den angemeldeten Benutzer abgerufen wird.

    Darüber hinaus führt die App keine Fehlerüberprüfung durch; es wird davon ausgegangen, dass die Anforderung zum Reservieren von Teilen immer erfolgreich ist. Weitere Informationen zur Fehlerbehandlung erfahren Sie unter Fehlerfunktion in Power Apps.

14. Legen Sie die OnVisible-Eigenschaft für den Bildschirm "PartDetails " auf "Set(MessageIsVisible, false)" fest.

Gehen Sie wie folgt vor, um die App zu testen:

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

2. Wählen Sie F5 aus, um eine Vorschau der App anzuzeigen.

3. Wählen Sie auf dem Startbildschirm"Teile" aus.

4. Wählen Sie im Suchbildschirm einen beliebigen Teil aus.

5. Scrollen Sie auf dem Bildschirm " Teildetails " nach unten zum Reservierungsbereich, geben Sie einen positiven ganzzahligen Wert ein, und wählen Sie dann " Reservieren" aus. Vergewissern Sie sich, dass die Nachricht "Teile reserviert" angezeigt wird.

   

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

7. Wechseln Sie im Azure-Portal zur Seite für die SQL-Datenbank InventoryDB.

8. Wählen Sie den Abfrage-Editor aus, und melden Sie sich mit Ihrem Kennwort als sqladmin an.

9. Geben Sie im Bereich "Abfrage 1 " die folgende Abfrage ein, und wählen Sie dann "Ausführen" aus. Vergewissern Sie sich, dass die Reservierung, die Sie in der VanArsdel-App vorgenommen haben, angezeigt wird.

   SELECT * FROM [dbo].[Reservations]
   

   

ZurückWeiter