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

5 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

Powered by Blogger.