Skip to Content
Author's profile photo Rahul Choudhary

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

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

You can now goto Create a new fiddle – JSFiddle, and click on the “Resources” tab in the left menu. Add the CDN link and press ‘+’

Screen Shot 2014-07-29 at 6.00.29 AM.png

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

Screen Shot 2014-07-29 at 6.07.52 AM.png

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Frank Koehntopp
      Frank Koehntopp

      This is NICE! Is there  a way to add a mock database as well in JSFiddle?

      Author's profile photo Rahul Choudhary
      Rahul Choudhary
      Blog Post Author

      Thanks Frank! As far as I know, you should be able to use all web sql commands. That should be possible, however I haven't tried that yet myself.

      Here is the sample I found on web Web SQL Example - JSFiddle. This worked on my Chrome (Mac) but didn't worked on Safari (Mac).