Skip to Content

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:

/wp-content/uploads/2015/01/fork_plunk_618479.png

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

Explored Button example

/wp-content/uploads/2015/01/explored_button_618430.png

Go to show code:

/wp-content/uploads/2015/01/explored_show_code_618480.png

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

/wp-content/uploads/2015/01/explored_copy_view_618481.png

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

/wp-content/uploads/2015/01/plunker_replace_controller_618482.png

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

/wp-content/uploads/2015/01/explored_copy_controller_618483.png

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

/wp-content/uploads/2015/01/plunker_replace_controller_controller_618484.png

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

/wp-content/uploads/2015/01/plunker_run_618485.png

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:

/wp-content/uploads/2015/01/plunker_download_zip_618486.png

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:

/wp-content/uploads/2015/01/web_ide_file_new_folder_618487.png

/wp-content/uploads/2015/01/web_ide_folder_name_618488.png

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

/wp-content/uploads/2015/01/web_ide_import_archive_618489.png

/wp-content/uploads/2015/01/webide_browse_import_618490.png

Select the index.html file and choose Run:

/wp-content/uploads/2015/01/web_ide_run_618491.png

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

/wp-content/uploads/2015/01/webide_preview_618492.png



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:

/wp-content/uploads/2015/01/web_ide_file_new_folder_618487.png



Choose “SAPUI5 application project”

/wp-content/uploads/2015/01/web_ide_template_618495.png


Enter the name for the project:

/wp-content/uploads/2015/01/web_ide_project_name_618494.png

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

/wp-content/uploads/2015/01/web_ide_view_name_618496.png


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

/wp-content/uploads/2015/01/web_ide_replace_main_pfeil_618497.png



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


/wp-content/uploads/2015/01/namespace_618498.png



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.


To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

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

    (0) 
  2. 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!

    (0) 
  3. 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>
       <mvc:View
      controllerName=local.controller
      xmlns:mvc=sap.ui.core.mvc
      xmlns=sap.m>
       <App>
       <Page

    cheers

    (0) 
  4. 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”

    (0) 

Leave a Reply