Using SAPUI5 with JSFiddle

JSFiddle has been my weapon of choice for over last few years, whether it is to try a quick concept or to share the solution within distributed team. Tool allows you to quickly mock small snippets of code and share with others. When I started working with SAPUI5, I realized that there is no SAPUI5 preset library option in the default list. This was disappointing, considering, they have options for lesser heard libraries. I didn’t accepted this and began exploring ways to add SAPUI5 in the online IDE. Finally I was able to do this and you can see the work here http://jsfiddle.net/9D5hk/1/

Now let me explain how you can achieve the same feat. It is a three step process

1. Add the script src

Before you add the script src, you need to have a permanent hosting place from where you can safely assume that the library will be loaded. Almost all open source libraries and some proprietary ones provides a CDN location to load their scripts. You can grab the links from the blog post by Mauricio here CDN for UI5 library. And if you are in real hurry, here is the link https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

2. Add the class in body tag

You may want to add the ‘sapUiBody‘ class in the body tag, to do this, click on the “Fiddle Options” in the left menu and add the body tag with class name. See the screenshot below

Thats it and you are ready to code, yes I lied when I said three steps, it is actually two 🙂 . Third being you have to write the code.

The only downside you have so far is that if you are used to supplying attributes to the script tag like “data-sap-ui-theme=’sap_goldreflection'”, you would need to pass them in URL wherever possible. Other than that you are good to write your own snippets and share with the world again.