Developing Login Page In Microsoft PowerApps

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, button, 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 into 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. In the left side, we can see the individual screens for adding our data. In 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. In the right side, we see the Add Data Source to 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 is 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.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now