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!!

13 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
  6. Thanks, foг ones marvelous posting! I genuinely enjoyed reading it, you miggһt Ƅe a great author. I wiⅼl made certain to booҝmark your blog and ѡill often come back sometime soon. I want to encoᥙrage yourself to continue your great job, have a nice evening!
    Web Development Course
    best web development courses
    web development classes
    web development course near me
    Web Development Training
    training on web development
    web development training program
    web development training course
    web development summer training

    ReplyDelete
  7. That is, the client can choose what all messages and which senders' messages can be gotten to in semi-login. hotmail login

    ReplyDelete

Powered by Blogger.