How to build a Power Platform Canvas App which uses Dataverse for authentication

RachelIrabor · ‎Mar 03 2023

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

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

Step 4:

Add the Password column to the table.

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

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

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

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

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)

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)

Self.Fill.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

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

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;