{"id":303,"date":"2019-10-20T23:59:32","date_gmt":"2019-10-20T21:59:32","guid":{"rendered":"https:\/\/jonathanpapa.com\/blog\/?p=303"},"modified":"2022-02-27T09:36:57","modified_gmt":"2022-02-27T08:36:57","slug":"homemade-sap-b1-web-client-update-1","status":"publish","type":"post","link":"https:\/\/jonathanpapa.com\/blog\/2019\/10\/20\/homemade-sap-b1-web-client-update-1\/","title":{"rendered":"Homemade SAP B1 Web Client \u2013 Update 1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"303\" class=\"elementor elementor-303\">\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-af3ce58 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"af3ce58\" 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-8f556be\" data-id=\"8f556be\" 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-93ab356 elementor-widget elementor-widget-text-editor\" data-id=\"93ab356\" 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<h4><strong>Sales orders management and a web relationship map<\/strong><\/h4>\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-59b6127 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"59b6127\" 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-c6a6c14\" data-id=\"c6a6c14\" 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-f1cc391 elementor-widget elementor-widget-heading\" data-id=\"f1cc391\" 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-611341f elementor-widget elementor-widget-text-editor\" data-id=\"611341f\" 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>Soo&#8230; Last week, I started developping a <strong>SAP Business One<\/strong> web client using javascript technologies, it was all fun and games until it started to really catch my attention \ud83e\udd14. So here I am, week two, adding new features to my application.<\/p><p><span style=\"text-align: start;\">For those of you who just stumbled into this article, you can as well read the\u00a0<\/span><a style=\"background-color: #ffffff; text-align: start;\" href=\"https:\/\/jonathanpapa.com\/blog\/2019\/10\/11\/sapb1-mssql-webclient\/\" target=\"_blank\" rel=\"noopener\">first article<\/a><span style=\"text-align: start;\">\u00a0which explains the origins of this project.<\/span><\/p><p><span style=\"text-align: start;\">Before we dig into this, here is a demo of what we will talk about.<\/span><\/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-7556119 elementor-aspect-ratio-169 elementor-widget elementor-widget-video\" data-id=\"7556119\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/plzmvwH8r6U&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;modestbranding&quot;:&quot;yes&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;,&quot;aspect_ratio&quot;:&quot;169&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-wrapper elementor-fit-aspect-ratio elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\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-02fd98a elementor-widget elementor-widget-text-editor\" data-id=\"02fd98a\" 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><strong>Spoiler alert<\/strong>: this update is focused on Sales Orders. This will be way shorter than the first article as I will simply talk about small features I added and what I&rsquo;m planning next.<\/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-1ae7228 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1ae7228\" 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-a639e42\" data-id=\"a639e42\" 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-eeef7ea elementor-widget elementor-widget-image\" data-id=\"eeef7ea\" 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<img width=\"699\" height=\"667\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/melastweek.png\" class=\"attachment-medium_large size-medium_large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/melastweek.png 699w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/melastweek-300x286.png 300w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/>\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-6f6662d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6f6662d\" 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-86ee98b\" data-id=\"86ee98b\" 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-d3af727 elementor-widget elementor-widget-heading\" data-id=\"d3af727\" 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\">Web relationship map<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-546d65d elementor-widget elementor-widget-text-editor\" data-id=\"546d65d\" 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 thing I use the most in SAP B1 is the <em><strong>relationship map<\/strong><\/em> as it helps getting a quick view of the relations one document may have with its predecessors\/successors.<\/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-2b5db7a elementor-widget elementor-widget-image\" data-id=\"2b5db7a\" 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\/10\/relationshipMap3.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"relationshipMap3\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzUyLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTBcL3JlbGF0aW9uc2hpcE1hcDMucG5nIn0%3D\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"559\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationshipMap3.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationshipMap3.png 816w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationshipMap3-300x207.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationshipMap3-768x529.png 768w\" 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\">SAP B1 Relationship map for Sales Order 327<\/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-9e8e062 elementor-widget elementor-widget-text-editor\" data-id=\"9e8e062\" 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>Business One is pretty basic in its document process, both sales and purchases are similar, so once you understand that, a quick look at the graph can save you a lot of time to understand the relations between several documents.<\/p><p>When I started building the Sales Orders module, I knew I&rsquo;d wanted this feature in it. Luckily for me, SapUI5 offers controls that made it possible and I was surprised to see that it was way easier to transpose than I thought.<\/p><p>Below is a screenshot of the same relationship map in the web client. I wanted to keep all the small visual indications you get with the fat-client relationship map, this includes:<\/p><ul><li>Document status (Green = closed, blue = opened)<\/li><li>Document Number<\/li><li>Document Date<\/li><li>Document Total<\/li><\/ul><p>I also added a notion of groups (one group per document type) to gather documents of the same kind.<\/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-2168b2a elementor-widget elementor-widget-image\" data-id=\"2168b2a\" 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\/10\/relationShipMap-mine.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"SAPUI5 Relationship map\" data-elementor-lightbox-description=\"A SAPUI5 version of the SAP B1 relationship map\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzUzLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTBcL3JlbGF0aW9uU2hpcE1hcC1taW5lLnBuZyJ9\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"413\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationShipMap-mine-1024x521.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationShipMap-mine-1024x521.png 1024w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationShipMap-mine-300x153.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationShipMap-mine-768x391.png 768w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/relationShipMap-mine.png 1565w\" 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 Web Client Relationship map for Sales Order 327<\/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-2df784a elementor-widget elementor-widget-text-editor\" data-id=\"2df784a\" 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>If you like to see it in action, you can check near the end of the video (at the beginning of 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\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-f607255 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f607255\" 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-34738e9\" data-id=\"34738e9\" 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-6f6ed55 elementor-widget elementor-widget-heading\" data-id=\"6f6ed55\" 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\">Searching orders<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8dfa63a elementor-widget elementor-widget-text-editor\" data-id=\"8dfa63a\" 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 implemented two ways of searching orders. A simple and easy search bar that will look into the basic header information of the orders (for the moment, DocNum, CardCode and CardName)&#8230;<\/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-20c6fbd elementor-widget elementor-widget-image\" data-id=\"20c6fbd\" 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\/10\/quickSearch.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"quickSearch\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mzc0LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTBcL3F1aWNrU2VhcmNoLnBuZyJ9\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"289\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/quickSearch-1024x364.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/quickSearch-1024x364.png 1024w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/quickSearch-300x107.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/quickSearch-768x273.png 768w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/quickSearch.png 1312w\" 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\">Quick search<\/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-8d8d00a elementor-widget elementor-widget-text-editor\" data-id=\"8d8d00a\" 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>&#8230; And a more advanced one where user can target specific fields. User can, for instance, look for one (or many) items, one (or many) business partners, filter by dates and document status. <span style=\"font-style: inherit; font-weight: inherit;\">I plan on adding more filtering capabilities but this is a starting point for future work.\u00a0<\/span><\/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-de9fda5 elementor-widget elementor-widget-image\" data-id=\"de9fda5\" 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\/10\/customFiltersV2.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"customFiltersV2\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6Mzc4LCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTBcL2N1c3RvbUZpbHRlcnNWMi5wbmcifQ%3D%3D\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"415\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/customFiltersV2-1024x523.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/customFiltersV2-1024x523.png 1024w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/customFiltersV2-300x153.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/customFiltersV2-768x392.png 768w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/customFiltersV2.png 1561w\" 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-bf19bab elementor-widget elementor-widget-text-editor\" data-id=\"bf19bab\" 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><span style=\"font-weight: bold; text-align: justify;\">Side note<\/span><span style=\"text-align: justify;\">: SapUI5 has a great component for filtering data but relies on OData which also provides metadata information of the returned fields. The Smart Filter Bar analyzes the metadata and builds the UI accordingly. You can read more about Smart Filter Bar <a href=\"https:\/\/sapui5.hana.ondemand.com\/#\/topic\/7bcdffc056a94731b4341db73251e32b\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/span><\/p><p><span style=\"text-align: justify;\">If you read about my previous article, this control is an example of what you have in SapUI5 but not in OpenUI5 <\/span>\ud83d\ude09<\/p><p>The reason why I haven&rsquo;t used it is because my API is not an OData Api but a simple json REST API<\/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-a1ae417 elementor-widget elementor-widget-text-editor\" data-id=\"a1ae417\" 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\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-55b12ca elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"55b12ca\" 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-303df60\" data-id=\"303df60\" 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-bd1d303 elementor-widget elementor-widget-heading\" data-id=\"bd1d303\" 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\">Displaying Orders<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fa0d72 elementor-widget elementor-widget-text-editor\" data-id=\"8fa0d72\" 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>Orders are displayed in a UI5 <strong>Responsive Table<\/strong>, using several color and icon indications:<\/p><ul><li>A blue ribbon indicates an open order which isn&rsquo;t due yet<\/li><li>A red ribbon indicates an open and due order (also noticeable with the sandglass icon)<\/li><li>No ribbon indicates that the order is closed (also noticeable with the lock icon)<\/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<div class=\"elementor-element elementor-element-f160a29 elementor-widget elementor-widget-image\" data-id=\"f160a29\" 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\/10\/closeUpSalesOrders.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"closeUpSalesOrders\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzcyLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTBcL2Nsb3NlVXBTYWxlc09yZGVycy5wbmcifQ%3D%3D\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"151\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/closeUpSalesOrders-1024x190.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/closeUpSalesOrders-1024x190.png 1024w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/closeUpSalesOrders-300x56.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/closeUpSalesOrders-768x142.png 768w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/closeUpSalesOrders.png 1062w\" 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-2582a1a elementor-widget elementor-widget-text-editor\" data-id=\"2582a1a\" 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, the orders are retrieved directly from an SQL connection and not from the Service Layer as it was previously done, leaving the Service Layer used \u00ab\u00a0only\u00a0\u00bb for Creation, Update and Deletion purpose.<\/p><p>An updated application hierarchy would be the following:<\/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-2a84bda elementor-widget elementor-widget-image\" data-id=\"2a84bda\" 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\/10\/hierarchyv2.png\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-title=\"hierarchyv2\" e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzgzLCJ1cmwiOiJodHRwczpcL1wvam9uYXRoYW5wYXBhLmNvbVwvYmxvZ1wvd3AtY29udGVudFwvdXBsb2Fkc1wvMjAxOVwvMTBcL2hpZXJhcmNoeXYyLnBuZyJ9\">\n\t\t\t\t\t\t\t<img width=\"812\" height=\"585\" src=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/hierarchyv2.png\" class=\"attachment-large size-large\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/hierarchyv2.png 914w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/hierarchyv2-300x216.png 300w, https:\/\/jonathanpapa.com\/blog\/wp-content\/uploads\/2019\/10\/hierarchyv2-768x554.png 768w\" 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\">An up-to-date hierarchy with the SQL connection between the API and the SQL Server<\/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-b6b6889 elementor-widget elementor-widget-text-editor\" data-id=\"b6b6889\" 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>Orders are fetched by chunk as user scrolls down in the page.<\/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-a14cc8f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a14cc8f\" 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-f5b8f0f\" data-id=\"f5b8f0f\" 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-a8234df elementor-widget elementor-widget-heading\" data-id=\"a8234df\" 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\">Next week<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19b8e8f elementor-widget elementor-widget-text-editor\" data-id=\"19b8e8f\" 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>You may have noticed that I didn&rsquo;t put any details when it comes to actually adding a new sales order in the system. I plan on working on that for next week.<\/p><p>One particularity with B1 is that it shares a same model across <strong>all<\/strong> the marketing documents. Technically, this means that the SQL tables behind sales orders share a same structure with the tables behind the purchase orders and the sales invoices etc&#8230;<\/p><p>This makes it pretty easy to develop tools that need to handle several (or all) kind of documents. Wait, isn&rsquo;t it what we&rsquo;re trying to build here?\u00a0\ud83d\ude1a<\/p><p>The way I see it, once the Sales Order module is stable, adapting it to the other documents shouldn&rsquo;t be too big of a deal\u00a0\ud83d\ude09 But that will probably be the topic of another article.<\/p><p>That&rsquo;s all for today, small update, but paving the way for bigger changes!\u00a0\u270c\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>Sales orders management and a web relationship map Introduction Soo&#8230; Last week, I started developping a SAP Business One web client using javascript technologies, it was all fun and games until it started to really catch my attention \ud83e\udd14. So here I am, week two, adding new features to my application. For those of you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":353,"comment_status":"closed","ping_status":"open","sticky":false,"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\/303"}],"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=303"}],"version-history":[{"count":10,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":478,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/posts\/303\/revisions\/478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/media\/353"}],"wp:attachment":[{"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jonathanpapa.com\/blog\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}