How To Make A Login Screen In Power Apps

hey youtube welcome back to the channel today we're making a quick video on how to build a login screen with powerapps i think a good use case for this would be if you're a company that has limited licenses to play with and let's say you have a app that needs to go up to 10 people but you don't want to have 10 license accounts so you have everyone signed into powerapps under one licensed account and then you'd have everyone signed into the app with their own unique specified login that way you can still tell who's submitting data editing data things like that so what we're going to start is by naming our screen and we're going to just say login screen then we're going to add another blank screen and this is going to be the home screen so this is if you successfully log in this is where you will go and we're going to add a third and final screen and we're just going to call that error screen and this is where it will navigate if you don't provide correct credentials this is something you could do on the login screen with a pop-up but just to keep the video simple and everything kind of spread out we're just going to use three screens for this so we're going to start on our login screen and we're going to drop down a button and we're just going to call that login for text and we're going to name the control login button so now we're going to add a text input for our username and we're going to remove the default text and in the hint text we're going to say enter username letting users know to type their username there and we're going to go over here and rename our control uh username underscore txt and now we'll just copy and paste this control and edit its hint text to be enter password and we will rename it to be password underscore txt so this is going to be the basis of our login screen you can certainly make this look much prettier i'll do a little bit of work off camera make it look a little nicer and then we'll be back so just added some header text and a nice little blue background now we'll go to our home screen and just throw down a label and we'll just say welcome you made it um and maybe a back button if you want to return to login all right so now we will go to our error screen and we're going to put a label down and we're going to say whoops wrong username or password and we're just going to add another button that will take you back to the login screen so we'll just say return to login screen so we have the basis of our app pretty much built out we have our login screen where you'll enter your credentials we have our home screen where you'll go if your password and username match the criteria and we have an error screen where you will go if you do not match the criteria for username or password so next what we're going to do is go and build our table where we're going to keep our usernames and passwords so we're going to go to sharepoint uh and create a new list just a side note this is going to work in any data source that you want to use whether it's excel whether it's sql dataverse sharepoint just for the video we're going to do a sharepoint list but again this will work across the board so we're going to do is create a new sharepoint list by coming over here and clicking new and we'll say list and we will click blank list uh and we will call it user logins um we'll wait for that and we'll click create so now that we have our sharepoint list we're going to add a column and we're going to say single line of text and we're going to call this password awesome now that we have our sharepoint list we can go and add a username and password so we'll click edit in grid view or you can click new over here and you can just say we'll say username one and we'll say the password is going to be one two three four and we'll click save i'll add some more off camera quick and i'll be right back so i had a few more users and now it's time to add this data source to our app so we're going to go back to powerapps we're going to click on data we're going to click on add data and we're going to type sharepoint and connect directly by cloud services click connect so this should show up in recent sites uh if you're working with a lot of different sharepoint sites sometimes it does not so to get the url to search for it we can go back to sharepoint and we can copy right up until it says lists copy that paste that click connect and it'll link directly to our sharepoint site so here's our list right here user logins we're going to click on that and down here we'll click connect and now we can use this data source with our app as you can see it's over here all right so we're ready to start wiring this app up and getting things to work uh just before we get started note that there's probably a hundred different ways to do this mine's certainly not the best way but it's a pretty simple way and i think you can build a lot on top of it so to start we're going to click the login button and we're going to want to make sure that the on select property has been selected and we're going to expand the formula bar a little bit so again what we're looking for if your password and username don't match anything in here we're going to send you to the error screen if they do match we're going to send it to the home screen so to start we're going to want to go with a if statement and open parentheses and then we're going to want to go with is blank and what we're actually going to do is search for the opposite of isblank the isblank function is going to return true if there's nothing in that record but we want to return true if it's the opposite so by putting an exclamation point in front of isblank it's going to return true and let us know if there's a record there now we're going to add a lookup function and it's going to want to source so we're going to use source as our user logins so this is where we're going to start checking our user logins table and matching that against what our users enter so the condition the first condition we're going to say title and again remember that title is our username column so we're going to say title is equal to username underscore txt which is our text control for username on our login screen dot text pulling the text property so what's in that text box and now we're going to do two ampersands for and and now we're going to say password which is our password column in sharepoint is equal to our password input dot text and then we're going to close that off with two parentheses so we've closed off our is blank statement and our lookup statement so now we're going to add the true value so if we hit comma we can see right up here it wants a true value so if our record is there our username and password are in that list together what should we do we're going to say navigate and open parentheses so if it's correct again we want to go to the home screen and we're going to close that off and now comma for the else value so if this records not here meaning that the username and password that you entered is not in that list we want to navigate to the error screen so navigate and we can see down here error screen and we'll close that off and then one more parenthesis and our statement is done so we're going to click format text and go through this a little bit so we'll start up here again we have if and this next one is is blank with a exclamation point so we're saying if there is a record and the next piece which is lookup where we're actually looking up a record from our user logins table again where the title or the username is equal to uh what someone is inputting on this username field and same goes for the password so we're title and the password field that users entered match something in the user logins so we have a record there if all that's true we want to go to the home screen if it's not go to the error screen so before we test the app i do want to show you one cool feature about a text field in powerapps if you click on this and go over to properties and go all the way down to the bottom where it says mode we can click in here and click password so now when we type some information in here it's going to hide it just like a password field so just a cool tip so now we're going to test this app against our data so we can see our first username is username one and our first password is one two three four so if we type in username one and password of one two three four and click log in you can see that we make it to the home screen um and now we want option to return to login so just the quick back function up here so on select of this button we'll just do back and this just will return us to the next screen so now if we mess up the password and we say you know one two three four five six seven eight and click login it's gonna say hey wrong username or password and we wanna do the same thing on this button we'll just do the back function and this will take us right back so we can test this with another one we have our next one is username2 and abc123 for the password so we'll try username2 and abc123 for the password and we'll click login and you see we successfully made it to the home screen so this is just kind of showing you the structure again of how to make a functional login screen with powerapps so again i think this is a pretty nifty feature if you're at an organization that doesn't have a lot of licenses and you want to have multiple users sign in on multiple devices under one microsoft account but still retain access to see who's sending what data who's modifying what data who's editing what so yeah let me know what you guys think in the comments below and if you have any questions please reach out and we'll see in the next video

Channel: Power Apps University

Views: 39,535

Keywords:

Id: BN74SsN4mm8

Length: 9min 16sec (556 seconds)

Published: Sat Jun 04 2022