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 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:
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.
- SAP Web IDE infos
- OpenUI5 info page with guides
- OpenUI5 on github
- SAPUI5 info page
- SAPUI5 explored app
- Plunker example MVC with data binding
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.
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!
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 ...
Thanks and great example.
Why Plunker ? - why not Github ? 😕
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.
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"
Thanks Denise, great overview! I always found JSbin difficult to debug, this makes it much easier.
Thank you Denise, great blog!
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!