Develop Hello world SAPUI5 application in SAP WebIDE

4
6388

[adsenseyu2]

Hello everyone, in this SAP Web IDE tutorials, we will explain you on How to develop Hello World SAPUI5 application in SAP WebIDE.

Prerequisites

You should have access to the SAP HANA Cloud version of SAP Web IDE. Please click here to get your free developer account for SAP Web IDE.

Step-by-Step Procedure

1. Log on to your SAP Web IDE.

SAP WebIDE
SAP WebIDE

2. Navigate to File → New → Project from Template to create SAPUI5 application.

Create a SAPUI5 Project from Template
Create a SAPUI5 Project from Template

3. There are many template available in SAP WebIDE. Go head and click on each template to know more about each and every template. After that select SAPUI5 Application Project template and hit Next.

SAPUI5 Application Project
SAPUI5 Application Project

4. In the next screen enter project name and hit Next.

SAPUI5 Project Information
SAPUI5 Project Information

5. In the template customization step, choose View Type as “XML”, enter Namespace and hit Next.

SAPUI5 Project Customization
SAPUI5 Project Customization

6. In the Confirmation step click on Finish.

SAPUI5 Project Confirmation
SAPUI5 Project Confirmation

7. A new SAPUI5 project will be created.Expand the project to see the different components of the project.

SAPUI5 Project
SAPUI5 Project

8. Lets see what are those different components.

  • Under “view” folder we have View1 and its controller.If you want to create a new view you should be creating under this folder only.
  • Under “helloworld” folder, we have 3 files. index.html is the root file of the whole project.We are going to access any application by calling this index.html file only. neo-app.json and .project.json are the supporting files for the project at this point they are not important to discuss.

[adsenseyu1]

9. Lets see the output of our SAPUI5 application at this moment. Select index.html and hit Run.

Run SAPUI5 Project
Run SAPUI5 Project

10. A new Application Preview window will open and you should see below output. As we have created one view in the project.

SAPUI5 Application Preview
SAPUI5 Application Preview

11. Lets go back to WebIDE, add below changes to the application

  • Add a button to the View1.
  • Implement “onPress” event of the button and call a simple Hello World message.
  • Change the title of the View1.

12. Double click on the “View1.xml”. A view editor will be open beside to the project explorer. Adjust the existing code by adding button to the view.

<core:View xmlns:core="sap.ui.core" 
	xmlns:mvc="sap.ui.core.mvc" 
	xmlns="sap.m" controllerName="saplearners.com.view.View1" 
	xmlns:html="http://www.w3.org/1999/xhtml">
	<Page title="SAPU5 Hello world application">
		<content>
			<Button xmlns="sap.m"
				id="id"
				text="Press me.!"
				type="Default"
				width=""
				enabled="true"
				icon=""
				iconFirst="true"
				activeIcon=""
				iconDensityAware="true"
				textDirection="Inherit"
				tap=""
				press="onPress">
					<tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
					<dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
					
			</Button>
		</content>
	</Page>
</core:View>

13. Now double click on the “View1.controller.js” to add the code for handling “onPress” event of the button. There are 4 default hook methods available in any controller. onInit( ), onBeforeRendering( ), onAfterRendering( ) and onExit( ) at this point we are not going to discuss those, just add the below code to the controller.

	onPress: function(){
		// onPress event handler method of the button 
		jQuery.sap.require("sap.m.MessageBox");
		sap.m.MessageBox.alert("Hello World");
	}

14. Save the all changes to the project and select index.html file and hit Run. You should see the below output of the application.

2- SAPUI5 Application Preview

15. Hit on the button, you should see a Hello World message like below.

3- SAPUI5 Application Preview

 

Congrats, you have successfully created your Hello world SAPUI5 application in SAP WebIDE.

Please stay tuned to us for more SAP WebIDE tutorials.Please feel free to comment and let us know your feedback. You feedback will keep us alive.

like-128

  • San

    Thank you very much for your detailed tutorials on Netweaver Gateway, It really helped me to understand “Association and Navigation” concept.

    Can you pls provide one detailed SAPUI5 tutorial with SAP WebIDE, example with all three CRUD operations with multiple views.

    Thank you in advance.

    Cheers..
    San

    • AdminSAPLearners

      Hello San,
      Thank you for your comments. Please share if you like it.. !

      We will soon create those tutorials. Stay tuned.

      Thanks,
      Admin

      • San

        Thank you can you can you pls share an example with your ODATA services.

      • Thanks SAPLearners.