Skip to Content
Author's profile photo Denise Nepraunig

Quickly tinker around with SAPUI5 examples

So you want to quickly tinker around with all those cool examples from the SAPUI5 explored app, but you don’t want to set up a local IDE or create all those files manually. You want to try out all those MVC examples with the XML views online, but you don’t want to fiddle around in JSBin with this awkward string concatenation. You want a real MVC example! Sample data would also be great so that you can practice data binding.

If that is what you want – I’ve got a solution for you!

I was searching for an online JavaScript playground which supports multiple files, because SAPUI5 is a MVC framework. One solution is Plunker and also stumbled about Alexander Graebe’s blog post where he describes different JavaScript playgrounds. With Plunker you can create and share your SAPUI5 examples and also download them as ZIP files. With the SAP Web IDE you can also try out things quickly, because it is a web-based IDE.

I highlight here some things you have to be aware of when using the explored examples which apply to Plunker and the SAP Web IDE.

In the explored app you can download the examples as zip files, but you need some glue code to run those views – for those mobile examples this would be an app and a page. A best practice would be to use a Component.js set up – but let’s not complicate things at the beginning! I’ve prepared a Plunker MVC example where you can replace the code of the main View and Controller, you just need to correct the name of the Controller.

Plunker Button example

Let’s walk through this steps with the button example from the explored app. Here is the Plunker with a data binding example loaded from an JSON file:

Plunker MVC example table with json data

For this plunk I’ve used the Table Columns example from the explored app, I just corrected the names of the controller (which I’ll describe in the following example), saved the products.json from the explored-app and put the model-creation and binding code into the index.html.

Open the Plunk and fork it so that you have your own copy:


Then go to the explored app, look for the Button example and open the sample:

Explored Button example


Go to show code:


Select the Page.view.xml code and copy it:


Go to your plunk, open the view/Main.view.xml, paste the code and adjust the Controller name to “view.Main”:


From the explored app copy the Page.Controller.js code:


In the Plunk open view/Main.controller.js, replace the code and adjust the name of the Controller to “view.Main”:


And we are done!!! Choose “Run” to see your sample in action! Easy isn’t it?


Now you can play around with the Button samples, for example change the type of the buttons or the icons.

You can downloaded the zip file you can easily import it into the Web IDE:


SAP Web IDE import Plunker Button example ZIP

In the SAP Web IDE import choose the Local folder, right click it and create a new folder:



Select the folder, right click it and import the downloaded zip file:



Select the index.html file and choose Run:


A new tab opens and displays the result. Don’t close this tab! Whenever you change the source code, just choose Refresh in this preview window (not the browser refresh):


SAP Web IDE Button example from scratch

If you want to do the same example from scratch with the Web IDE, just use the handy “Project from Template” wizard and just replace and adjust the View and Controller code.

First select the Local folder and create a new project with the wizard:


Choose “SAPUI5 application project”


Enter the name for the project:


Leave the settings with “Mobile” and “XML” but change the view name to Main:


After that you are finished and now you can continue to change the code as described above:


Using snippets in your existing projects

When you are just using snippets and not the whole example, be aware to correct namespaces – otherwise your code will break!

Here you see that the snippet uses xmlns:l=”sap.ui.layout” but in my example I have xmlns:sap.ui.layout=sap.ui.layout -> so you need to replace the “l” with “sap.ui.layout”.


DJ Adams’s Fiori like exercises as plunk

So enough with this simple one page apps you think? What about a full fledged app with a Master-Detail pattern? I created DJ Adams’s “Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises” example as a plunk so that you can play around with that. Thanks DJ for your great work!!!

Fiori-like app by DJ Adams plunk


I hope you can now more easily play around with the SAPUI5 library and that I could lower the entry hurdle. Shared source code with Plunker is a great way to learn SAPUI5 and I will for sure create lots of plunks this year and add those plunks in this blog post. Also if you have problems with SAPUI5 source code it is a great way to share your code.

Assigned Tags

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

      Nice, Denise.  I am looking forward to trying this out in the next few days.  I'm writing a couple of articles on using Web IDE with HCP Mobile Services -- maybe I can put this to work.

      Author's profile photo DJ Adams
      DJ Adams

      Nice work Denise! Not only did you highlight the multi-file Plunker, you also show folks how to embrace it and get going with more than Hello World. Good stuff!

      Author's profile photo DJ Adams
      DJ Adams

      Wanted to add something about your comment about "awkward string concatenation" (presumably referring to the example where you create an XML string in the JSBin example to which you linked.

      You may already know but some readers might not, but there is a solution for when one does want to write a single file example UI5 app.

      Here's an example from my sapui5bin "SinglePageExmples" section: sapui5bin/PayrollControlCenterMockup.html at master · qmacro/sapui5bin · GitHub in which you can see how the XML View is defined - within a custom script tag. Here's a short exerpt from it, showing the start ...

         <!-- XML-based view definition -->
        <script id="view1" type="sapui5/xmlview">


      Author's profile photo Former Member
      Former Member

      Thanks and great example.

      Author's profile photo Rolf Hoven
      Rolf Hoven

      Why Plunker ?  - why not Github ?   😕

      Author's profile photo Denise Nepraunig
      Denise Nepraunig
      Blog Post Author

      Because you want to execute AND modify the code directly in your browser and play around with the examples - I don't want to host static Github pages with the examples. All the source code from SAPUI5 is as OpenUI5 already on Github.

      But anyways, I've uploaded the Plunker-Example now to Github.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      Truly wonderful blog, and remarkably well written!

      I must admit, JSBin has served me well -- using DJ's notation for XMLViews, so not as a concatenated string variable -- but the multi file/folder capability of Plunker seems way more versatile, and I am now a proud convert; to quote Ashton Kutcher, "I've been Plunk'd"

      Author's profile photo Jason Moors
      Jason Moors

      Thanks Denise, great overview! I always found JSbin difficult to debug, this makes it much easier.

      Author's profile photo Eduardo Junior
      Eduardo Junior

      Thank you Denise, great blog!

      Author's profile photo Fabio Pagoti
      Fabio Pagoti

      Looks like Plunker will have to pay more commission to Denise Nepraunig . I've just registered to it and loved it. I was missing multiple files on JSBin.

      Thanks for the great hint Denise!