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

Fiddler configuration

First of all , we have to configure the browser with the default “localhost:8000” proxy started by Fiddler.

ProxyChrome.JPG

  • 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

FiddlerDefineRule1.JPG

FiddlerDefineRule2.JPG

FiddlerRule.JPG

  • AutoResponder

Alternately we can also configure an “AutoResponder” for a single resource in a more easy way without creating a custom Javascript Rule;

selecting the resource on the left, we can manually define the “AutoResponder” rule for a single resource (right panel)


RequestRule.JPG

RequestRule1.JPG

Example

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


FiddlerCapture1.JPG

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:

RequestRule2.JPG

Once configured the Proxy and verified that Fiddler is capturing the traffic, we can execute again the Demokit Shopping Cart

https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/index.html?responderOn=true

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

NewRelease.JPG

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!

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Andreas Kunz

    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).

    (0) 

Leave a Reply