Developing Login Page In Microsoft PowerApps

Introduction

 
Before reading this article, please go through some important links given below.
In PowerApps, we can develop Login Page using TextBox, Text Input, Button, and Screen Controls.
 
Login Page
 
A login, logging in, or logging on, is the entering of identifier information into a system by a user, in order to access that system (e.g., a computer or a website or an app).
 
A login generally requires the user to enter two pieces of information, a username, and a password. This information is entered into a Login Page.
 
A username is also referred to as an account name. A password differs from a username. It is intended to be kept a secret.
 
Here, we will learn how to create a simple login page in Microsoft PowerApps. In this login page, I have used text boxes, buttons, and text input tools for the design part. Coding on each of the tools can be written separately as per user choice and functionality.
 
Follow the below steps to work with DropDown in PowerApps.
 
Step 1 Log in to PowerApps
 
After downloading the PowerApps from Windows Store, here, we need a Microsoft related organization’s Office 365 ID or (MSDN, Microsoft, Skype, Office 365, etc.,), to login with it.
 
PowerApps
 
Step 2 Create a new app in PowerApps
 
After Login, we will see the Dashboard. There, click on the New button.
 
PowerApps
 
Step 3
 
Choose the Blank App.
 
PowerApps
 
Step 4 Design the app
 
Now, let's start designing the app. On the left side, we can see the individual screens for adding our data. On the right side, we see the list of Layouts. At the top, we see the formula bar. There, you see the Properties of the screen that you select. On the right side, we see the Add Data Source add the External Data Source.
 
PowerApps
 
Step 5 Designing the Login Page
 
Design Text Box in the Login Page.
  1. Go to the Insert menu, then Controls, and drag the Text Control.
     
    PowerApps
     
  2. Drop the Text Control on the screen and Change the Text Property as UserName.
     
    PowerApps
     
  3. Similarly, place another Text Control and Change the Text Property as Password
     
    PowerApps
Design Text Input Box in the Login Page
  1. Go to the Insert menu, then Text, and drag the Text Input Control.
     
    PowerApps
     
  2. Drop the Text Input Control on the screen.
     
    PowerApps
     
  3. Similarly, place another Text Input Control.
     
    PowerApps
     
  4. Rename the Second Text Input control to Password
     
    PowerApps
     
  5. Select the Password Text Input control and set the mode to Password
     
    PowerApps
Design Button control in the Login Page
  1. Go to the Insert Menu, then choose Button Control.
     
    PowerApps
     
  2. Drop the Button Control to the screen and change the name to Submit.
     
    PowerApps
     
  3. Rename the Control to Submit
     
    PowerApps
     
  4. Add Coding
     
    Select the Button Control and add the following coding.
     
    Coding
     
    If (Password.Text= "Hello" , Navigate(HomePage, ScreenTransition.Fade))
     
    PowerApps
     
  5. Place another Button Control.
     
    PowerApps
     
  6. Rename the control to Cancel
     
    PowerApps
     
  7. Add Coding
     
    Select the Cancel button and add Exit() to OnSelect Event.
     
    PowerApps
Design Text Box control in the Login Page
  1. Go to the Insert Menu, then choose Text, and drag the Text box Control.
     
    PowerApps
     
  2. Drop the Text box Control to the screen.
     
    PowerApps
     
  3. Add Coding
     
    Select the Text box Control and add the following coding.
     
    Coding
     
    If(Password.Text = "Hello", "Your Password is Correct", "Please Enter Correct Password")
     
    PowerApps
Step 6 Designing the Home Page(Next Page)
 
If the Username and Password are correct, the Home Page will open
 
Create a new Screen
  1. Go to the Insert menu and click on the New Screen.
     
    PowerApps
     
  2. Rename the Screen to HomePage.
     
    PowerApps
     
  3. Place the Text Box.
     
    Go to the Insert and drag the Text box control.
     
    PowerApps
     
  4. Drop the Text box and add the text.
     
    PowerApps
Step 7
 
Run the app
 
PowerApps
 
Output 1
 
Main Screen
 
PowerApps
 
Output 2
 
Enter the correct UserName and Password.
 
PowerApps
 
Output 3
 
Click on the Submit button.
 
PowerApps
 
Output 4
 
It will open the HomePage.
 
PowerApps
 
Output 5
 
If the password is wrong.
 
PowerApps
 

Conclusion

 
I hope you understood how to develop the Login Page in Microsoft PowerApps and how to run it.