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. <App>
     <Page title="Login Form">
      <content>
       <VBox fitContainer="true" justifyContent="Center" alignItems="Center" alignContent="Center">
        <items>
         <Input id="uid" placeholder="User ID"></Input>
         <Input id="pasw" placeholder="Password" type="Password"></Input>
         <Button width="12rem" text="Login" type="Emphasized" press="onLoginTap"></Button>
        </items>
       </VBox>
      </content>
      <footer >
       <Bar>
        <contentleft>
         <Text text="techippo"></Text>
        </contentLeft>
        <contentright>
         <Text text="myLogin"></Text>
        </contentRight>
       </Bar>
      </footer>
     </Page>
    </App>
    

  4. 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.


  5. Our Login page will look like this.
See Sample Code here.
Login Page XML view
Login Page JS view
If you enjoyed this post, Please Share!!

11 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
  3. Hi, how do you use the /ui2/cl_sra_login class to validate and pass username and pass via https?

    ReplyDelete
    Replies
    1. Hi Ravendfj,
      This question is out of scope because this post is not about customizing fiori login screen.
      May be you can change the property 'script_included' of ‘INIT_DEFAULT_PROPERTIES‘ method in the ‘/UI2/CL_SRA_LOGIN‘ class to achieve this.this scn blog may be helpful.
      I am not sure about this because i havent done it before...
      Regards

      Delete
  4. how to make it user for authentication? for example: how to authenticate user whose username and password gets matched which are stored in json file?

    ReplyDelete
    Replies
    1. You can check the username and password values and json values with javascript code.

      Delete
  5. how to clear values in login form after submit

    ReplyDelete
    Replies
    1. After submit we can use Sap.m.Input controls SetValue method. like '.setValue("");'

      Delete

Powered by Blogger.