7. Kapitel: Hinzufügen von Funktionen zur App

Kiana und Maria freuen sich, Caleb, dem Außendiensttechniker, die App für die Bestandsverwaltung zu zeigen. Caleb mag es, schlägt aber vor, der Benutzeroberfläche einige zusätzliche Funktionen hinzuzufügen, um die Verwendung zu vereinfachen. Insbesondere möchte Caleb zu Folgenden in der Lage sein:

• Ein Foto der Arbeiten an einem Kessel oder einer Klimaanlage hinzufügen und es den Termindetails auf dem Termin bearbeiten-Bildschirm hinzufügen. Dieses Bild könnte sich als dokumentarischer Beweis für durchgeführte Reparaturen als nützlich erweisen. Mit dem Termin bearbeiten-Bildschirm kann der Benutzer derzeit dem Termin ein Bild hinzufügen, das Bild wird jedoch nicht gespeichert, da diese Funktion noch nicht vollständig implementiert wurde. Der Grund für diese Auslassung ist, dass Kiana und Preeti den besten Ort zum Speichern von Bilddaten bestimmen müssen. Caleb möchte, dass diese Funktionalität so schnell wie möglich hinzugefügt wird.

• Einen vollständigen Terminverlauf für einen Kunden anzeigen, um angeforderte Reparaturen zu verfolgen und laufende Probleme zu überwachen, bei denen Techniker möglicherweise wiederholt angerufen werden müssen.

• Teile auf dem Teiledetails-Bildschirm bestellen.

Zusätzlich zeigt die Bildsteuerung auf dem Teiledetails-Bildschirm die unter einer bestimmten URL gespeicherten Bilder an. Derzeit sind die URLs in den Daten lediglich Platzhalter. Wie bei den Fotos für den Terminbildschirm, müssen Kiana und Preeti den besten Speicherort für die Bilder ermitteln, damit sie für die App verfügbar sind.

Hinzufügen eines Fotos zu einem Termin

Fotos müssen an einem Ort gespeichert werden, auf den die App zugreifen kann. Aus Leistungs- und Sicherheitsgründen möchte Preeti nicht, dass Fotos in OneDrive oder in der Azure SQL-Datenbank gespeichert werden. Stattdessen entscheiden sie sich für die Verwendung von Azure Blob Storage. Blob Storage ist für die Aufnahme großer Binärobjekte optimiert und robust und verfügt über integrierte Sicherheit. Power Apps verfügt über einen Anschluss, der den Zugriff auf den Blob-Speicher ermöglicht. Maria schlägt vor, einen neuen Bildschirm für die Aufnahme von Bildern hinzuzufügen, um die Benutzererfahrung für Caleb zu verbessern.

Weitere Informationen: Erfahren Sie mehr über Azure Blob Storage

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

1. Wählen Sie im Menü des Azure-Portals auf der Startseite die Option + Ressource erstellen aus. Geben Sie im Feld Marketplace durchsuchen die Zeichenfolge Storage-Konto ein, und drücken Sie die EINGABETASTE.

   

2. Klicken Sie auf der Seite Storage-Konto auf Erstellen.

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

   • Abonnement: Wählen Sie Ihr Abonnement aus
   • Ressourcengruppe: webapi_rg
   • Name des Storage-Kontos: Geben Sie einen global eindeutigen Namen ein, und notieren Sie ihn für später
   • Standort: Wählen Sie den nächstgelegenen Standort aus
   • Leistung: Standard
   • Art des Kontos: BlobStorage
   • Replikation: RA-GRS

   

4. Wählen Sie auf der Validierungsseite die Option Erstellen aus, und warten Sie, bis das Speicherkonto bereitgestellt ist.

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 Containers die Option + Container aus. Erstellen Sie einen neuen Container mit dem Namen Fotos, und wählen Sie Erstellen aus. Ändern Sie die Öffentliche Zugangsebene zu Blob.

   

