After Istak explained how to get started with SAUI5, I immediately downloaded SAPUI5 beta toolkit from SDN and read his article further to see how can I do what he had shown on his blog entry. However, I was dumbstruck when I read rest of his “how-to” instructions. He suggested using Visual Studio for running the demo apps delivered by SAP. Clueless I was voraciously searching for any information that can show me how to integrate the SAPUI5 HTML toolkit into NWDS. Well, I am a portal consultant and NWDS is the default place I could have thought of. No other options.
I did not find any documentation on how to enable HTML5 user documentation that I can view in NWDS and start working on SAPUI5 UI components. I also wanted to run the demo components but no respite. I spent couple of hours researching and trying every possible option. Finally using brute force I managed to get thorough can run all the demo applications and also view the HTML5 user documentation so that I can develop my own components. This post details out how you too can integrate SAPUI5 into NWDS.
Let’s get started.
I recommend using NWDS 7.3 though I haven’t tried this in any other NWDS versions but it is safer to use latest version.
1. Create a new project of type “Portal Application Project”
2. After creating the project, your folder structure will look something like this
3. Download SAPUI5 HTML beta toolkit from SDN using following URL –
4. After download is completed, you will have a file named – HTML5Beta_complete.zip. Make sure you have following contents inside this ZIP file
5. Rename demokit.war to demokit.zip. Following contents are available inside demokit.zip. User documentation for HTML5 is delivered in this file and can be executed by running index.html.
6. Select all and copy the contents. Now open NWDS Portal Project and paste the content into project. Now unzip the file sapui5-static.zip to find following contents
7. This file contains first demo application that can be executed by running index.html. It is just an information file that explains where sap-core-ui.js file is located in the directory and how can you reuse the code in your future applications. Nothing to get excited about.
8. Select all and copy the contents. Now open NWDS Portal Project and paste the content into project
9. After copying the content from both the files, your project should look something like this
I have renamed the index.html file to doc.html (html file in the demokit file) so that no naming conflicts occur
10. Right click on doc.html and open with web browser
You are all set! SAPUI HTML 5 developer documentations is available now and you can explore further UI elements and applications.
You can also create addition html files to test the functionality provided in Developer Center Tutorials. Copy paste the html code provided in these documents and run the files. I have copied the code from “How to create and run simple HTML5 app in 20 seconds”. Following is the screenshot of the demo application.
The button should fade upon clicking.
Note: If you are directly copy pasting the code from tutorial then you will have to modify the code to call JS file form the correct location. Open the html file in HTML editor and replace the JS URL with resource/sap-ui-core.js. Following is the screenshot.
That’s all about integrating SAPUI5 HTML toolkit in NWDS. Read the developer documentations and get started with your SAPUI5 development. I am yet to explore what all UI elements are available but I am sure it will be fun working on SAPUI5. What do you think?