Introduction et récapitulation
Dans le billet de blog précédent , nous avons appris comment déplacer notre application actuelle dans une application maître-détail affichant le partenaire commercial sous forme de liste (maître) et ses informations détaillées avec les ordres de vente dans la page de détail (détail).
Que couvrira cet exercice
Avec la partie 4 de cette série d'articles de blog, nous apprendrons à créer une deuxième page d'exploration avec des informations sur les détails de l'ordre de vente et à afficher un tableau des articles de l'ordre de vente.
La partie la plus importante de cet exercice consiste à comprendre comment supprimer (partie des opérations CRUD) un poste de commande client d'une commande client.
- ODataModel : nous l'avons déjà utilisé pour afficher des informations côté serveur sur notre partenaire commercial, Order Sale. Nous allons maintenant l'utiliser pour afficher l'article de commande et les supprimer de l'ensemble. Pour cela, nous allons utiliser la méthode remove
C'est notre tâche principale dans cet exercice, mais ce n'est pas la seule chose que nous avons faite dans le code. Voici une liste des choses que vous devez faire pour arriver au résultat final:
- Ajoutez un nouvel itinéraire et une nouvelle cible dans manifest.json pour accéder à la page BusinessPartnerSeleOrderItem
- Écoutez l'événement de clic sur les ordres de vente et accédez aux détails de SaleOrder (où nous afficherons les détails des ordres de vente et les articles des ordres de vente)
- Ajouter un FilterBar pour filtrer la table des articles de l'ordre de vente
- Ajouter un ViewSettingsDialog pour trier / grouper les articles de la commande client
- Développez la propriété de navigation ToProduct d'une entité SaleOrderItem pour afficher les informations sur le produit dans les lignes du tableau
NB: J'ai rencontré beaucoup de problèmes sur SaleOrderItemsSet lorsque j'avais besoin de filtrer, trier et grouper des éléments. Vous devez toujours savoir quels champs sont activés (côté serveur implémenté) pour être filtrés, triés ou groupés.
La communication entre équipes est un élément clé du développement logiciel
Dans ce cas, DeliveryDate n'est pas triable, la catégorie et le nom du produit ne sont pas triables et filtrables, etc. N'oubliez donc pas de toujours communiquer correctement avec votre équipe dorsale afin d'obtenir l'implémentation côté serveur requise par votre application frontale.
Codons: Supprimer l'opération
Alors, que devez-vous faire pour supprimer un enregistrement?
UI / UX
Nous sommes un développeur front-end (ou full-stack) et UI / UX est une partie importante de notre travail. Nous devons créer une interface et une expérience utilisateur qui permettent à nos utilisateurs de faire le travail en moins de temps possible, avec moins d'étapes possibles et ne détestons pas l'application qu'ils utilisent à la fin de la journée. Le résultat de notre travail est un utilisateur heureux qui fait son travail avec moins de temps et d'erreur et une entreprise qui gagne plus d'argent.
Pour atteindre cette interface utilisateur / UX, vous pouvez tirer parti de certaines propriétés de la ListBase qui est étendue par notre tableau. Pour ajouter le bouton Supprimer (le grand X), il vous suffit de définir la propriété Mode table sur Supprimer , puis de gérer l'événement de suppression déclenché lorsque l'utilisateur clique sur le bouton.
Implémentation de JavaScript
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); } }); }
Alors qu'avons-nous fait ici?
- Nous obtenons le chemin (qui identifie l'URL REST de notre article) dans le contexte de liaison de la liste
- Nous obtenons la référence ODataModel du framework (nous utilisons le modèle par défaut donc nous n'avons pas besoin de spécifier un nom de modèle pour la méthode getModel)
- Nous avons mis notre table sur occupé. Cela affichera un indicateur occupé suggérant à l'utilisateur que nous communiquons avec le serveur.
- Nous appelons la méthode .remove qui a 2 paramètres. Le premier est le chemin de l'élément que nous souhaitons supprimer et le second est un objet de différents paramètres. Vous pouvez tous les vérifier sur la documentation officielle . Nous avons juste besoin du rappel de l'événement de réussite et d' erreur pour donner un retour correct à l'utilisateur et supprimer l'état occupé.
Que se passe-t-il donc après la méthode .remove sur l'interface utilisateur / UX?
Eh bien, c'est assez simple. L'enregistrement est supprimé, le ODataModel est automatiquement mis à jour par le framework et grâce au mécanisme de liaison de SAPUI5, le tableau est également mis à jour automatiquement.
Qu'est-ce que cela signifie? Que le framework prenne soin de rafraîchir également le tableau avec les nouvelles données (un élément a été supprimé) et nous n'avons pas besoin de nous en préoccuper;)
Conclusion et quelle est la prochaine étape dans la partie 5?
Si vous voulez vérifier le résultat final, vous pouvez directement aller à la branche step_4 de notre projet GitHub .
Dans la partie suivante, nous traiterons l'opération de mise à jour d'un article de bon de commande en complétant nos opérations CRUD.
Malheureusement, je ne peux pas implémenter l'opération de création, car il semble que ce soit un problème de validation côté serveur avec les données que j'essaie de soumettre et l'erreur est très cryptique: D
Rétroaction nécessaire
Que pensez-vous de cette série? Souhaitez-vous vous concentrer davantage sur un aspect SAPUI5 spécifique?
Notez-le dans la section des commentaires! Bon codage à tout le monde!