This is officially the long awaited (at least for me after 18 months) part III of the series that started with SAP EDI/IDoc Communication in CPI Using Bundling and Fewer Mapping Artifacts, and SAP EDI/IDoc Communication in CPI Using Bundling and Fewer Mapping Artifacts Part II which tackles the one problematic point for my approach that I knew going into it.  There is no UI for managing data in the Partner Directory, so I had to resort to Postman as my go to… 👎🏼  After several weeks of extreme focus (to my wife’s dismay, but she is happy now that I am done), I have created a freestyle UI5 application to handle nearly every maintenance parameter that is required at runtime.  The extreme focus that was necessary is because I’m an ABAPer, JAVAer, CPIer, XSLTer, but have very little experience dabbling in UI5, and when I did it was years ago.  I even went as far as providing translations for Spanish, French and German.  I used Google Translate so some translation, punctuation, capitalization (by me), along with some contextual references could be inaccurate… e.g. do I translate “Carriage Return” literally or it’s called something else in other languages?

I shall try to recount how the fun of the last three weeks unfolded in somewhat painful detail, but with the intent for a laugh or two.  I didn’t even write a single line of code before the pain began because my development space in BAS is titled “MyDevSpaceV3″… that one can simmer on its own.

My first task was to get some basic data to display on the screen, so I had to begin by ingesting the breadth of the SAP UI5 Demo Kit.  Is there an easier way to understand each of the controls or objects short of actually ingesting printed documentation… maybe can I do the Neo thing Matrix style?  After a fair bit of reading about property, element, list, composite, and expression bindings, with not as much understanding I was ready to begin.  I wanted to use the declarative XML views as much as possible, but the first hurdle came quick because of how the Partner Directory stores data, and I wanted to make the application configurable for the self view.  It is not possible to use dynamic binding syntax (two key fields) for an OData model, so I had to bind the elements at runtime with good ole JavaScript.  I needed to review bindings once again to understand the syntax necessary and after a little experimentation and luck I was able to get information to display.  During the review period there was a fair amount of confusion because I start seeing things like ContextBinding and BindingContext (there are other questionable abstractions and inconsistencies).  Is it supposed to be 🪄 that I would understand the difference solely because the word order is reversed?

Give a little fist pump 💪🏼 and move to to trying to update some data by making use of the two way binding.  During the first task I noticed errors in the console about issues with “false” and “true” being assigned to the status property of a switch instead of the proper boolean… enter expression binding (briefly) to the rescue.  What I missed in a comment in the documentation that should’ve been in bold print, but was not, is that expression binding automatically forces one way binding.  If you see the UI that’s not going to work since nearly half the fields are switches.  Supposedly this works with property binding, but I was not able to get it working, and after some searching I found an option with composite binding… a StringyBoolean was born.  It took a little experimentation but I was able to get it to function as expected so the OData model would reflect pending changes when the UI was updated! 💪🏼

Here we go, ready to submit that update to the back end… not so fast because the first major issue rears its head.  I can read data, why can I not update the data?  This period lasted a good 36-48 hours (mostly a blur and a LOT of cursing), but I made head way when I finally decided to try a different browser.  I’m a long time Firefox user, but I needed Chrome for this task.  What was the culprit?  Every OData model instantiated with the manifest automatically has metadata retrieve with a URL parameter appended – ?sap-language=XX.  OK, but why is that a problem?  The issue is because the Partner Directory API only returns a partial metadata document with that URL parameter supplied, which I confirmed with Postman, and that is a major issue with using OData models in UI5.  Can I use another language?  Nope, I tried several languages and all of them failed to provide the full document.  What else can I do?  Move the model instantiation out of the component manifest and into each of the controllers as necessary.  Problem solved (for now, since the metadata problems book ended the major issues) 💪🏼

How about creating some data that does not already exist… sounds like the perfect situation for a dialog.  Let’s see if a I can generate a dialog from a fragment, so now I have to learn about promises.  Javascript promises, promises, and then I get a dialog (JavaScripters will get it)… it wasn’t this easy but after wrestling with the promises I got it to work. 💪🏼

