How to build a Power Platform Canvas App which uses Dataverse for authentication
Published Mar 03 2023 12:00 AM 10.7K Views
Iron Contributor

My name is Rachel Irabor, I am a Microsoft Learn Student Ambassadors and Power Platform developer. I love writing blog posts to document my learning. 

 

In this blog post, I will show you how to create a table in Microsoft Dataverse and a Sign in screen in Canvas Power Apps using the table in Microsoft Dataverse as a data store for username and password/ Throughout the sign-in screen, we will work on making the screen user-friendly. This blog will guide you through how to build a sign-in screen in Microsoft Power Apps using Microsoft Dataverse.

 

The Step by step process

Step 1: 

Sign into your Microsoft Power Apps Account

At the left-hand side of the screen, click on the hamburger icon, then click on Table

 

Dataverse table 2.PNG

 

Step 2: 

It is possible to use an already existing table in Dataverse that relates to your data.  Here we will be creating a new table in Dataverse. 

Click on + New Table.

Next, click on New Table

Display name is User.

Click on Enable attachments (including notes and files) 

Click on Save

 

New table 2.PNG

 

user table.PNG

 

 

Step 3:

Add the Email Address column to the table. 

  • Scroll down and click on +
  • Display name is Email Address
  • Change the format from Text to Email
  • Click on Save

 

Plus sign.PNG

 

email2.PNG

 

Step 4:

Add the Password column to the table. 

  • Scroll down and click on +
  • Display name is Password
  • Click on Save

 

password3.PNG

 

 

Note: You can add more columns to the table, like the user's information (Name, gender, address), but for the sign-in screen, we will only be using the email address and password from the table. 

 

 

Step 5:

The User table has a primary key column available, but it is related to the GUID Field. To create the User Id column will be using the data type, Autonumber.

  • Click on +
  • Display name is User ID
  • Change the Data type from Single line of text to Autonumber
  • Scroll down and change it to your prefered Prefix autonumber type. Here, we will be using the String prefix number
  • The Prefix to User
  • It is optional to change the minimum number of digits. For this, we will be using 4
  • Change the Seed value from 1000 to 1110 (this is optional)
  • Click on Save

After clicking on Save, I had an error message because the table's GUID column uses the same schema name. To solve this, click on the Advanced options and change the Schema name from userid to registereduserid.

Click on Save

 

Autonumber data type.PNG

 

column 3.PNG

 

save column.PNG

 

Step 6:

Create the Sign-in Screen

  • Click on Home
  • Next, click on Blank app
  • On Blank canvas, click on Create
  • Write the App name; for me I used Sign in App
  • The format is Phone
  • Click on Create
  • Next, Click on Skip 

Homescreen 1.PNG

 

Blank canvas app.PNG

 

Canvas app from blank.PNG

 

Power apps studio.PNG

 

Step 7:

Click on Insert

Search for Image, Add the image control to the App

image control.PNG

 

image control 1.PNG

 

Step 8:

Expand the height and weight of the Image control 

Width: 60 

Height: 479

When adding the image to the image control, there is an option of adding the from your image file in your desktop/laptop. 

To add an image to the control. For this we are going to be adding the Image link address to the image property 

 

The image address link

https://th.bing.com/th/id/OIP.ia8JivgTpd9AzXUNaf3hVgHaDD?pid=ImgDet&rs=1

 

Add this to the image property of the image control

"https://th.bing.com/th/id/OIP.ia8JivgTpd9AzXUNaf3hVgHaDD?pid=ImgDet&rs=1"

 

Width and Height.PNG

 

image property.PNG

 

Image control 3.PNG

 

 

Step 9: 

Add text input control to the screen

Click on Insert

Next click on Text input

Copy the Text input control and paste it

To paste it Ctrl + P

Make sure they are both in the same line (check the images here to understand better)

Rename Text input 3 to Email address

Rename Text input 3_1 to Password

 

textinput control.PNG

 

text input.PNG

 

controls.PNG

 

controls 1.PNG

 

Step 10:

Click on Email address at the left hand side of the screen

  • At the right hand side of the screen delete Text input from the Default
  • The Hint text write Email Address
  • Scroll down the page and change the border property from blue to black
  • Change the HoverFill property of Email address

            Self.Fill

  • Change the HoverBorderColor property of Email Address

                       RGBA(0,0,0,1)

 