8. Wählen Sie zurück auf der Übersicht-Seite für das Speicherkonto unter Einstellungen Zugangsschlüssel aus. Auf der Zugangsschlüssel-Seite wählen Sie Schlüssel anzeigen aus. Notieren Sie sich den Wert des Schlüssels für key1.

   

Preeti gibt den Namen und den Schlüssel des Speicherkontos an Kiana weiter, 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 die Option Daten, und wählen Sie dann 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 Neue Verbindung-Seite nach unten, wählen Sie Verbindungen, Azure Blob Storage und dann Erstellen aus.

   

4. Geben Sie im Azure Blob Storage-Dialog den Namen des Speicherkontos und den von Preeti bereitgestellten Zugriffsschlüssel ein, und wählen Sie dann Erstellen aus.

   

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

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

1. Öffnen Sie die App VanArsdelApp zur Bearbeitung in Power Apps Studio.

2. Wählen Sie im Daten-Bereich Daten hinzufügen aus, 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 Azure Blob Storage-Connector aus, um ihn Ihrer App hinzuzufügen.

   

Marias nächste Aufgabe besteht darin, einen Bildschirm hinzuzufügen, auf dem ein Techniker oder Ingenieur ein Foto speichern kann. Maria beschließt, 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 einen Link zu diesem neuen Bildschirm vom EditAppointment-Bildschirm hinzu, indem sie die folgenden Schritte ausführt:

1. Wählen Sie im Menü Einfügen die Option Neuer Bildschirm und dann die Vorlage Scrollbar aus.

   

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

3. Ändern Sie die Text-Eigenschaft des LblAppNameX-Steuerelements auf diesem Bildschirm in Ein Foto machen.

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

5. Wählen Sie in dem Einfügen-Menü aus der Medien-Dropdown-Liste Bild hinzufügen aus, um ein neues Bildsteuerelement zu erstellen.

   

   Hinweis

   Das Bildsteuerelement ist eigentlich 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 und positionieren Sie die Bildsteuerung neu, um den Bildschirmkörper zu belegen.

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 TakePhoto-Bildschirm, und wählen Sie dann Einfügen. Das IconBackArrowX-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 Steuerelement IconBackArrowX auf dem Bildschirm TakePhoto aus. Ändern Sie im rechten Bereich auf der Erweitert-Registerkarte die OnSelect-Aktionseigenschaft zu Navigate(EditAppointment, ScreenTransition.None).

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

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

    

12. Ändern Sie die Formel in der OnSelect-Aktionseigenschaft des Speichern-Symbolsteuerelements auf Folgendes.

    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 <storage account name> durch den Namen des von Preeti erstellten Azure Storage-Kontos.

    Dieser Code lädt das Bild in den Fotos-Container im Blob-Speicher. Jedes Bild erhält einen eindeutigen Dateinamen. Die Patch Funktion aktualisiert die imageUrl-Eigenschaft im Termindatensatz mit der URL des Bildes im Blob-Speicher.

13. Erweitern Sie im Strukturansicht-Bereich das AddMediaWithImageX-Steuerelement. Modifiziere Sie die Bild-Eigenschaft des UploadedImageX-Steuerelements und legen Sie es auf AppointmentImage fest.

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

14. Wählen Sie im Strukturansicht-Bereich das AddMediaButtonX-Steuerelement aus. Legen Sie die UseMobileCamera-Eigenschaft dieses Steuerelements auf wahr fest: Legen Sie die Aktionseigenschaft OnChange für das Dropdown-Steuerelement wie folgt fest:

    Set(AppointmentImage, AddMediaButton1.Media)
    

    Diese Formel ändert die AppointmentImage-Variable, um auf das neue Bild zu verweisen. Das UploadedImageX-Steuerelement zeigt dieses Bild an.

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

