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.

Table of contents:

• Plunker Button example
• Import Plunker Button example ZIP into SAP Web IDE
• Create the example in the SAP Web IDE from Scratch
• Things to be aware of when using snippets
• >> DJ Adams's Fiori like exercise <<
  
• Summary and useful links

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

Summary

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.

Useful links

• SAP Web IDE infos
• OpenUI5 info page with guides
• OpenUI5 on github
• SAPUI5 info page
• SAPUI5 explored app
• Plunker example MVC with data binding