Einführung & Zusammenfassung
Im vorherigen Blog-Beitrag haben wir gelernt, wie Sie unsere aktuelle Anwendung in eine Master-Detail-App verschieben, in der der Geschäftspartner als Liste (Master) und seine Detailinformationen mit Verkaufsaufträgen auf der Detailseite (Detail) angezeigt werden.
Was wird in dieser Übung behandelt?
In Teil 4 dieser Reihe von Blog-Posts erfahren Sie, wie Sie eine zweite Drilldown-Seite mit Informationen zum Detail des Verkaufsauftrags erstellen und eine Tabelle mit Artikeln zum Verkaufsauftrag anzeigen.
Der wichtigste Teil dieser Übung besteht darin, zu verstehen, wie ein Verkaufsauftragsposten eines Verkaufsauftrags gelöscht wird (Teil der CRUD-Operationen).
- ODataModel : Wir haben es bereits verwendet, um serverseitige Informationen zu unserem Geschäftspartner Order Sale anzuzeigen. Jetzt werden wir es verwenden, um Verkaufsauftragsposition anzuzeigen und sie aus dem Set zu löschen. Zu diesem Zweck verwenden wir die Methode remove
Dies ist unsere Hauptaufgabe in dieser Übung, aber es ist nicht das einzige, was wir im Code getan haben. Hier ist eine Liste der Dinge, die Sie tun müssen, um zum Endergebnis zu gelangen:
- Fügen Sie in der Datei manifest.json eine neue Route und ein neues Ziel hinzu, um zur Seite BusinessPartnerSeleOrderItem zu navigieren
- Hören Sie sich das Verkaufsauftrags-Klickereignis an und navigieren Sie zum SaleOrder-Detail (wo wir Verkaufsauftragsdetails und Verkaufsauftragsartikel anzeigen).
- Fügen Sie eine Filterleiste hinzu, um die Tabelle des Verkaufsauftragspostens zu filtern
- Fügen Sie einen ViewSettingsDialog hinzu, um Verkaufsauftragspositionen zu sortieren / gruppieren
- Erweitern Sie die ToProduct-Navigationseigenschaft einer SaleOrderItem-Entität, um Produktinformationen in Tabellenzeilen anzuzeigen
NB: Beim SaleOrderItemsSet sind viele Probleme aufgetreten, als ich Elemente filtern, sortieren und gruppieren musste. Sie müssen immer wissen, welche Felder aktiviert (serverseitig implementiert) sind, um gefiltert, sortiert oder gruppiert zu werden.
Teamübergreifende Kommunikation ist ein Schlüsselelement in der Softwareentwicklung
In diesem Fall ist DeliveryDate nicht sortierbar, Produktkategorie und -name sind nicht sortierbar und filterbar usw. Denken Sie also daran, immer ordnungsgemäß mit Ihrem Backend-Team zu kommunizieren, um die serverseitige Implementierung zu erhalten, die von Ihrer Front-End-Anwendung benötigt wird.
Lassen Sie uns codieren: Operation löschen
Was müssen Sie also tun, um einen Datensatz zu löschen?
UI / UX
Wir sind ein Front-End-Entwickler (oder Full-Stack) und UI / UX ist ein wichtiger Teil unserer Arbeit. Wir müssen eine Benutzeroberfläche und eine Benutzererfahrung erstellen, die es unseren Benutzern ermöglichen, die Arbeit in kürzerer Zeit und mit weniger Schritten zu erledigen, und die Anwendung, die sie am Ende des Tages verwenden, nicht hassen. Das Ergebnis unserer Arbeit ist ein zufriedener Benutzer, der seine Arbeit mit weniger Zeit und Fehlern erledigt, und ein Unternehmen, das mehr Geld verdient.
Um diese UI / UX zu erreichen, können Sie einige Eigenschaften der ListBase nutzen, die um unsere Tabelle erweitert wird. Um die Schaltfläche zum Löschen (das große X) hinzuzufügen, müssen Sie nur die Eigenschaft Tabellenmodus auf Löschen setzen und dann das Löschereignis behandeln, das ausgelöst wird, wenn der Benutzer auf die Schaltfläche klickt.
JavaScript-Implementierung
onDeleteItem: function(oEvent) { var controller = this; var oModel = this.getView().getModel(); var sPath = oEvent.getParameter("listItem").getBindingContextPath(); var oResourceBundle = this.getView().getModel("i18n").getResourceBundle(); var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length; controller.byId("tableSalesOrderItem").setBusy(true); oModel.remove(sPath, { success: function(oData, response) { MessageBox.success( oResourceBundle.getText("deleteSaleItemSuccess"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller.byId("tableSalesOrderItem").setBusy(false); }, error: function(oError) { MessageBox.error( oResourceBundle.getText("deleteSaleItemError"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller.byId("tableSalesOrderItem").setBusy(false); } }); }
Was haben wir hier gemacht?
- Wir erhalten den Pfad (der die REST-URL unseres Elements identifiziert) aus dem Bindungskontext des angeklickten Listenelements
- Wir erhalten die ODataModel-Referenz aus dem Framework (wir verwenden das Standardmodell, sodass wir für die getModel-Methode keinen Modellnamen angeben müssen).
- Wir decken unseren Tisch auf beschäftigt. Daraufhin wird eine Besetztanzeige angezeigt, die darauf hinweist, dass der Benutzer mit dem Server kommuniziert.
- Wir rufen die .remove-Methode auf, die zwei Parameter hat. Der erste ist der Pfad des Elements, das wir löschen möchten, und der zweite ist ein Objekt mit verschiedenen Parametern. Sie können alle in der offiziellen Dokumentation überprüfen. Wir brauchen nur den Rückruf zum Erfolgs- und Fehlerereignis , um dem Benutzer ein korrektes Feedback zu geben und den Besetztzustand zu entfernen.
Was passiert also nach der .remove-Methode an der UI / UX?
Nun, es ist ziemlich einfach. Der Datensatz wird gelöscht, das ODataModel wird automatisch vom Framework aktualisiert und dank des Bindungsmechanismus von SAPUI5 wird die Tabelle auch automatisch aktualisiert.
Was bedeutet das Dass das Framework darauf achtet, die Tabelle auch mit den neuen Daten zu aktualisieren (ein Element wurde entfernt) und wir uns nicht darum kümmern müssen;)
Fazit und wie geht es in Teil 5 weiter?
Wenn Sie das Endergebnis überprüfen möchten, können Sie direkt zum step_4-Zweig unseres GitHub-Projekts gehen .
Im nächsten Teil werden wir den Aktualisierungsvorgang eines Verkaufsauftragspostens behandeln, der unsere CRUD-Vorgänge abschließt.
Leider kann ich den Erstellungsvorgang nicht implementieren, da es sich anscheinend um ein serverseitiges Validierungsproblem mit den Daten handelt, die ich senden möchte, und der Fehler sehr kryptisch ist: D.
Feedback erforderlich
Was denkst du über diese Serie? Möchten Sie sich stärker auf einen bestimmten SAPUI5-Aspekt konzentrieren?
Schreiben Sie es in den Kommentarbereich! Viel Spaß beim Codieren an alle!