Hello everyone, in this SAP Web IDE tutorials, we will explain you on How to develop Hello World SAPUI5 application in SAP WebIDE.
1.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.
2.Step-by-Step Procedure
1. Log on to your SAP Web IDE.
2. Navigate to File → New → Project from Template to create SAPUI5 application.
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.
4. In the next screen enter project name and hit Next.
5. In the template customization step, choose View Type as “XML”, enter Namespace and hit Next.
6. In the Confirm-确认事务的一种行为方式，如采购为使材料能够准确满足生产需求，必须confirm厂商的交期.ation step click on Finish.
7. A new SAPUI5 project will be created.Expand the project to see the different components of the 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.
9. Lets see the output of our SAPUI5 application at this moment. Select index.html and hit Run.
10. A new Application Preview window will open and you should see below output. As we have created one view in the project.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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.
|
1 2 3 4 5 |
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.
15. Hit on the button, you should see a Hello World message like below.
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.