16. Erweitern Sie das EditFormX-Steuerelement. Entfernen Sie unter dem Steuerelement Bild_DataCardX das AddPictureX-Steuerelement.

    

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

    • Bild: Parent.Default
    • X: 30
    • Y: DataCardKeyX.Y + DataCardKeyX.Hight + 150 (wobei DataCardKeyX die Datenkarte mit dem ImageX-Steuerelement ist)
    • Breite: Parent.Width - 60
    • Höhe: 400

    Hinweis

    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 Kamera-Symbol hinzu und positionieren Sie es dann zwischen der Bild-Bescriftung unddem ImageX-Steuerelement. Ändern Sie den Namen des Steuerelements zu CameraIcon.

    Hinweis

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

    

19. Legen Sie die Aktionseigenschaft OnSelect für das CameraIcon-Steuerelement wie folgt 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 können. Das ursprünglich angezeigte Bild ist das Standard-Beispielbild.

Um die App zu testen, führen Sie die folgenden Schritte aus:

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

2. Wählen Sie F5 zur Vorschau der App.

3. Wählen Sie auf dem Home-Bildschirm Termine aus.

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

5. Wählen Sie im Detailbildschirm für den Termin das Bearbeitungssymbol in der Kopfzeile des Bildschirms aus.

6. Wählen Sie auf dem Bearbeitungsbildschirm das Kamera-Symbol für das Bild aus.

7. Stellen Sie sicher, dass der Ein Foto machen-Bildschirm erscheint.

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

9. Wählen Sie Speichern aus. Stellen Sie sicher, dass das Bild auf der Detailseite angezeigt wird, und wählen Sie dann das Häkchensymbol 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 Teilebildern

Nachdem Preeti und Kiana festgestellt haben, dass Blob Storage ein idealer Ort zum Speichern von Bildern ist, die mit Terminen verbunden sind, entscheiden sie, dass sie denselben Ansatz zum Speichern der Teilebilder verwenden sollten. Ein wesentlicher Vorteil dieses Ansatzes besteht darin, dass keine Änderungen an der App erforderlich sind. Die App verwendet dasselbe Speicherkonto und dieselbe Verbindung erneut. Als separate Migrationsübung können sie Folgendes tun:

1. Erstellen Sie einen neuen Blob Storage-Container.

2. Laden Sie die Teilebilder in diesen Container hoch.

3. Ändern Sie die ImageURL-Referenzen in der Teile-Tabelle in der InventoryDB-Datenbank in die URL jedes Bildes.

Die App erkennt automatisch die neue URL für jedes Teilbild und das Bild-Steuerelement auf dem PartDetails-Bildschirm zeigt das Bild automatisch an.

Verfolgen 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. Maria arbeitet mit Caleb an den Informationen, die sie sehen möchten, und entwirft ein einfaches Design, das die Notizen und das Datum jedes Besuchs enthält.

Mit Blick auf die Daten glaubt Maria, dass ein Katalog-Steuerelement die beste Möglichkeit ist, die Tabellendaten auf einem Bildschirm anzuzeigen.

Maria erstellt die benutzerdefinierte Komponente wie folgt:

1. Wählen Sie unter Verwendung von Power Apps Studio im Strukturansicht-Bereich die Option Komponenten und dann + Neue Komponente aus.

   

   Eine neue leere Komponente mit dem Namen Component1 wird 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 Katalog-Steuerelement und ändern Sie die Größe, um die benutzerdefinierte Komponente zu füllen.

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

   

5. Nennen Sie im Strukturansicht-Bereich das Beschriftungssteuerelement in NotesLabel um. Legen Sie die Überlauf-Eigenschaft auf Overflow.Scroll fest. Mit dieser Einstellung kann das Steuerelement mehrere Textzeilen anzeigen und vom Benutzer einen Bildlauf durchführen. Legen Sie die folgenden Eigenschaften fest, damit Sie das Steuerelement positionieren und in der Größe anpassen können:

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

6. Fügen Sie dem Steuerelement eine zweite Textbeschriftung hinzu. Benennen Sie dieses Steuerelement in 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 aussieht, wenn es in die App eingefügt und mit seinem Thema angezeigt wird, wählen Sie im Strukturansicht-Bereich DateHistoryComponent aus. Wählen Sie im rechten Bereich auf der Erweitert-Registerkarte das Füllen-Feld aus und ändern Sie die Farbe in RGBA (0, 0, 0, 1).

   

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 dient als Trennzeichen zwischen den in der Galerie angezeigten Datensätzen.

   

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 beschrieb Maria, dass einige zusätzliche benutzerdefinierte Eingabeeigenschaften hinzufügt werden müssen, um Daten in einer benutzerdefinierten Komponente verwenden zu können. Kiana erklärte auch, dass Maria Beispieldaten für diese Eigenschaften bereitstellen muss, damit sie wie folgt auf die Datenfelder in den Steuerelementen in der Komponente verweisen kann:

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

   

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

   • Anzeigename: Daten
   • Name: Daten
   • Beschreibung: Die Tabelle der Termine für einen Kunden mit Notizen und Daten
   • Eigenschaftstyp: Eingabe
   • Datentyp: Tabelle
   • Erhöhen Sie OnReset, wenn sich der Wert ändert: Lassen Sie das Feld leer

   

3. Wählen Sie die neue benutzerdefinierte Eigenschaft Daten aus, um die vom Steuerelement angezeigten Beispieldaten zu ändern. Geben Sie im Formelfeld Table({Notes: "Example notes field text.", 'Appointment Date': Text(Today())}) ein.

   

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

5. Im rechten Bereich auf der Erweitert-Registerkarte, legen Sie die Artikel-Eigenschaft des AppointmentHistory-Katalog-Steuerelements auf Parents.Data fest.

   

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

   Hinweis

   Die Größe-Eigenschaft gibt die Schriftgröße für den vom Steuerelement angezeigten Text an.

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

   

Die benutzerdefinierte Komponente ist vollständig. Maria erstellt mithilfe dieser Komponente einen neuen Bildschirm, in dem der Terminverlauf für einen Kunden wie folgt angezeigt wird:

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

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

   

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

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

5. Verschieben Sie das ViewAppointments-Symbol in den leeren Bereich 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)
   

   Diese Formel füllt eine Sammlung mit dem Namen customerAppointmentsCollection mit den Terminen für den ausgewählten Kunden und wechselt dann zum AppointmentHistoryScreen, um sie anzuzeigen. Sie erstellen diesen Bildschirm in den folgenden Schritten.

7. Wählen Sie im Menü Einfügen die Option Neuer Bildschirm und dann die Vorlage Scrollbar aus.

   

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

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

   

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

    "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 zu erstellen:

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

12. Wählen Sie das Steuerelement RectQuickActionBarX fest und legen Sie die Höhe-Eigenschaft auf 140 fest.

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

    

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 Bildschirmkörper unterhalb der Überschrift einnimmt.

    

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

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

17. Speichern Sie die App.

Um die App zu testen, führen Sie die folgenden Schritte aus:

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

2. Wählen Sie F5 zur Vorschau der App.

3. Wählen Sie auf dem Home-Bildschirm Termine aus.

4. Wählen Sie im Suchbildschirm das Detailliste-Symbol für jeden Termin aus.

5. Stellen Sie sicher, dass der Terminverlauf-Bildschirm für den ausgewählten Kunden angezeigt wird.

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

Teile bestellen

Eine wichtige Anforderung des Systems besteht darin, einem Techniker die Möglichkeit zu geben, alle erforderlichen Teile zu bestellen, während er einen Kunden besucht. Wenn die Teile auf Lager sind, sollte es möglich sein, einen weiteren Besuch zu vereinbaren, um die Reparatur zum nächsten für den Kunden geeigneten Zeitpunkt abzuschließen. Wenn die Teile derzeit nicht vorrätig sind und bestellt werden müssen, kann der Techniker dies dem Kunden mitteilen. Malik kann dann einen Termin mit dem Kunden vereinbaren, wenn Maria benachrichtigt wird, dass die Teile im Lager angekommen sind.

