Create PowerApps Login Form with Role Based Screen Navigation using SharePoint List as Source

welcome back to channel everyone in this video I'm going to talk about how you can create this kind of login form in power apps this is based on a user rule as well so if I put username enter the password I can view this password as well I can click on login it will redirect me to a specific screen and it will be based on what rule I have been assigned I have a user credential list where I have used name password and Rule so whatever rule user have it will redirect user to that particular screen so if I take another user go back here put the username and the password login this time it take me to the home screen so that way based on your role it will redirect you to that particular screen and also if you you put incorrect username and password click on login it will give you a notifications incorrect username password as well as it will highlight a eror message here as well and once you click back to your input control the error message will be gone from here let's just talk about how we can create this kind of login form I'll go in my power apps add a blank screen in the background image I will select to one image that I've already uploaded you can uh upload your media from here and I will set uh image positions to fill that will fill to entire screen go back to my screen insert a container here and I will set the background color as white width is 500 height I will set to 600 x positions I will set 450 y I will set to maybe 80 and drop shadow extra bold border radius I'm going to set 10 okay this looks good so what we're going to do now is inside this container I will insert to text input box that is text input two and text input 3 okay and I'll change the property of these text field as well width I'm going to set 450 height will be 60 before that for this container itself one thing I'm going to set the left and right padding I'm going to set to 20 that way way and then I will adjust this text box okay and for the text input three as well width again 450 height again 60 and the EXP position is 25 so I will set this to 25 okay okay and just create a gap little bit this looks good now inside the container insert a text label that is for the header okay and text will be login form font size will will be 24 font weight will be bold text align Center that's it and now we're going to insert one more text label that is for the error message okay and the error message we're going to set is incorrect username and password exclamation ask your admin to change it or anything you want to write okay we have this font size will be 11 and uh I'm going to set the text color of this one to dark red maybe this darker okay looks good now insert uh a button to submit the username and password that will be like this okay and text will be login you can uh say anything uh that's correct the form design part is okay okay there is two more thing that we have to add some icon so will be first icon will be add user then another will be View and the third one will be maybe a lock icon okay we have all three first one I will insert uh into the password part height will be 60 width will be 25 and x positions will be 28 okay and same goes for the US one as well height will be 60 width will be 25 x positions will be 28 looks okay and uh we don't have the view icon yet so I'll go view icon that is here again height will be 60 width will be 25 and x positions could be 450 okay now so it will be like 440 let look okay and for the text input you can see the text is overlapping so for that what we can say padding left I will set 35 same goes for this one set it to 3 35 now looks okay and for these text input remove the default value and hint value say enter your username here same goes for password remove the default add the hint text enter your password here that's all so this part is done and so next thing what we're going to do is first we going to on a login we're going to write some formula here so I will set a variable and that we call user rule value and I'm going to apply a lookup function here lookup will return us the first value of the condition that is matched so we have to look up to this particular user credential list for that we have to first make a data source connection if you do not have one click on ADD search for your data source in this case I have SharePoint set connection select your site URL select your list click on connect you will have your data source list available here once it is here in lookup I will just search for user credential comma what we are saying is if username is equal to what our this text input two so go here say username dot email because it's a person in group field is equal to text input 2 dot text and there is another field that is password is equal to text input 3 dot text okay close the bracket now out of this I want a rule value so that means if these two conditions match fetch the rule value of that particular field okay and close the bracket semicolon right this is done next step will be I'll will add if condition if is blank or error user rule that is our this user rule value that is our this variable if it is blank okay comma I will say notify what notify incorrect user name and password you can put any error message that you want to notify that's done so what we said is if this particular user rule value is blank then notify the error if it is not blank that means we have some condition match that means the username and password is correct so for that what we're going to see we will apply a switch case so switch case on what it is on user Ru value so for this particular purpose we get this user r value because this user r value will have the rule value that means this rule column value either admin reviewer and requester and based on this we're going to apply a switch condition so if it is admin I will say say comma navigate user to screen one close this comma if it is requester then navigate to screen three comma if it is reviewer then navigate to screen 4 close the bracket and complete your sentence if I format this text so that's done and after that what we're going to say is I will reset my text input two and then reset text input 3 as well okay that's done this particular label so for this one I will create a variable on this screen on visible property I will say set a variable I will we'll say label text and what I'm going to say is default value I'm going to set this to false okay and I will copy this and go to this label set the visible property of this label to Maybe by just saying label text it is now invisible and what I'm going to say is on this login on select when I'm notifying the error put the semicolon and say true means if there is error showcase this to true and also on the on Select Property of this uh username so it should be okay now so if we say we'll see it's gone okay this is done and one more thing that I have to apply for this View and uh for that what I'm going to say is also on the on visible I will set one more variable that is leave table View and I'm going to say here text mode is the text mode is one property text mode dot password okay and uh I'm going to copy this and I will go here and for this uh text input three I will go to the mode property that is single line I will set my Variable lbl View here okay by default and when this view button is clicked icon sorry I will set this to single line again all right okay and if I just type anything here login incorrect username and password notify the error as well and if I click on this icon here the error message gone and now if we select any username emails from here and just paste it here and say three text now I can view the password as well click on login you see I've redirected to the correct screen and same again if I go back run this put the incorrect one I can view this click on login everything is gone so that way you can create your power apps login form and uh can apply condition based on your requirement one more thing I want to just showcase here is that uh if we create this container based design so let's suppose if I have to move this design a little to my right you will see that everything is intact within this container so I can you know tweak it according to my requirement even if I have to scroll this to left I can do this way and I can fit it according to my need so the having container is uh very useful in power apps so that uh you can put everything inside one container and can then play with according to your requirement so that's how you can do that as well okay that's all for this video I hope you like this video if you do like don't forget to subscribe L Tech thank you so much for watching

Channel: Lernen Tech

Views: 25,814

Keywords: power apps login screen, powerapps login form, powerapps login user, powerapps login authentication, log in powerapps, powerapps create login screen, powerapps login, how to create login page in powerapps, login form design in powerapps, how to create login form in power apps, how to create login page in powerapps using sharepoint list, validate username and password in powerapps, login validation in powerapps, powerapps login screen, powerapps login page creation, login form

Id: k9nqaerkNw0

Length: 17min 49sec (1069 seconds)

Published: Wed Oct 18 2023