email address.PNG

 

border.PNG

 

black color.PNG

 

Hoverfill.PNG

 

Hoverbordercontrol.PNG

 

 

Step 11:

Click on Password at the left hand side of the screen

  • At the right hand side of the screen delete Text input from the Default
  • The Hint text write Password
  • Change the Mode from Single line text to Password
  • Scroll down the page and change the border property from blue to black

 

  • Change the HoverFill property of Email address

            Self.Fill

 

  • Change the HoverBorderColor property of Email Address

                       RGBA(0,0,0,1)

 

password.PNG

 

Password1.PNG

 

Password2.PNG

 

Self.Fill.PNG

 

hoverbordercolor.PNG

 

 

Step 12:

Click on Insert 

Click on Button

Change the text property of the button control from Button to Sign in 

Change the Fill property of the button control

      RGBA(49,49,168,1)

 

Change the HoverFill property of the button control

   Self.Fill

 

Change the FontWeight property of the button control to 

         FontWeight.Bold

 

 

Button1.PNG

 

textproperty.PNG

 

fill property.PNG

 

 

I changed the Fill property from blue. I felt it was not too visible and easy for my eyes. 

Let me know what you think, with me changing the background colour of the button to Pink

 

pink button.PNG

 

Step 13:

Add the data source to the App

  • Click on the data icon 
  • Click on Add data
  • Click on Tables
  • Search the name of your table
  • Click on the name of your table 
  • The  table has been added to your app

 

Pink property.PNG

 

table 3.PNG

 

User table 1.PNG

 

User table 2.PNG

 

added table.PNG

 

 

Step 14:

Add a new screen to the app. The reason for this is that, when the sign in button is clicked on and the email address and password is correct, it should navigate the user to the home screen/next screen.

 

  • Click on New Screen
  • Click on Blank

 

new screen.PNG

 

blank screen.PNG

 

new screen 1.PNG

 

 

Step 15:

For this to work Change the Text input; Email address to Emailaddress to make it

easier for us to use it in the formula.

I had issue with using the name Password for my text input control. Please change this to textinput1

 

On the OnSelect property of the button control copy and paste this:

 

Set(CurrentSignedInUser,LookUp('User Tables', 'Email Address' = Emailaddress.Text, 'User ID'));

If(
IsBlankOrError(
LookUp(
'User Tables',
'Email Address' = Emailaddress.Text And Password = Textinput1.Text,
'Email Address'
)
),
Set(
DisplayErrorMessage, true
),

Navigate(
'Screen2',
ScreenTransition.Fade
)
)

; Reset(Emailaddress)
;Reset(Textinput1)

 

 

 

Sign in Button.PNG

 

 

In Step 15 

I noticed that my the reference to my User table, the column in my table were not coming up like Email Address and Password. I went back to the Table in Dataverse and noticed I had another table in Dataverse with the same name. I changed my table name from User to User Table and re-added the data source/table to the App. Hopefully you did not have the same issue that I did 

 

 

Step 16: 

Copy and paste the button control  

Change the OnSelect property to this;

 

Set(
DisplayErrorMessage, false

)

 

 

Change the Visible Property to

       DisplayErrorMessage

 

Change the Text property to Try Again

 

 

Try again button.PNG

 

Try again variable.PNG

 

 

Try again 1.PNG

 

 

Step 17:

Add label control to the screen

  • Change the text property of the label control to Incorrect Password
  • Change the colour of the font from black to red and align the text to centre
  • Change the Visible property of the label control to the variable:

                DisplayErrorMessage

 

label control.PNG

 

 

text label.PNG

 

align.PNG

 

color.PNG

 

color changed.PNG

 

Always remember to save your App. 

Click on Ctrl + S

 

 

Learn more on Microsoft Power Apps & Dataverse

Overview of creating apps in Power Apps

Get started with Power Apps canvas apps

What is Microsoft Dataverse? - Power Apps

Introduction to Dataverse - Training

 

 

 

 

 

 

 

Version history
Last update:
‎Feb 22 2023 04:11 PM
Updated by: