SAP Mobile App Development

Responsive SAPUI5 Login Page made easy

             Login page is the first entry point for most of the applications.It allows the user to enter the credentials and authorise himself to the application.In this tutorial we will create a simple responsive SAPUI5 Login page containing two input fields for username and password and one login button.

Pre-requisites

1. SAPUI5 framework.
2. sap.m library loaded.

Steps

  1. Create Application using SAP Web IDE or eclipse with a view and controller.If you dont know how to refer my previous tutorial.Application Using SAP Web IDE
  2. Inside the view add one Page.Under Page's content aggregation add one VBox control.Then inside VBox add two input boxes and one login button.To make the items in the center of VBox we make use of its properties.See below code.


  3. Inside controller write the function which will be called when login button is pressed.Here iam just using the message toast to display username and password.You can add the logic for authenticating the user against inside this method.


  4. Our Login page will look like this.
See Sample Code here.
Login Page XML view
Login Page JS view
If you enjoyed this post, I’d be grateful if you’d help it spread by sharing.Thank you! See you soon

5 comments :

  1. How to validate the username and password ?

    ReplyDelete
  2. When the enter key is pressed the login event has to trigger is it possible?

    ReplyDelete
    Replies
    1. Hi Shilpa,
      You can make use of submit event of input control for this
      Regards

      Delete
    2. Ya its working..
      Thankyou rajeesh :-)

      Delete

Powered by Blogger.