Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

Simple UI5 application on SAP Web IDE

$
0
0

Hello Friend,


I'm writing this blog post to share my experience on a specific development task on SAP Web IDE. If anybody wants to learn SAP UI5 through Online they can use SAP Web IDE.


Step 1:  Open the SAP WEB IDE URL (SAP Web IDE URL) and login into the your SCN credentials.

0.JPG

Step  2:   Create New project( File- New -  Click on “Project from Template”

3.JPG

Step 3:Select the application under “Template Selection” depending upon the requirement either FIORI, UI5, Smart Template application.

4.JPG

Select the applications under the drop-down as per below screen shot.
5.JPG

So I am selecting “SAP UI5 Application” as per below screen.

Step 4: Search the SAP UI5 under “Search” we will knows the which version we are using this application

6.JPG

Step 5: Select “SAP UI5” application Click on “Next” Button and give the Project Name.

7.JPG

Step 6: Select “View Type” and Change the View Name as per the requirement under “Initial View Details” View Type like XML, Java Script, JSON and HTML

8.JPG

Click on Next and Finish.

9.JPG

10.JPG

Step 7: After creating the application. If you’re not able to see application in left hand side. Then go to View---- Click on “Reset to Default”. Then able to see the applications


Step 8: Created simple form using “JS”. I wrote the in “Simple.View.JS”, “Style.css” and “i18n.properties".

                         Simple.View.JS------ create Simple Form

                         Style.CSS -------------UI Alignment

                         i18n.properties ---------------All Label Name are available under this properties file.


Simple.View.JS

11.JPG

Style.CSS

12.JPG

i18n.properties

13.JPG

Step 9: We have two ways to check the output

           Right click on “Application Name” ---- Run------Run As -------click on “Web Application”.


14.JPG

Output

14.1.JPG

If you want deploy the application ether UI5 ABAP repository, HANA Cloud platform and SAP FIORI Launchpad. Refer below screen shot.

15.JPG


Hope this is help full,


Thank you for reading this blog and let me know in case of any issues.


Regard

Vijay Kalluri



Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>