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
Login Page JS view
Pre-requisites
1. SAPUI5 framework.
2. sap.m library loaded.
Steps
- 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
- 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.
- 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.
- Our Login page will look like this.
<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>
Login Page JS view
If you enjoyed this post, Please Share!!
How to validate the username and password ?
ReplyDeleteWhat validations?like this?
DeleteWhen the enter key is pressed the login event has to trigger is it possible?
ReplyDeleteHi Shilpa,
DeleteYou can make use of submit event of input control for this
Regards
Ya its working..
DeleteThankyou rajeesh :-)
Hi, how do you use the /ui2/cl_sra_login class to validate and pass username and pass via https?
ReplyDeleteHi Ravendfj,
DeleteThis 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
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?
ReplyDeleteYou can check the username and password values and json values with javascript code.
Deletehow to clear values in login form after submit
ReplyDeleteAfter submit we can use Sap.m.Input controls SetValue method. like '.setValue("");'
Delete