Switch #openui5 version on-the-fly without changing the code – Web Debugging Proxy
Sometimes it could be useful switching on-the-fly the #sapui5 or #openui5 release of an existent deployed App.
This could be useful for testing purposes, console debugging or checking some issues related to a specific release for a specific UI5 object.
Multi version availability
We know that we have a multi version availability of sapui5 / openui5 and we can use a specific version thanks to the SAP CDN.
SCN Blog by Peter Muessig : Multi-Version availability of SAPUI5
OpenUI5 Tumblr: http://openui5.tumblr.com/post/125924070522/use-a-specific-version-of-openui5-from-our-cdn
Moreover we can find all the available openui5 releases (both Stable and Preview) here: https://openui5.hana.ondemand.com/versionoverview.html
Using Telerik Fiddler in combination with the available SAP CDN multi version we can switch the release on-the-fly without deploying a new version just to change the <head>
What is Fiddler
Fiddler ( http://www.telerik.com/fiddler ) is a free web debugging proxy which logs all HTTP(s) traffic between your computer and the Internet.
We can use it to debug traffic from virtually any application that supports a proxy like Chrome, Safari, Firefox, IE or Mobile Devices
There are great resources on SCN about Fiddler (How to install it,how to configure it and so on..), follow the links:
http://scn.sap.com/community/developer-center/front-end/blog/2014/11/02/monitor-http-traffic-of-sapui5-application-on-mobile-device by Maarten Follon
http://wiki.scn.sap.com/wiki/display/SAPMOB/How+to+Capture+Fiori+Client+Mobile+Device+Traffic+using+Fiddler by Kevin Bates
First of all , we have to configure the browser with the default “localhost:8000” proxy started by Fiddler.
- Create a custom rule
With Fiddler we can create custom rules to make changes to web requests and responses on the fly . In addition we can install the Fiddler Script Editor add-on that help us to edit script rules.
This is the Telerik Fiddler documentation: http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrResponse
We have to edit the JS file CustomRules.js
selecting the resource on the left, we can manually define the “AutoResponder” rule for a single resource (right panel)
For example,at the time of writing, the Shopping Cart Demo App https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/index.html?responderOn=true uses the openui5 core 1.30.10 in https://openui5.hana.ondemand.com/resources/sap-ui-core.js
As we can see, writing sap.ui.version on the console we can check that the UI5 version 1.30.10
Now we want to run the same app with the newer version 1.32.0 changing the sap-ui-core.js script on the fly using a Fiddler “AutoResponder”;
we want to run the app with ui5 version 1.32.0, so every request for the resource https://openui5.hana.ondemand.com/resources/sap-ui-core.js will be forwarded by the web proxy to the url https://openui5.hana.ondemand.com/1.32.0/resources/sap-ui-core.js
This is the rule we defined for the AutoResponder:
Once configured the Proxy and verified that Fiddler is capturing the traffic, we can execute again the Demokit Shopping Cart
The Fiddler rule worked! we can check that each request to https://openui5.hana.ondemand.com/resources/sap-ui-core.js responds with the 1.32.0 sap-ui-core.js version.
The openui5 version from the console is now 1.32.0
We can use the same mechanism for other purposes, for example:
- switching to another ODATA url
- switching to a local json url endpoint
and so on…
Happy Web-Proxy debugging!
Thanks for this blog!
I'd like to mention, that there is also a built-in functionality to load UI5 from a different server (in the Ctrl-Alt-Shift-P/S support popups). While Fiddler is more powerful, the built-in feature might be easier to use because you don't have to set up anything.
I planned to blog about it, and maybe I should hurry up now, so both ways are documented (both have their pros and cons and their use-cases).
thank you Andreas,
I didn't know the built-in functionality!
I have to explore the control+alt+shift+S tool more in detail...
I just published my description of the functionality I mentioned above:
How to change the UI5 version used in an app, without changing code, without additional tools