Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com

A Simple Login form using XML View

In this tutorial, we are going to see how to create a Simple Application using XML View.


Step 1:  Create an Application project as shown below:


File à New à Project :  Choose Application project from SAP UI5 development application.




Click on Next. Enter the Name for Application project. Choose Mobile library and Click on next.





Enter the Name for the View, Choose the type of View as XML view and Click on Finish.





Step 2: Open the XML file created for the view in the text editor and write the following code.




Write the code for heading as below:



Execute the application and see the output:




 Now let us construct the form for Username and Password. To construct a form, I am going to add a library sap.ui.commons.forms  to the xml page.



Explanation: I have included the sap.ui.commons.form library in the XML view and created a XML Namespace for that library as form. To access the elements from the sap.ui.commons.form library I use the namespace “form” that I have created for it and create a Simple Form HTML tags Input , and button.


Execute the application and output appears as below:



Note: We will do the formatting option later in this tutorial.


Let us also construct a footer for the screen.




Execute the application and Output appears as:





Now we have constructed our login screen let’s do the formatting option. I wanted all of the Elements to be appear in an individual column and that too on center. So I am going to split the form into 3 columns and place the controls in the second column so that the controls appear in the middle of the page.


Change the XML coding as below:


Execute the application and output appears as below:



To bring it to the center of the page, Reduce the width of the form. Change the width of the form as below:



Execute the application and output appears as:



I Hope you find these tutorials helpful for learning. Please leave your feedback in comments section.



About Arun


  1. Very nice article to start with SAP UI5.. I feel better after doing this. cheers!

  2. Very good article....nice...Thanks a lot...

  3. I need the source, my sample don't running correct.

  4. nice article.I used VBox in place of simpleForm

  5. Better to reduce the Button size

  6. It is the login for our email, adwords, adsense, shopping account just as utilized as a username for outsider administrations like Paypal, and so forth On the off chance that for reasons unknown the Gmail account has been undermined, at that point all different records are additionally in danger. hotmail sign in

  7. Merely a smiling visitant here to share the love (:, btw outstanding style. voom login

  8. All your hard work is much appreciated. Nobody can stop to admire you. Lots of appreciation. website

  9. Wonderful blog! I found it while surfing around on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Appreciate it. 토토커뮤니티

  10. Merely a smiling visitant here to share the love (:, btw outstanding style. test bank nursing


Powered by Blogger.