{"id":399,"date":"2019-12-27T17:18:40","date_gmt":"2019-12-27T16:18:40","guid":{"rendered":"https:\/\/jonathanpapa.com\/blog\/?p=399"},"modified":"2022-03-27T00:01:45","modified_gmt":"2022-03-26T23:01:45","slug":"homemade-sap-b1-client-customer-service-portal","status":"publish","type":"post","link":"https:\/\/jonathanpapa.com\/blog\/2019\/12\/27\/homemade-sap-b1-client-customer-service-portal\/","title":{"rendered":"Homemade SAP B1 Web Client &#8211; Customer Service Portal"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"399\" class=\"elementor elementor-399\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-982e1cd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"982e1cd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-17f8ba2\" data-id=\"17f8ba2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c08ca6 elementor-widget elementor-widget-heading\" data-id=\"4c08ca6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Introduction<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96f8dc3 elementor-widget elementor-widget-text-editor\" data-id=\"96f8dc3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Last year, I bought a brand new iPhone XS in Melbourne just before going on a road-trip on the Australian east-coast with my friends. Everything went pretty well until a black dot started appearing in the upper right corner of my shots.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8530988 elementor-widget elementor-widget-image\" data-id=\"8530988\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/palmbeach.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Palm Beach (and a dot)\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDAzLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTJcL3BhbG1iZWFjaC5qcGcifQ%3D%3D\">\n\t\t\t\t\t\t\t<img width=\"800\" height=\"599\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/palmbeach.jpg\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/palmbeach.jpg 800w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/palmbeach-300x225.jpg 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/palmbeach-768x575.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Palm Beach, NSW (and a dot)<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ff0c987 elementor-widget elementor-widget-text-editor\" data-id=\"ff0c987\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>As we arrived in Brisbane, it only took a few minutes to book a time slot with a genius at the Apple Store and no more than a few hours to get the camera fixed. The whole thing cost me exactly 0$.<\/p><p>We can say that my experience with Apple&rsquo;s customer service was pretty statisfying and stress-free.<\/p><p>Since I was looking for a new module to develop on my app, I thought about this again and it gave me the idea to build a customer service portal, so here is what we will be talking about in this article:<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ac6c4d elementor-widget elementor-widget-image\" data-id=\"2ac6c4d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/Service_0.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"Service_0\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDA2LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTJcL1NlcnZpY2VfMC5wbmcifQ%3D%3D\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"349\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/Service_0-1024x440.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/Service_0-1024x440.png 1024w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/Service_0-300x129.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/Service_0-768x330.png 768w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/Service_0.png 1733w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1050fa7 elementor-widget elementor-widget-text-editor\" data-id=\"1050fa7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>I simply attached this web \u00ab\u00a0module\u00a0\u00bb to the B1 client I am working on (and that you can read about in the first two articles)<\/p><ul><li>First article: <a href=\"https:\/\/jonathanpapa.com\/blog\/2019\/10\/11\/sapb1-mssql-webclient\/\" target=\"_blank\" rel=\"noopener\">A homemade SAP B1 Web Client using MSSQL<\/a><ul><li>Read this if you want to know more about the global architecture of the app.<\/li><\/ul><\/li><li>Second article:\u00a0<a href=\"https:\/\/jonathanpapa.com\/blog\/2019\/10\/20\/homemade-sap-b1-web-client-update-1\/\" target=\"_blank\" rel=\"noopener\">Homemade SAP B1 Web Client \u2013 Update 1<\/a><ul><li>Read this if you want to see a cool way of implementing an equivalent of the B1 relationship map with UI5<\/li><\/ul><\/li><\/ul>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ea04cd2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ea04cd2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-52e549e\" data-id=\"52e549e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ea519ea elementor-widget elementor-widget-heading\" data-id=\"ea519ea\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">SAP B1 and the service module<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8297a87 elementor-widget elementor-widget-text-editor\" data-id=\"8297a87\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>SAP B1 has its own service module. From my experience, it isn&rsquo;t widely used <strong>but<\/strong> it does offer several business objects that you can use to handle some basic customer service processes:<\/p><ul><li>Equipment Cards<ul><li>Used to associate an <strong>Item<\/strong> (with a <strong>Serial Number<\/strong>) to a <strong>Customer<\/strong><\/li><li>Can be automatically generated when an item is sold to a customer<\/li><\/ul><\/li><li>Service Calls<ul><li>Used to describe any problem encountered with an item (you can see it as a <em>ticket<\/em>)<\/li><\/ul><\/li><li>Service Contract<ul><li>Used to define coverage hours, items included in the contract etc&#8230;<\/li><li>Can cover one or several equipment cards<\/li><\/ul><\/li><\/ul><div>Indeed, there are plenty of other options and features you can use and there is always the possibility to add custom logic through User-Fields or User-Objects, but for this small application, we will stick to the plain vanilla SAP B1 Service module and build something simple.<\/div>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bbba44f elementor-widget elementor-widget-image\" data-id=\"bbba44f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/B1Interface.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"B1Interface\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDE0LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTJcL0IxSW50ZXJmYWNlLnBuZyJ9\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"506\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/B1Interface-1024x638.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/B1Interface-1024x638.png 1024w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/B1Interface-300x187.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/B1Interface-768x479.png 768w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/B1Interface.png 1497w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">B1 service module can be overwhemling at first<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e553f0 elementor-widget elementor-widget-text-editor\" data-id=\"3e553f0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Now, let&rsquo;s imagine that you sell items to your customers and that you would want to make it easy for them to report an issue with one of them. One of the thing you could do is create a web portal for your customers with some basic actions over their equipments.<\/p><p>A simple and easily-readable interface can be beneficial for both external and internal purposes. This illustrates with something as simple as active filtering.<\/p><p>In the image below, we can see all of the equipment cards for one specific Business Partner, grouped by their standard SAP B1 state: <em>active<\/em>, <em>in repair lab<\/em>, <em>terminated<\/em> or <em>returned<\/em>\u00a0(to the supplier).\u00a0 Additionally, we can filter the equipments by their serial numbers.<\/p><p>\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33ff630 elementor-widget elementor-widget-image\" data-id=\"33ff630\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/activeFiltering.gif\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"activeFiltering\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDIyLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTJcL2FjdGl2ZUZpbHRlcmluZy5naWYifQ%3D%3D\">\n\t\t\t\t\t\t\t<img width=\"1399\" height=\"703\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/activeFiltering.gif\" class=\"attachment-full size-full\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Browsing the equipment cards based on their status<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2faf66f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2faf66f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b23df1f\" data-id=\"b23df1f\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-29e9996 elementor-widget elementor-widget-heading\" data-id=\"29e9996\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">App features<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72dea03 elementor-widget elementor-widget-text-editor\" data-id=\"72dea03\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>As I simply wanted to demonstrate how easy it would be to create such an interface with SAP B1, I stuck to basic features.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbde4b0 elementor-widget elementor-widget-image\" data-id=\"cbde4b0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/useCase.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"useCase\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDM1LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTJcL3VzZUNhc2UucG5nIn0%3D\">\n\t\t\t\t\t\t\t<img width=\"1000\" height=\"540\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/useCase.png\" class=\"attachment-full size-full\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/useCase.png 1000w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/useCase-300x162.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/useCase-768x415.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Use-Case Diagram of the service web application<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd404c1 elementor-widget elementor-widget-text-editor\" data-id=\"bd404c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>One of the key feature of the app is the possibility to create a ticket (which is sent to SAP B1) for a given equipment.<\/p><p>Creating a ticket is nothing more than creating a <strong>Service Call<\/strong>\u00a0for a given:<\/p><ol><li>Item<\/li><li>Serial number<\/li><li>Customer<\/li><\/ol><div>Additionally, the user can also attach one or several files to the ticket.<\/div><div>\u00a0<\/div><div>Below is a simple animated gif that demonstrates the creation of a ticket for an equipment with the serial number \u00ab\u00a0A6-00004\u00a0\u00bb. The user can then open it by going into the <strong>Incidents<\/strong> tab.<\/div>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-012fa88 elementor-widget elementor-widget-image\" data-id=\"012fa88\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/logTicket.gif\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"logTicket\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDE3LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTJcL2xvZ1RpY2tldC5naWYifQ%3D%3D\">\n\t\t\t\t\t\t\t<img width=\"1399\" height=\"703\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/logTicket.gif\" class=\"attachment-full size-full\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17ef58a elementor-widget elementor-widget-text-editor\" data-id=\"17ef58a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>This translates to the creation of a service call in SAP B1<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d2b1e8 elementor-widget elementor-widget-image\" data-id=\"5d2b1e8\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/ServiceCallB1.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"ServiceCallB1\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDIwLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTJcL1NlcnZpY2VDYWxsQjEucG5nIn0%3D\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"474\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/ServiceCallB1-1024x598.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/ServiceCallB1-1024x598.png 1024w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/ServiceCallB1-300x175.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/ServiceCallB1-768x448.png 768w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/ServiceCallB1.png 1322w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e3ec76b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e3ec76b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5f7ac46\" data-id=\"5f7ac46\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-453fcbf elementor-widget elementor-widget-heading\" data-id=\"453fcbf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Technically speaking<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6a04f8 elementor-widget elementor-widget-text-editor\" data-id=\"c6a04f8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Technically, creating a service call is nothing more than an HTTP call to the Service Layer. The call is not made directly via the UI5 application (which is on the client side) but is done via our node.JS API.&nbsp;<\/p>\n<p>The following sequence diagram shows us the interactions between the three main components of our app:<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bc443a elementor-widget elementor-widget-image\" data-id=\"0bc443a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-image\">\n\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/sequenceDiag.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"sequenceDiag\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDQxLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTJcL3NlcXVlbmNlRGlhZy5wbmcifQ%3D%3D\">\n\t\t\t\t\t\t\t<img width=\"637\" height=\"525\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/sequenceDiag.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/sequenceDiag.png 637w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/12\/sequenceDiag-300x247.png 300w\" sizes=\"(max-width: 637px) 100vw, 637px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Sequence diagram showing the creation of a B1 service call<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3001cba elementor-widget elementor-widget-text-editor\" data-id=\"3001cba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Listed by arrow numbers (from top to bottom):<\/p><ol><li>The user logs in by sending a\u00a0<strong>POST<\/strong>\u00a0request to the\u00a0<strong><em>api\/login<\/em>\u00a0<\/strong>endpoint. The user provides a username and a password in the payload.<\/li><li>If the authentification is successful, an HTTP 200 response is sent back to the user along with a JSON Web Token containing his UserID.<\/li><li>Now in possession of a JWT, the user can make subsequent requests to the API. He can create a new service call by sending a\u00a0<strong>POST<\/strong>\u00a0request to the\u00a0<em><strong>\/b1\/serviceCall<\/strong>\u00a0<\/em>endpoint.<ul><li>The Node.JS API (which is on the server-side) is acting as a middleware between the service layer and the UI5 app (which is on the client-side).<\/li><li>It can hold additional controls, checks and business logic before sending a request to the service layer.<\/li><\/ul><\/li><li>The Node.JS API sends a POST request to the B1 service layer to create the service call.<\/li><li>The Service Layer creates the B1 Service Call and returns an HTTP 200 response along with the service call object as a JSON (basically, in its B1 form).<ul><li>Same thing applies here as in point 3: the Node.JS API acts as a middleware and can apply additional transformations to the payload returned by the service layer such as removing certain information or adding others.<\/li><\/ul><\/li><li>The final payload is returned to the UI5 App which can interpret it in the UI.<\/li><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0509676 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0509676\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-74d6d15\" data-id=\"74d6d15\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-415abe6 elementor-widget elementor-widget-heading\" data-id=\"415abe6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How could this be improved?<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13c0512 elementor-widget elementor-widget-text-editor\" data-id=\"13c0512\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Of course, this is only a glimpse of the things you can do with a plain vanilla B1 service module and with a simple UI5 interface. One may improve it by:<\/p>\n<ul>\n<li>Creating several alerts in SAP B1 to notify the relevant support technicians that new tickets were submitted.<\/li>\n<li>Monitoring part expiry dates or warranty expiry dates to automatically send emails to the customer.<\/li>\n<li>Notifying customers when an update is available for their product, offering them the possibility to book a time slot to upgrade it if a manual intervention from the supplier is needed. Of course, this wouldn&rsquo;t be in the interface itself but can be part of a bigger project.<\/li>\n<\/ul>\n<p>Yup, lots of things could be done. This is just a glimpse of what you can achieve with something as simple as a web application.<\/p>\n<p>Then, and this stands for every SAP B1 project, it all depends on what the customer needs and what kind of business rules he wants to see in the application.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7fe27af elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7fe27af\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dbdcdb1\" data-id=\"dbdcdb1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9d6fec7 elementor-arrows-position-inside elementor-pagination-position-outside elementor-widget elementor-widget-image-carousel\" data-id=\"9d6fec7\" data-element_type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;1&quot;,&quot;navigation&quot;:&quot;both&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:5000,&quot;infinite&quot;:&quot;yes&quot;,&quot;effect&quot;:&quot;slide&quot;,&quot;speed&quot;:500}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper-container\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper swiper-image-stretch\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"9d6fec7\" data-elementor-lightbox-title=\"LogTicket_Web\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDYwLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMFwvMDFcL0xvZ1RpY2tldF9XZWIucG5nIiwic2xpZGVzaG93IjoiOWQ2ZmVjNyJ9\" href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2020\/01\/LogTicket_Web.png\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2020\/01\/LogTicket_Web-768x342.png\" alt=\"Creating a ticket and attaching files\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"9d6fec7\" data-elementor-lightbox-title=\"contractCoverage\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDQ2LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMFwvMDFcL2NvbnRyYWN0Q292ZXJhZ2UucG5nIiwic2xpZGVzaG93IjoiOWQ2ZmVjNyJ9\" href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2020\/01\/contractCoverage.png\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2020\/01\/contractCoverage-768x406.png\" alt=\"Service contract details\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"9d6fec7\" data-elementor-lightbox-title=\"globalView\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDQ4LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMFwvMDFcL2dsb2JhbFZpZXcucG5nIiwic2xpZGVzaG93IjoiOWQ2ZmVjNyJ9\" href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2020\/01\/globalView.png\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2020\/01\/globalView-768x406.png\" alt=\"List view of the equipments\" \/><\/figure><\/a><\/div><div class=\"swiper-slide\"><a data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"9d6fec7\" data-elementor-lightbox-title=\"detailView\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NDQ3LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAyMFwvMDFcL2RldGFpbFZpZXcucG5nIiwic2xpZGVzaG93IjoiOWQ2ZmVjNyJ9\" href=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2020\/01\/detailView.png\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2020\/01\/detailView-768x406.png\" alt=\"View of one equipment\" \/><\/figure><\/a><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-pagination\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-prev\">\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-left\"><\/i>\t\t\t\t\t\t<span class=\"elementor-screen-only\">Pr\u00e9c\u00e9dent<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-swiper-button elementor-swiper-button-next\">\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-chevron-right\"><\/i>\t\t\t\t\t\t<span class=\"elementor-screen-only\">Suivant<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce21133 elementor-widget elementor-widget-text-editor\" data-id=\"ce21133\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-text-editor elementor-clearfix\">\n\t\t\t\t<p>Thank you for reading!&nbsp;\ud83e\udd19\ud83c\udffc<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introduction Last year, I bought a brand new iPhone XS in Melbourne just before going on a road-trip on the Australian east-coast with my friends. Everything went pretty well until a black dot started appearing in the upper right corner of my shots. Palm Beach, NSW (and a dot) As we arrived in Brisbane, it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":448,"comment_status":"closed","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[10,11],"tags":[],"_links":{"self":[{"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/posts\/399"}],"collection":[{"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":10,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/posts\/399\/revisions"}],"predecessor-version":[{"id":687,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/posts\/399\/revisions\/687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/media\/448"}],"wp:attachment":[{"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/media?parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/categories?post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/tags?post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}