Developing Login Page In Microsoft PowerApps

Introduction

 

Before reading this article, please go through some important links given below.

• Quick Start on Microsoft PowerApps
• To Use Template
• To Use Blank App
• To Add Excel File
• To Use Sort And SortByColumn Functions
• To Use Filter, Search, And LookUp Functions
• To Add Contacts
• To Get User Details
• Developing Camera App
• Using Radio Button
• Developing Drawing App
• Using ListBox Control
• Adding Audio And Video Control
• Using Slider Control
• Import And Export Data In Microsoft PowerApps
• Using CheckBox Control
• Using Drop Down Control

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.

 

 

Step 2 Create a new app in PowerApps

 

After Login, we will see the Dashboard. There, click on the New button.

 

 

Step 3

 

Choose the Blank App.

 

 

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.

 

 

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.
    
    
2. Drop the Text Control on the screen and Change the Text Property as UserName.
    
    
3. Similarly, place another Text Control and Change the Text Property as Password
    

Design Text Input Box in the Login Page

1. Go to the Insert menu, then Text, and drag the Text Input Control.
    
    
2. Drop the Text Input Control on the screen.
    
    
3. Similarly, place another Text Input Control.
    
    
4. Rename the Second Text Input control to Password
    
    
5. Select the Password Text Input control and set the mode to Password
    

Design Button control in the Login Page

1. Go to the Insert Menu, then choose Button Control.
    
    
2. Drop the Button Control to the screen and change the name to Submit.
    
    
3. Rename the Control to Submit
    
    
4. Add Coding
    
   Select the Button Control and add the following coding.
    
   Coding
    
   If (Password.Text= "Hello" , Navigate(HomePage, ScreenTransition.Fade))
    
    
5. Place another Button Control.
    
    
6. Rename the control to Cancel
    
    
7. Add Coding
    
   Select the Cancel button and add Exit() to OnSelect Event.
    

Design Text Box control in the Login Page

1. Go to the Insert Menu, then choose Text, and drag the Text box Control.
    
    
2. Drop the Text box Control to the screen.
    
    
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")
    

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.
    
    
2. Rename the Screen to HomePage.
    
    
3. Place the Text Box.
    
   Go to the Insert and drag the Text box control.
    
    
4. Drop the Text box and add the text.
    

Step 7

 

Run the app

 

 

Output 1

 

Main Screen

 

 

Output 2

 

Enter the correct UserName and Password.

 

 

Output 3

 

Click on the Submit button.

 

 

Output 4

 

It will open the HomePage.

 

 

Output 5

 

If the password is wrong.

 

 

Conclusion

 

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