Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 


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

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 '+'


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 :smile: . 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.

2 Comments
koehntopp
Product and Topic Expert
Product and Topic Expert
0 Kudos

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

0 Kudos

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