SAP UI 5 aka Open UI 5 application development with Visual Studio

Solutions Architect

June 25, 2014

Rate this article

Views

1421

Although SAP suggests Eclipse to develop SAP UI 5 aka Open UI 5 applications, you can develop your SAP UI 5 applications in Visual Studio or any other environment that supports JavaScript development as it is a pure JavaScript library.

In this article we can see how to start developing application with SAP UI 5 in Visual Studio 2013.

Steps for SAP UI 5 integration

1. Navigate to http://sap.github.io/openui5/

2. Under the download section select “UI5 Runtime”

3. Extract the downloaded zip file

4. Create a new Asp.Net Web Application

5. Copy “resources” folder from the extracted files and paste it into the visual studio project (right click the project in Solution Explorer and select “Paste” )

6. Add a new html file to the project

7. Place the below code in the html file

 <!DOCTYPE html>
	 <html xmlns="http://www.w3.org/1999/xhtml">
	 <head>
	     <title></title>
	     <script id="sap-ui-bootstrap"
	  src="resources/sap-ui-core.js"
	  data-sap-ui-theme="sap_bluecrystal"
	  data-sap-ui-libs="sap.ui.commons"></script>
	     <script>
	         var btn = new sap.ui.commons.Button({
	             text: 'Click Here !!!',
	             press: function () {
	                 alert("Hello from Visual Studio !!!")
	             }
	         });
	         btn.placeAt('content');
	     </script>
	 </head>
	 <body class='sapUiBody'>
	     <div style="margin:100px;">
	         <div id='content'></div>
	     </div>
	 </body>
	 </html>

8. Press F5 to run the application

9. If you are able to view the below message box on the button click, then it means that you have developed your first Open UI 5 application. Enjoy!!! 🙂

Category : Tips