Data can be read, updated and created, ready to finish this thing right?  Nope, still a LONG way to go because this is where I learn more about certain JavaScript nuances.  Did I get a reference or a value, and how do I know?  Certain screen elements cannot be directly bound to OData entities because they are sub-elements of base64 encoded entities.  Enter the JSON model to handle a group of screen elements, but how do I handle the cancel button and make sure changed elements are reverted.  Thank god for JSON.parse(JSON.stringify(myObject)), so that any failure or cancel can be properly reverted.  An honorable mention for removing array entries using delete too because seriously… why would anyone EVER be interested in an empty or undefined element?  This middle period (second major issue) was where I also had a solid two day impasse where my models stopped updating on the back-end because of some refactoring I had done along the way.  It led to my first ever question on the SAP forums (in 15 years), but I closed it after solving it on my own. 💪🏼

By this point I was nearing the end and while I had the most complicated view remaining it was a lot of repetitive action for things I had already achieved in other views.  I will add a shout out for recursion here because I added some special logic where dependent fields are disabled when their parent fields are disabled.  I did encounter one puzzling question with the OData model however… if I have an input field with constraints and I call resetChanges(), then why does it not automatically revert those input fields in error?  It took a while to find it but was I able to handle that with UpdateBindings(true). 💪🏼

I have finally reached the point where I think I’m ready to deploy it to our cloud, so I can test the functionality out with our development tenant, or have I?  I thought it would take longer than it did to deploy, but that was not the difficult part.  The next problem was major issue #3, and it was a return to big bad metadata.  I deployed the application with the managed application router but it continuously returned a 404 error for the GET metadata request.  Well, as I previously noted you cannot do anything with an OData model without the metadata, and the other issue here is I cannot see what the application router is actually doing.  A little time spent Google/SAP forum searching and debugging and I asked myself the question… is this because the models are not generated in the manifest?  Created a sample application bound to the same service and guess what… no 404!  Thanks SAP… I think I’m owed a weeks 💵  Prior to confirming the issue I submitted a support incident with SAP but closed it this morning.  I had a handful of promises, reference/value issues to work out this morning, and the last few weeks have been filled with promises, callbacks, .bind(this)…?? am I this or that, but finally I am here, and it feels good! 💪🏼

When I wake up in night terrors in the weeks, months, years to come it won’t be on account of 🧟‍♀️or 🧛🏼‍♀️, but rather “?sap-language=en”!  That aside and some fun for JavaScript… am I an object, a string, a value, a promise… what am I?  Don’t know how anyone works with weakly typed languages on a daily basis effectively!!

For the folks that work in UI5 all day long (I applaud you and feel sorry for you at the same time), this may be an average application, but it’s a step outside of my normal comfort area and a bigger accomplishment.  So I’ll share a few screenshots that show the main layouts of the application, from which the features should be fairly obvious.  I won’t say much here… I’ll let the screenshots do the talking because that’s how art works 👌🏼

Home (Self) Screen

Message Detail for 850 & 810

Partner List Screen with Filter Search

Partner Detail Screen including Agreements

The following items are missing but will eventually be added

• Addition, update & deletion of maps and associated content
• Haven’t checked, but although MDN URL can be input when the asynchronous mode is selected, I don’t believe the necessary handling is provided in the CPI artifacts
• I need to test the application in conjunction with the CPI components

1. Download the content from the Github link provided below
2. Edit /webapp/model/config.json at /self/pid to provide the ID for your entity in the Partner Directory
3. Edit /xs-security.json for any role information you wish to provide
4. Edit /xs-app.json for the first two routes to include the BTP destination which points to your Partner Directory API host address in SAP Integration Suite

It was more fun in the beginning when I didn’t know what I was signing up for, but I’m glad that it is finished (at least mostly).  I encourage folks to comment, like, and ask any questions, and even try it out because it can be downloaded from Github with the link provided below.  Cheers!

https://github.com/ryanc35/X12EDIinCPI