That day started as usual. I got a requirement to extend C4C UIs (both HTML client and Fiori client aka Responsive UI - as mentioned in recent release information we're moving to this new 🙂 name for RUI). The extension should be something done with SAPUI5/OpenUI5. In other words, it should include custom (preferably, SAPUI5's) control into C4C. And it should talk to C4C as well.
A common request, isn't it? But my first thought was: "Well, C4C UI is not flexible enough. But, anyway, let's see". At that point in time, I had no idea how to proceed or even to start with this requirement. Then I recall what I've learned during openSAP courses "Extending SAP Products with SAP HANA Cloud Platform" (week 5) and "Extending SAP S/4HANA with SAP HANA Cloud Platform" on how to extend cloud solutions from SAP. The general approach described there is to build new app in WebIDE using oData services provided by a cloud solution, deploy this app in SAP Cloud Platform and use it. I would call it loosely coupling (for those who is familiar with Embedded Components in C4C). However, this approach wouldn't satisfy my requirement. Because it would trigger updates to an object via oData service. I needed something different. I needed to update an object directly, staying on the same C4C screen and not navigating anywhere. I'd like to reuse the same standard (or custom) screens built in C4C, but perform some nice and easy extensions to it. Something which can be tightly coupled into C4C UIs.
One of my conversations on a time picker's issue happening at the same time with SAP support gave me a starting point and an idea. The issue there was that time picker's dropdown in C4C in Fiori client (for example, for "start time" field in any activity) has been always defaulted to midnight as the starting point for dropdown list box without any respect what a user already entered in the field. I reported this as an issue because it was annoying for customer's salespeople doing a lot of activities' and visits' rescheduling on the go. In HTML5 the time dropdown was always defaulted to the entered value and that was handy. SAP Support replied that the issue is because in HTML5 SAP uses sap.ui.commons and in Fiori client it uses sap.m.ComboBox controls. By the way, the issue was successfully resolved in release 1705.
That statement about the difference of controls used gave me an idea to look into some tools available out there. Certainly, all along the journey Developer Tools was my first starting point. I used to Google Chrome Developer Tools. Some great tips I learned from jerry.wang and his blog Chrome Development Tool tips used in my daily work.
But there are some different nice ones which might be helpful for you, dear C4C reader, as well.
First of all, I recalled purely C4Cs owned tool called Client Inspector. You can access it when you add an additional parameter to your tenant's URL. Parameter is: debugMode=true.
For example,
https://myXXXXXX.crm.ondemand.com/sap/public/ap/ui/repository/SAP_UI/HTML5/client.html?debugMode=tru...
for HTML5 UI. The Same parameter can be applied to Fiori client URL.
Let's see what we will have there. You will not notice any difference in HTML5 UI except when you press Ctrl+mouse left click on any field. This will load Client Inspector popup.
Client Inspector currently consists of following tools/tabs:
If you launch Fiori Client with the same debuMode parameter, you will be able to access the Client Inspector tool with the same magic keystroke: ctrl+mouse left click. Additionally, you'll notice green button "Monitoring" at the top (don't be afraid of basic colors, it's Theme Builder result).
Here you can start or stop (if previously started) recording of UI5 Leaks. And show them after the recording is stopped. I personally didn't find any use cases for this tool. But this green button will indicate that you're in debug mode in Fiori client.
Closing Client Inspector's topic I'd note the following:
- despite the fact it can be resized or moved around, I'm personally missing "minimize" option for the whole Client Inspector window;
- when you ctrl+click any next field, it will instantiate the new Client Inspector. It means if you didn't close the previous instance of Client Inspector, you will get a next Client Inspector window. Sometimes might be confusing.
So far so good. But, since HTML5 UI and Fiori client have been built using SAPUI5, what about SAPUI5 dedicated tools?
Moving forward and recalling something I've learned from the great book "SAPUI5. The Comprehensive Guide" I tried to call "SAPUI5 Technical information" with keystroke Alt+Shift+Ctrl+P. And obviously, I got some results. Left is from HTML5 UI and right is from Fiori client.
Notice that in HTML5 UI "SAPUI5 version" is not available. I believe that's because sap-ui-version.json is simply not found on C4C server. You can see 404 error for it in Developer tools console.
But still "Core version" is in place. And it's 1.44 for 1705 release. It was 1.38 for 1702. So the release is the latest right now. And one more difference is: resources for HTML5 UI are loaded from C4C server and for Fiori client they are loaded from sapui5.hana.ondemand.com. This difference would be good to know if your network team set up some proxy rules. They will need to allow connection to sapui5.hana.ondemand.com server. The symptom is: Fiori client is hanging and you can observe a pending request to sapui5.hana.ondemand.com in Network tab in Developer tools.
For me, it was useful to turn on "Use Debug Sources" here for my further journey. This will load "uncompressed" versions and allow an overview of javascript code. But expect that the performance of the UI will be slower due to these uncompressed sources.
The last useful tool I'd like to mention in this part of my journey is "SAPUI5 Diagnostics" which can be accessed using keystroke Alt+Shift+Ctrl+S both in HTML5 UI and Fiori client.
This tool is quite powerful. And it has collapse/"minimize" option 😉
In Technical Information section we can observe same information as in "SAPUI5 Technical Information" mentioned above. Debug sources can be toggled on here as well.
I will not describe "SAPUI5 Diagnostics" tool completely here. You can freely explore all other possibilities of this powerful tool or take a look at help description of it.
I just want to focus on Control Tree section in "SAPUI5 Diagnostics".
You can find current control in the tree by pressing Ctrl+Shift+Alt+Left mouse click on the field (don't forget to switch off debugMode parameter, otherwise you'll get Client Inspector 😉 ). The field will be briefly highlighted in green in your C4C screen. And in "SAPUI5 Diagnostics" you'll get cursor positioned on corresponding control. It works opposite way as well: walk through the control tree and corresponding control will be highlighted in green as well.
There you can observe and even modify different properties of the control. "Binding Infos" tab will provide you the information about different bindings used and their properties. Similar to "Control Tree" in Client Inspector as described above. But for me "SAPUI5 Diagnostics" is faster and more convenient in this particular case.
Someone may say: "Hey, all that were only the preparation steps. Where is the actual journey?"
The actual journey will be described in my upcoming posts. The journey itself was very interesting. Something I spotted on the way was "as expected", but also I've seen many interesting and unexpected things. Stay tuned.
Continue reading: SAPUI5 and C4C. My (un)expected journey. Part 1.
A common request, isn't it? But my first thought was: "Well, C4C UI is not flexible enough. But, anyway, let's see". At that point in time, I had no idea how to proceed or even to start with this requirement. Then I recall what I've learned during openSAP courses "Extending SAP Products with SAP HANA Cloud Platform" (week 5) and "Extending SAP S/4HANA with SAP HANA Cloud Platform" on how to extend cloud solutions from SAP. The general approach described there is to build new app in WebIDE using oData services provided by a cloud solution, deploy this app in SAP Cloud Platform and use it. I would call it loosely coupling (for those who is familiar with Embedded Components in C4C). However, this approach wouldn't satisfy my requirement. Because it would trigger updates to an object via oData service. I needed something different. I needed to update an object directly, staying on the same C4C screen and not navigating anywhere. I'd like to reuse the same standard (or custom) screens built in C4C, but perform some nice and easy extensions to it. Something which can be tightly coupled into C4C UIs.
Disclaimer: In this blog post (and in other follow-up posts) I will describe my own journey. I can imagine (and now I knew it for sure) that's the same can be done easier than I've learned it. However, I would like to share my tips with the community and hope that someone will find them useful to follow or use in his own exciting journey.
One of my conversations on a time picker's issue happening at the same time with SAP support gave me a starting point and an idea. The issue there was that time picker's dropdown in C4C in Fiori client (for example, for "start time" field in any activity) has been always defaulted to midnight as the starting point for dropdown list box without any respect what a user already entered in the field. I reported this as an issue because it was annoying for customer's salespeople doing a lot of activities' and visits' rescheduling on the go. In HTML5 the time dropdown was always defaulted to the entered value and that was handy. SAP Support replied that the issue is because in HTML5 SAP uses sap.ui.commons and in Fiori client it uses sap.m.ComboBox controls. By the way, the issue was successfully resolved in release 1705.
That statement about the difference of controls used gave me an idea to look into some tools available out there. Certainly, all along the journey Developer Tools was my first starting point. I used to Google Chrome Developer Tools. Some great tips I learned from jerry.wang and his blog Chrome Development Tool tips used in my daily work.
But there are some different nice ones which might be helpful for you, dear C4C reader, as well.
First of all, I recalled purely C4Cs owned tool called Client Inspector. You can access it when you add an additional parameter to your tenant's URL. Parameter is: debugMode=true.
Disclaimer # 2: This is still an experimental feature and it may or may not become an official tool. Who knows. Use on own risk.
For example,
https://myXXXXXX.crm.ondemand.com/sap/public/ap/ui/repository/SAP_UI/HTML5/client.html?debugMode=tru...
for HTML5 UI. The Same parameter can be applied to Fiori client URL.
Let's see what we will have there. You will not notice any difference in HTML5 UI except when you press Ctrl+mouse left click on any field. This will load Client Inspector popup.
Client Inspector currently consists of following tools/tabs:
- Control Tree.
This tool will give you an idea where the clicked field resides in control tree, what it has as a binding expression (this is pretty handy when you'd like to know where the field's value originates from), what is the type of the field. Much similar to well known CRM on-premise popup accessed with F2 button in WebUI.
It also has "Get CTs" link (meaning: "Get Change Transactions") which will provide you a list of all CTs which have this field in. Good for troubleshooting and root cause analysis. - Control Model XML.
This is simply the control's XML used to represent the field. It was quite useful for me if clicked on AdvancedListPane control or other complex controls. It will show you which Stable Anchors it has and all controls involved in this complex control along with their attributes.
- Component Model XML.
Component Model XML will require some time to be collected. Be patient. It will bring complete XML model for the whole component you're currently in. You can copy this XML to external editor for further analysis. This "Copy..." button at the top is also slow. Chrome might even suggest to kill the page. Be patient again. Honestly, I never was. So I always copied it pointing the cursor at the very beginning of the XML (before "<UXComponent...."), scroll down to the end of it and use shift+mouse left click to select the complete XML source. It is also slow, but it worked for me.
- Data Model.
This tab represents current data container for the controller. With all pathes, types of fields, formatted and row value ( the last one is interesting and shows even UI rules you've created previously). One thing here is - make the Client Inspector window bigger or use bigger monitor/resolution. There are more on the right end of the screen, but there is no horizontal scrollbar available. For example, you can spot "Recalculate" and "Reset" buttons there. They are useful if you want to play around and model the behavior of the UI.
- Mocking Data.
Plenty of options available there to mockup different things: ComponentModel, DataContainer, Selected ViewModel Control, Settings, ThingType metadata and even Current Data Responses. Never used it. But looks very powerful. If anyone has an idea or previous experience how to use this tool - you're welcome to comment.
- UI Changes.
This tool is similar to the Layout Change History available in Administrator work centre. You can jump to any change transaction made to the current component.
- Round-Trip Analyzer.
It provides you an overview of all affected events in current component. With possible proposed solutions to reduce the number of roundtrips and increase (I believe) performance. The explanation text there is clear.
If you launch Fiori Client with the same debuMode parameter, you will be able to access the Client Inspector tool with the same magic keystroke: ctrl+mouse left click. Additionally, you'll notice green button "Monitoring" at the top (don't be afraid of basic colors, it's Theme Builder result).
Here you can start or stop (if previously started) recording of UI5 Leaks. And show them after the recording is stopped. I personally didn't find any use cases for this tool. But this green button will indicate that you're in debug mode in Fiori client.
Closing Client Inspector's topic I'd note the following:
- despite the fact it can be resized or moved around, I'm personally missing "minimize" option for the whole Client Inspector window;
- when you ctrl+click any next field, it will instantiate the new Client Inspector. It means if you didn't close the previous instance of Client Inspector, you will get a next Client Inspector window. Sometimes might be confusing.
So far so good. But, since HTML5 UI and Fiori client have been built using SAPUI5, what about SAPUI5 dedicated tools?
Moving forward and recalling something I've learned from the great book "SAPUI5. The Comprehensive Guide" I tried to call "SAPUI5 Technical information" with keystroke Alt+Shift+Ctrl+P. And obviously, I got some results. Left is from HTML5 UI and right is from Fiori client.
Notice that in HTML5 UI "SAPUI5 version" is not available. I believe that's because sap-ui-version.json is simply not found on C4C server. You can see 404 error for it in Developer tools console.
But still "Core version" is in place. And it's 1.44 for 1705 release. It was 1.38 for 1702. So the release is the latest right now. And one more difference is: resources for HTML5 UI are loaded from C4C server and for Fiori client they are loaded from sapui5.hana.ondemand.com. This difference would be good to know if your network team set up some proxy rules. They will need to allow connection to sapui5.hana.ondemand.com server. The symptom is: Fiori client is hanging and you can observe a pending request to sapui5.hana.ondemand.com in Network tab in Developer tools.
For me, it was useful to turn on "Use Debug Sources" here for my further journey. This will load "uncompressed" versions and allow an overview of javascript code. But expect that the performance of the UI will be slower due to these uncompressed sources.
The last useful tool I'd like to mention in this part of my journey is "SAPUI5 Diagnostics" which can be accessed using keystroke Alt+Shift+Ctrl+S both in HTML5 UI and Fiori client.
This tool is quite powerful. And it has collapse/"minimize" option 😉
In Technical Information section we can observe same information as in "SAPUI5 Technical Information" mentioned above. Debug sources can be toggled on here as well.
I will not describe "SAPUI5 Diagnostics" tool completely here. You can freely explore all other possibilities of this powerful tool or take a look at help description of it.
I just want to focus on Control Tree section in "SAPUI5 Diagnostics".
You can find current control in the tree by pressing Ctrl+Shift+Alt+Left mouse click on the field (don't forget to switch off debugMode parameter, otherwise you'll get Client Inspector 😉 ). The field will be briefly highlighted in green in your C4C screen. And in "SAPUI5 Diagnostics" you'll get cursor positioned on corresponding control. It works opposite way as well: walk through the control tree and corresponding control will be highlighted in green as well.
There you can observe and even modify different properties of the control. "Binding Infos" tab will provide you the information about different bindings used and their properties. Similar to "Control Tree" in Client Inspector as described above. But for me "SAPUI5 Diagnostics" is faster and more convenient in this particular case.
Someone may say: "Hey, all that were only the preparation steps. Where is the actual journey?"
The actual journey will be described in my upcoming posts. The journey itself was very interesting. Something I spotted on the way was "as expected", but also I've seen many interesting and unexpected things. Stay tuned.
Continue reading: SAPUI5 and C4C. My (un)expected journey. Part 1.
- SAP Managed Tags:
6 Comments
