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

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.

 

clip_image001

 

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

 

clip_image002

 

 

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

 

clip_image003

 

 

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

 

clip_image005

 

Write the code for heading as below:

 

clip_image006

Execute the application and see the output:

clip_image008

 

 

 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.

clip_image010

 

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:

clip_image012

 

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

 

Let us also construct a footer for the screen.

clip_image013

 

 

Execute the application and Output appears as:

 

clip_image015

 

 

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:

clip_image016

Execute the application and output appears as below:

clip_image018

 

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

clip_image020

 

Execute the application and output appears as:

clip_image022

 

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

 

 

About Arun

7 Comments:

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

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

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

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

    ReplyDelete
  5. Better to reduce the Button size

    ReplyDelete
  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

    ReplyDelete

Powered by Blogger.