Der Reservierungsteil der App verwendet die Tabellen in der InventoryDB-Datenbank, die im folgenden Bild dargestellt wird. Die Bestellungen-Tabelle enthält Informationen zu Bestellungen für Teile. Die Reservierungen-Tabelle führt die Reservierungsanfragen auf, die Techniker und Ingenieure für Teile gestellt haben. Die Techniker-Tabelle enthält den Namen und die Kontaktnummer des Technikers, der die Reservierung vorgenommen hat. Dies erleichtert Maria, der Bestandsmanagerin, bei Bedarf Abfragen zu stellen.

Um diese Funktion zu unterstützen, muss Kiana die Web-API mit einer Methode aktualisieren, mit der die Anzahl der reservierten Elemente für ein bestimmtes Teil wie folgt abgerufen wird:

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

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

   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 Modelle eine weitere neue Datei mit dem Namen Reservation.cs hinzu, und fügen Sie dieser Datei den folgenden Code hinzu. Die Reservierung-Klasse enthält Informationen über die Anzahl der Artikel für ein bestimmtes 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 Modelle mit dem folgenden Code eine weitere Datei mit dem Namen InventoryEngineer.cs hinzu. Die InventoryEngineer-Klasse zeichnet auf, welche Techniker welche Reservierungen gemacht 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 InventoryContext.cs -Datei im Modelle-Ordner, 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 BoilerPartController.cs-Datei im Controller-Ordner, 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 gezeigt.

   [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. Modifizieren 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 bereitgestellte Web-API zu erstellen und zu veröffentlichen.

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

11. Im Visual Studio Code klicken Sie mit der rechten Maustaste auf den Veröffentlichen-Ordner, und wählen Sie dann In Web App bereitstellen aus.

Preeti kann jetzt den von der VanArsdel-App verwendeten API Management-App aktualisieren, 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:

Hinweis

Preeti hätte die vorhandene Außendiensttechniker-API löschen und durch eine neue Version ersetzen können. Bei diesem Ansatz besteht jedoch die Gefahr, dass vorhandene Anwendungen beschädigt werden, die derzeit möglicherweise die API verwenden. Es ist besser, die vorhandene API beizubehalten und die Änderungen als eine Überarbeitung hinzuzufügen.

1. Wechseln Sie im Azure-Portal zum API-Management-Dienst.

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

3. Wählen Sie die Außendiensttechniker-API, das Menü mit den Auslassungspunkten 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 ÜBERARBEITUNG 2-Seite Entwurf aus.

   

6. Wählen Sie auf der Seite Entwurf die Option Operation hinzufügen aus. Füllen Sie im Bereich FrontEnd die folgenden Eigenschaften aus, und wählen Sie dann Speichern aus: Diese Operation wird zum Abrufen der Anzahl der für ein bestimmtes Kesselteil reservierten Elemente verwendet:

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

   

7. Auf der Test-Registerkarte für die neue Operation legen Sie die ID-Parameter auf eine gültige Teilenummer (das Beispiel im Bild verwendet Teil 1) fest, und wählen Sie dann Senden aus.

   

8. Stellen Sie sicher, dass der Test erfolgreich ist. Der Vorgang sollte mit einer HTTP 200-Antwort und einem Text abgeschlossen werden, der die Anzahl der Reservierungen für das Produkt anzeigt.

   

9. Wählen Sie auf der Seite Entwurf die Option Operation hinzufügen aus. Legen Sie im FrontEnd-Bereich die folgenden Eigenschaften fest (dieser Vorgang definiert POST-Anforderungen zum Erstellen neuer Bestellungen):

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

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

    • Name: boilerPartId, Beschreibung : Kesselteil-ID, Art: lang
    • Name: quantity, Beschreibung : Menge, Art: ganze Zahl

    

11. Wählen Sie im FrontEnd-Bereich erneut Vorgang hinzufügen 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/Reservations

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

    • Name: boilerPartId, Beschreibung: Kesselteil-ID, Art: lang
    • Name: engineerId, Beschreibung: Techniker-ID, Art: Zeichenfolge
    • Name: quantityToReserve, Beschreibung: Menge zu reservieren, Art: ganze Zahl

13. Wählen Sie auf der Registerkarte Überarbeitungen die neue Version aus. Wählen Sie im Menü mit den Auslassungspunkten für diese Version Aktuell machen aus.

    

14. Wählen Sie im Revision aktuell machen-Dialog Speichern.

15. Öffnen Sie eine andere Seite in Ihrem Webbrowser, und rufen Sie die URL https://<APIM name> . azure-API.net/API/boilerparts/1/reserved auf, wobei <APIM name> der Name Ihres API-Dienstes ist. Stellen Sie sicher, dass Sie eine ähnliche Antwort erhalten.

    {"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 zur App hinzufügen. Die App könnte dann ihre eigene Logik implementieren, um zu bestimmen, wie viele Artikel des angegebenen Produkts derzeit auf Lager sind, wie viele reserviert sind, die Ergebnisse mit der Anzahl der erforderlichen Artikel vergleichen, bei Bedarf eine Bestellung für mehr Lager aufgeben oder Artikel aus dem vorhandenen Bestand reservieren. Diese Art der Logik ist jedoch besser in einer Azure-Logik-App implementiert. Power Apps kann die Logik-App über einen benutzerdefinierten Connector aufrufen, wenn ein Techniker ein Teil reservieren oder bestellen möchte.

Um die Logik-App zu erstellen, führt Kiana die folgenden Schritte aus:

Hinweis

Zur Vereinfachung ist die in diesem Beispiel erstellte Logik-App nicht transaktionsbezogen. Es ist möglich, dass ein gleichzeitiger Benutzer zwischen der Überprüfung der Verfügbarkeit eines Teils und der Reservierung eine widersprüchliche Reservierung vornimmt. Sie können die Transaktionssemantik implementieren, indem Sie einen Teil der Logik in dieser Logik-App durch eine gespeicherte Prozedur in der InventoryDB-Datenbank ersetzen.

1. Wählen Sie im Menü des Azure-Portals auf der Startseite die Option + Ressource erstellen aus.

2. Geben Sie im Feld Marketplace durchsuchen die Zeichenfolge Logik-App ein, und drücken Sie die EINGABETASTE.

3. Klicken Sie auf der Seite Logik-App auf Erstellen.

   

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

   • 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
   • Mit Integrationsdienstumgebung verknüpfen: Leer lassen
   • Protokollanalyse aktivieren: Leer lassen

5. Wählen Sie auf der Bestätigungsseite die Option Erstellen aus, und warten Sie, bis die Logik-App bereitgestellt wird.

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

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

   

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

    

9. Wählen Sie auf der Trigger-Registerkarte Beim Empfang einer HTTP-Anforderung.

   

10. Geben Sie im Feld JSON-Schema des Anforderungstexts das folgende Schema ein, und wählen Sie dann + Neuer Schritt.

    {
        "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 umfasst die ID eines Kesselteils, die Anzahl der zu reservierenden Artikel und die ID des Technikers, der die Anforderung stellt. Die App sendet diese Anfrage, wenn ein Techniker ein Teil reservieren möchte.

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

    

    Die Logik-App ruft den BoilerParts{id}-Vorgang der Web-API zum Abrufen von Informationen über den Kesselteil auf, der durch die Anforderung von der App bereitgestellt wird.

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

    

13. Wählen Sie im Menü mit den Auslassungspunkten das HTTP-Aktionsfeld und 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:

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

    

15. Geben Sie in dem Einen Vorgang auswählen-Feld im Nach Connectors und Aktionen suchen-Feld JSON analysieren ein, und wählen Sie dann die JSON analysieren-Aktion.

    

16. Benennen Sie unter Verwenden des Menüs mit den Auslassungspunkten für die JSON analysieren-Aktion die Aktion in ParseBoilerPart um.

17. Wählen Sie im Feld Inhalt für die ParseBoilerPart-Aktion im Feld Dynamischer Inhalt Körper aus. Geben Sie im Feld Schema das folgende JSON-Schema ein, und wählen Sie dann + Neuer Schritt.

    {
        "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 von der getBoilerParts /{id}-Anforderung zurückgegebene Antwortnachricht. Die Antwort enthält die Details des Kesselteils, einschließlich der derzeit auf Lager befindlichen Nummer.

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

19. Wählen Sie in der Registerkarte Aktion die HTTP-Aktion aus.

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

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

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

    

22. Geben Sie in dem Einen Vorgang auswählen-Feld für die neue Aktion im Nach Connectors und Aktionen suchen-Feld JSON analysieren ein, und wählen Sie dann die JSON analysieren-Aktion.

23. Benennen Sie den Vorgang in ParseReservations um.

24. Setzen Sie die Eigenschaft Inhalt auf Text.

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

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

    

26. Geben Sie in dem Einen Vorgang auswählen-Feld für die neue Aktion im Nach Connectors und Aktionen suchen-Feld Bedingung ein, und wählen Sie dann die Bedingungssteuerelement-Aktion.

    

27. Benennen Sie den Vorgang in CompareStock um.

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

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

    Dieser Ausdruck berechnet die Summe aus der Anzahl der Elemente des angegebenen Kesselteils, die derzeit reserviert sind, und der vom Techniker angeforderten Anzahl.

    

29. Wählen Sie im Bedingung-Dropdown-Listenfeld die Option Ist größer als aus.

30. Wählen Sie im übrigen Einen Wert auswählen-Feld im Dynamischer Inhalt-Feld auf der Dynamischer Inhalt-Registerkarte unter ParseBoilerPart numberInStock aus.

    

31. Wenn die Anzahl der erforderlichen Artikel zuzüglich der reservierten Anzahl größer ist als die Anzahl der auf Lager befindlichen Artikel, muss die App eine Bestellung aufgeben, um das Inventar aufzufüllen. Wählen Sie in der Wahr-Verzweigung Aktion CompareStock die Option Aktion hinzufügen aus.

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

33. Benennen Sie den Vorgang in PostOrder um.

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

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

    

    Die Logik-App bestellt automatisch 50 Artikel des angegebenen Teils, wenn der Lagerbestand zur Neige geht.

    Hinweis

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

35. Lassen Sie die Falsch-Verzweigung der CompareStock-Aktion leer.

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

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

38. Benennen Sie den Vorgang in PostReservation um.

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

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

40. Wählen Sie Neuer Schritt. Suchen Sie im Feld Einen Vorgang auswählen die Antwort-Aktion, und wählen Sie sie aus.

41. Legen Sie die folgenden Eigenschaften für die Antwort-Aktion fest.

    • Statuscode: 200
    • Kopfzeilen: Schlüssel - content-type, Wert - Anwendung/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 Logic Apps Designer-Seite Speichern aus. Stellen Sie sicher, dass die Logik-App fehlerfrei gespeichert werden kann.

Um den den benutzerdefinierten Connector zu erstellen, mit dem Power Apps die Logik-App auslösen kann, führt Kiana die folgenden Schritte aus, während sie sich noch im Azure-Portal befindet:

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

   

2. Geben Sie im Bereich Exportieren nach Power Apps dem Connector den Namen PartsOrderingConnector, wählen Sie Ihre Power Apps-Umgebung und dann OK.

   

3. Melden Sie sich bei Power Apps an.

4. Wählen Sie in Ihrer Umgebung unter Daten Benutzerdefinierte Connectors aus, und überprüfen Sie, ob PartsOrderingConnector aufgelistet ist.

   

Maria kann jetzt die VanArsdel-App so ändern, dass ein Techniker Teile bestellen kann, während er einen Kundenstandort besucht. Maria fügt wie folgt eine Bestellung-Schaltfläche zum PartDetails-Bildschirm hinzu:

1. Melden Sie sich in Power Apps an (falls Sie noch nicht angemeldet sind).

2. Wählen Sie unter Apps die VanArsdelApp-App aus. Wählen Sie im Menü mit den Auslassungspunkten der App Bearbeiten aus.

3. Wählen Sie im Daten-Bereich Daten hinzufügen aus, suchen Sie nach dem PartsOrderingConnector-Connector, und fügen Sie über diesen Connector eine neue Verbindung hinzu.

   

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

5. Wählen Sie im Eigenschaften-Bereich rechts die Felder Bearbeiten aus. Wählen Sie im Felder-Bereich im Menü mit den Auslassungspunkten die Option Eine benutzerdefinierte Karte hinzufügen.

   

6. Benennen Sie die neue Karte im Strukturansicht-Bereich von DataCard1 in ReserveCard um. Ändern Sie im Designansicht-Fenster die Größe der Karte so, dass sie den unteren Teil des Bildschirms unterhalb des Bild_DataCard1-Steuerelements einnimmt.

   

7. Fügen Sie im Einfügen-Menü aus dem Eingabe-Untermenü ein Texteingabe-Steuerelement, ein Schaltflächen-Steuerelement und ein Beschriftung-Steuerelement zum ReserveCard-Steuerelement hinzu.

8. Ändern Sie die Größe und positionieren Sie die Steuerelemente so, dass sie nebeneinander liegen. Das Schaltflächen-Steuerelement rechts vom Texteingabe-Steuerelement und die Beschriftung unter dem Schalftflächen-Steuerelement.

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

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

    

11. Benennen Sie das Texteingabe-Steuerelement in NumberToReserve um, benennen Sie das Schaltflächen-Steuerelement in Reservieren und das Beschriftung-Steuerelement in Meldung um.

12. Legen Sie im Eigenschaften-Bereich für das Meldung-Steuerelement die Text-Eigenschaft auf Teile reserviert und die Visible-Eigenschaft auf MessageIsVisible fest.

    Hinweis

    MessageIsVisible ist eine Variable, die Sie zu falsch initialisieren, wenn der Bildschirm angezeigt wird. Sie wird jedoch in wahr geändert, wenn der Benutzer die Reservieren-Schaltfläche auswählt.

13. Legen Sie die OnSelect-Eigenschaft für das Reservieren-Schaltflächensteuerelement auf folgende Formel fest.

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

    Hinweis

    Diese Formel verwendet eine fest codierte Techniker-ID, um den Techniker darzustellen, der gerade die App ausführt. In Kapitel 8 wird beschrieben, wie Sie die ID für den angemeldeten Benutzer abrufen.

    Darüber hinaus führt die App keine Fehlerprüfung durch. Es wird davon ausgegangen, dass die Anforderung, Teile zu reservieren, immer erfolgreich ist. Weitere Informationen zur Fehlerbehandlung finden Sie unter Fehlerfunktionen in Power Apps.

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

Um die App zu testen, führen Sie die folgenden Schritte aus:

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

2. Wählen Sie F5 zur Vorschau der App.

3. Wählen Sie auf dem Home-Bildschirm Teile aus.

4. Wählen Sie im Suchbildschirm ein beliebiges Teil aus.

5. Scrollen Sie auf dem Teiledetails-Bildschirm nach unten zum Reservierungsabschnitt, geben Sie einen positiven ganzzahligen Wert ein, und wählen Sie dann Reservieren. Stellen Sie sicher, dass die Teile reserviert-Meldung erscheint.

   

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 InventoryDB-SQL-Datenbank.

8. Wählen Sie den Abfrageeditor aus, und melden Sie sich als sqladmin mit Ihrem Passwort an.

9. Geben Sie im Bereich Abfrage 1 die folgende Abfrage ein, und wählen Sie dann Ausführen aus. Stellen Sie sicher, dass die in der VanArsdel-App vorgenommene Reservierung angezeigt wird.

   SELECT * FROM [dbo].[Reservations]
   

   

Zurück Weiter