PowerApps Power Hour: Let's build a Workplace Visitor Registration App

right now with travel and site restrictions enforced around the globe it's never been more critical to manage site visits within an organization using a kiosk or tablet-based visitor application is an incredibly efficient way to manage visitation and enforce site rules by making person movements workflow actionable historically retrievable and highly visible at all times over the next hour I'll take you step by step in real time through the process of building your own site visitation application and demonstrate how easy it is to get a powerful app up and running very quickly in Microsoft power apps let's begin you are looking at the completed application that we're going to be building today so let me quickly run through this with you so if I just run that application of so the first thing I want to do is just search for myself here and I don't see that anything currently been set up in the site manifest so I'm most likely they weren't ready or they weren't expecting my visit today so I can click new sign-on and I choose myself from the select employee I choose the site that I'm visiting what date am i leaving let's say I'm leaving tomorrow and I'm doing the site or whatever now if I scroll down we can see here that we've got a couple of questions here that that my company has determined that a mandatory to be completed before anyone visits this site so the first one is is my experiencing following symptoms sore throat dry cough fever or tightness I mean answer no to that have you recently returned from a location outside of this country no I haven't and now I'm able to declare our information provided here is the truth click Save and then if I just go down and have a look at myself again I can see that I've completed a site manifest for this date to that day and I am now permitted to arrive on site so that's effectively there is the sort of level of restrictions that have been placed within side of my company now the other way this could work is is that if I just go to SharePoint because we're using SharePoint is our data source here I click on you I can add foot in Melbourne HQ and date from date to today traveller likely myself and this is just a static people pick up and I'm click Save to go back to the application just click refresh you can see here there's another site visit here so let's say I've arrived at the Melbourne HQ and I can see that out there is already a site visitor sign on war site there's a there's a site visit in our manifest already for me for my visit today so I can click on this I can open up that visit site audit is the reason why I'm here today I don't have a sore throat or those other symptoms and I have not traveled we are from I have not traveled recently outside of this country so I'm clicking no on that and then I'll clear everything is the truth back down and now that is showing up it's completed green light I'm able to enter the site so today our application will handle employees of our company now you could easily make a modification to this application to also handle external visitors or people that are not a part of our organisation and you could also set this up where this isn't necessarily completed from a kiosk or an iPad that's handed to me it could be done on my own device and in those circumstances you just wouldn't people picker you could automatically detect who's logged onto the device and therefore show their site manifests that's specific to me but in this scenario we're going to just go through the application because I think I think in most cases this will be run from a kiosk or or a tablet or something that is handed to me when I arrive site or just before I'm going to board a plane I'm handed iPad and I can fill that out and and everyone can feel okay that I have completed my site visit manifest and then I am permitted to visit site so the first thing we should do is create a SharePoint list that we will store our site visits in so if I go up to SharePoint I've got a site here called demo so I'm just gonna put it in the yellow and let me create content let's create a new list it's gonna call this site the way I like doing this is going to all the settings and then he okay created : this field is gonna be date from and that will be a date in time date too it's also gonna be date time just keep going next column will be traveler and that will be a personal group people only next time will be our reason for visit that's gonna be a multiple line of text and we'll just make that plain text because we won't would just storing text in there but we want to be able to store multiple lines so next one we're just going to create a boolean column and we'll call this symptoms look up and down we just want a yes or no and by default we're gonna make that no let's create another yes-or-no column and this one will be traveled recently to fall back to know so we also want to store the status so we can track and that's this going to be single line of text but will store the status of our site visits so just in case we wanted to down the track add like an extra workflow there so if we would want to reject site visits or just track on track how they currently progressing and of course we'll use the status field when we're creating site visits when we're pre-empting a site visit and we're creating it before the side that has so I visits actually taking place so say a my manager creates my site visit for me and we can use that manifest to sort of track upcoming site visits as well as track when the person's actually arrived and ticks off to say they have now arrived and they're now entered site so it's a good way to track the progress of how site visits are happening and we'll just need to we just need a single line a text for that so let's go ahead and create that call and the any other thing I want to do is create a column completed date so we know the date that was actually we've signed off or when with when the visitor has actually signed in to sites so I guess that's more of an auditing field and I see that being used that we just want to enforce or we want to make sure that that visitors are doing their site visit on the day that we're not seeing those records sort of completed before a visitor has actually arrived on site so really it like I said really just for auditing purposes so let's click on ok and I think that's all fields we're going to need for our SharePoint list so if we go back to perhaps create a blank canvas and let's call this site is it and we're gonna make that a tablet app because like I said this we're planning this app is going to be something that's gonna be used like as a kiosk or on an iPad device at a reception so that will be handed over by reception to our site visitor or it'll be sitting on the side there on the on the counter for everyone to to actually use so let's click on it's gonna spin up now remember we had some fancy we had some fair we had this sort of screen looking fairly fancy so let's just quickly do that I won't I'm not gonna spend too much time prettying this up but I do want the app to look good for our well i wanted i want i want the UI to be presentable because it's you know we want it to be clear and simple for users when they're arriving to be able to fill this out so let's just rename that screen to home and just shake quickly how I do these the formatting just sees these shapes here so if we and create nice borders and if I just copy and paste copy that and paste that and get exactly the same size for down the bottom now we've got a nice screen border and if you remember I also had an image the top right hand corner here so let's go ahead and do that add image file browse my computer and don't think you're I think this screen is actually coming up on the capture but when I click on when I click on that it's just bringing up another dialog box where I can browse on my computer to where I've saved those images I'm just going and fine and I want that image there was someone I liked because resize that you need a label like that bones actually maybe bulbs too much we don't need gold and say sign on for the text shrink that down a little bit okay so the next thing that we had on here is a people picker now I've got a another video that shows you how to do the people picker and if you haven't built one before in power apps you can follow the link while I put the link on the screen right now there you go so there's a link to people picker I'll also put it down in the kata in the video description just in case you've missed that link or you don't see them on your device so that video will show you how to set up a people picker in and power apps but I'm going to just really quickly run through it right now so you may not even need to watch that video so what we use for people pickup is a combo box that's a label here and the label is gonna say and search and we will make that bold and in here for items what we're going to need a connection to office 365 users so let's add that to our out and that's done and in here for the items we want office 365 years is dot search users and in here now what we can see we're being prompted and we've been showing how this actually works so we need to set up the search and search term will be go back so we call this combo box one dot and there'll be a property in here called search text now if we just take a quick look please select that comic books we take a look at our properties on the right hand side here I don't want to select multiple don't want to allow it to select multiple years and I do want to allow searching so just make sure those two properties are switched that way and all work correctly now the next thing well let's just quickly make sure that's working well okay it's not working so another thing we have to do here we have to set up the field so if I select our combo box and I clicked fields we want this comment box to operate like a person layout to be a person that we don't want an image but our primary text will be I like making it display name secondary text will make email and our search field will be display name so if we take a look now we can see Gina does stuff or if I search for say so this is now a search box that will search the entire my entire organization and return back a person record for whoever I've selected right so the next thing let's move this up a little bit so the next thing I will need is a gallery let's just do a blank gallery and we want that gallery connected to SharePoint so we need another data connection SharePoint and we get this little pop-up on the slide box on the right here that says where we want to connect to SharePoint and we created that we created that list under our demo site when we put the URL to our demo site in we can see a whole list of different applicant lists that are available within that site and the one we want we just created with site visits so click on connect to that and now that gallery is connected to that list which is great we just need to add a few fields in here now first field we want to show yes okay so let's this back up a sec I hadn't actually connected that gallery to that data connection I didn't set up the data connection but I haven't connected the gallery to it yet so if I select that gallery and I go items and I want the items to be site visits all right now if we add a label here the label will be titled perfect add another label if we take a quick look here we can see our labels are being created inside of our gallery which is how we want them to be created so the next field we want to show is they from perfect and I'm just gonna copy and paste that we want that date to so during this demo I'm gonna be doing lots of like little shortcuts that I normally do while I'm developing now I guess you may or may not like doing those sort of shortcuts so for example when I'm putting these labels in rather than going in and clicking the label I will just copy and paste them and that's fine sometimes that's quicker to shrink that down a bit so we've got title date from date - we also want to show status let's name these labels just make it a little bit easier for us to find them that was date from and let's name the galleries well okay so the other thing I like doing is putting a border around a gallery just make it dashed alright so I just select the home screen again and I will insert heading up here I'm gonna call that site visit and manifest and let's insert another label title make that a little smaller bold it will make it a gray color copy and paste that okay now let's put some data in the into our list so we can just see what we're working with you go edit data say Melbourne enqueue date from today date to today and the traveller will be save go back to site visits and just refresh a data connection because we've updated our data and just need to click the refresh and we can see that we've got record in here now allow us to place our heading okay so if okay just go back to all this I notice I hadn't done one other thing here with settings so status if I create us a if I create a new record inside of my SharePoint minutes I want this default value to be to be required always what to say required I don't want it just to be created as blank and you'll see why I want that later but let's just go ahead and do that but go back up here and if I just edit this record one thing we need to edit this manually now because I created this before I'd set that field but now from now on when I create new records inside my SharePoint lists they'll always say required in status if I go back up and let's just refresh daily connection again great I can see required there so now we've got our gallery here we can see we're displaying all of our site visits within that gallery so all the records that are inside our site visit list are showing up here but we only we don't want that we only want to show the visits for a selected user so we need to make a little change to our our items value inside of our galleries if I select gallery and filter so let's scrap this around a filter function and we want to filter travel a traveler display name because remember it's the people pick up in the SharePoint list is a record so field name is called traveler but we want the display name property is equal to people pick up display name and status equal to required is equal to completed now you might be asking why am I also doing a search for or also doing a filter I should say on status equals required and completed when they're the only two statuses that we have in our list now why I've done that is because you it gives you the option later on for a site administrator to go through and actually change this status to say archive so or even having a having a workflow run daily or even monthly or or a manual trigger that will archive all of our site visits once they have reached a certain date or certain age or say once the site visit is completed you could have a workflow that would run that would set the stands to archive now what that will mean is that archived statuses will never be displayed inside of their site visitor sign-on which is kind of the behavior you want because you really don't want site visits that are in the past appearing in your in your manifest because they're I mean they're redundant you don't really need to see them anymore inside of our application alright so we just move that down a little bit okay so now we're filtering our gallery by our traveler name and it's status if I go through and say select someone else in the organization see there's nothing inside of our search manifest so let's go back and just what we want to do now is give the user the ability to be able to fill out our our existing record here so our existing our existing site visit we want we want to give the user the ability to be able to fill this out and complete our site visit and sign on so what I'm going to do let me first add a button here [Music] you see I'm making sure when I'm adding these elements to our gallery I'm selecting the row otherwise if I don't select the row in the gallery when I'm adding an item it will add it outside of the gallery and therefore it won't be part of that record so we want this to be a part of each record inside of our gallery list and that button will just put a hold on that button for now but we've got that there and the other thing I like doing here as well I like putting a little separator and stuff I select that row and I add three little fix up a go up to properties on the rectangle and find a height make that one pixel that's great right so the easy way well actually there's no easy way just we need to create a new screen but we want to scrollable screen because our four make actually get large or you want a scrollable section in our screen so we need to select that scrollable screen type I'm gonna call this let's call this screen complete side on canvas going on now I don't want some of these elements here so I'm just gonna delete them and the first thing that it happens is we get a little error so if I click on the edit error see the why it's being set by a formula so I'm just gonna put one day so no here my canvas is set to if we look at the height of the canvas it's set to 504 but the data card height let's just rename that the data card height is set to 800 s and what that effectively does is it creates a area inside of our canvas that's larger the data card is larger than the actual window the canvas window and we get this little scrollable section now if we go back home it's when you grab this this is an example of me cutting corners here if I go to complete sign-on and I just click pace and like that image change it I just want to say complete your site visit move that down a bit find that as well sometimes when you're moving this canvas around it will mess with those it'll mess with those Heights and wit so yeah it's a little bit fiddly but I find if I work with the actual heights and the height values here rather than trying to move it around with the UI I get a better result but anyway that looks good how I wanted but the other thing that might make this a little bit easier to work with and let's just put a border on here as well now we can see the border of our canvas here which is makes it a little bit easy to work and you can see our window chisels okay what do we need next well we need our form and we need to add some fields to our data card to do that because we want our fields inside of that form to be scrolling so first thing first field is our reason for our visit let's make that bold then we want to insert a text input all the way down and one of the properties on our text input is we want to change our mode from single line to multi-line because remember we set that in our SharePoint list as a multi-line just rename that I'm gonna make sure that I'm renaming all these fields because when we go to do our patch there'll be way easy to reference and our field in our patch when we know when it's got a sort of a sensible name rather than just having the default names that that powerups gives you so the next field I want is that label let's feel that one is a we need another label after that see are you Experion Sperry and seen any of the following and we went we went ball this field because we're just gonna listen out the different conditions go up to our text and we just hold shift and enter and we can have a new row Shift + Enter yeah we do have a space between there and our last one is in fit and we can make that kind of a dark red and swell all right now if we remember the the answer this question we're expecting is the yes or no so they are inside of power-ups a yes or no is determined via a radio button now I want my radio buttons to be to look side on rather than up-down if you know what I mean so I don't want them to go like that I want them to be crossways so it's under advanced under layout we got vertical we move vertical what's the option here for horizontal so now we've got these horizontal radio buttons I'm in the course are do symptoms the other thing I like doing here it's just reordering these to the back so all the labels so all of these fields I just like reordering them down to the back so I've got all my field actual input fields at the top and that is just a big peculiar thing that I like doing when I'm developing power apps where I just push all the labels down to the bottom and that way I don't have to look at them and like wonder do these contain values that I need to manipulate or change or am I just dealing with these values at the top so just orders things a little bit better on my screen and while I'm building my power okay so their values we want to have here all the items we want to have here is true and false because we're answering we've set this field up as a boolean inside of SharePoint so we need to pass it the true or false or yes or no depending on if we if we are experiencing the following wrong okay so the next question we were asking was I'm just gonna copy that field and that and paste that and just send that reorder that back and this radio button will be full traveled recently you traveled only have you know have you returned recently this should already be set up for us because we just copy and paste that from the other our radio button that we created so the final thing we need on this screen is a button to be able to click on yes and to complete our visitors sign on so if we just select a button here have that all the way down the bottom nice big button it's gonna change the color to green and Oh provided and I'm this button we want to be able to commit that record to our SharePoint list we're going to use a patch command to do that so if I on our button they go to unselect here we want to do pouch on a patch the site visits and we're patching our gal site visits selected ID so what we're doing there is we're just patching the record that we selected lose remember that we've selected a record from our gallery and we've selected our and that record is the site visit so we've selected our site visit from the selection in the gallery and this is our reference to that record so now we're updating that existing record here by adding this reference and if you haven't used patch much before I will link to a video of mine that will give you a bit more information and we'll show you how to set up patch and give you a really simple example on how to patch to a SharePoint list it should be appearing on the screen now if you don't see that link I'll also put it in the description below but let's continue I'm just gonna format that you don't like to have it sort of set up like this one I am creating my patch statement so my reason for visit is gonna be the text value think it with symptoms it's gonna be I do symptoms elected value excellent so all I'm doing here is on the left hand side this is the column name from our data source and on the right hand side is the value that I'm patching to it so these have to equate to our column names in our SharePoint list next one is I think it was recently the hold we just double check that traveled recently Adi I travel recently selected value and all you want to capture here is the completed day and that is just going to be today one last thing we also want to update the status we can update the status to your complete so if we go back home let's test that out so just before I do that one other thing that I would like to have here is I would like to show this status field from I would like to show it as you know a different color depending on what statuses so I'd like to show green when it's completed but red when it's required so what I need to do there is I need to find the fill and you can see its current fill is zero but I can use an if statement here so yes this item status equal to red otherwise let's make it green also just change the text to always be white as well and maybe bolded and aligned as well all right that looks much better and a lot more like my initial example that I showed you guys so let's test that patching and let's test that update of an existing record let's say I go into my open side business manifest or I'm handed the iPad and I check you know that stuff I can see that there is an existing manifest existing visitor record in there for me and click on OH one thing we missed so that button has to navigate to our screen and I've also thought but miss another thing as well so in here after we've patched our record we want to navigate back to our home screen this will be an uncover go back home will be a cover that just sits the animation when we're navigating alright once again select me under search employees I click on site manifest and I can see these questions I'll be like site audit am i experiencing any of the following know about travel in the last 14 days no and I declare that's the truth and now I've completed so functionally that's working but one of the things I definitely want to prevent people from doing is pressing this button when our fields haven't been completed yet so we definitely want to capture all of our answers so we need to quickly go into the button display mode we don't always want this to be clickable so in here need a little bit of logic so if how odd it is blank coffee that it can I do travel recently now we need to actually also add this as well we need to reference the value inside of well the value we've selected not just the entire field because they're radio buttons or is blank again extreme any of those are blank we want the display mode to be disabled otherwise make it edit let's say I removed one of those now I can't click on it the other thing we want to make sure we do that and this is the super cure-all arity with power apps we want to make sure and when we're using patch command want to make sure that these fields have been reset every time we go to this screen so unvisible just want to quickly add a reset for each one of these okay now the other thing we want to make sure we're doing is that we're only showing this button when our record is required not completed so if you want to hide that button that's the visible property can we need small logic here if this item status is equal to required then we want to pass back true or we want it to be visible otherwise we don't want it to be visible and this will just make sure that we can't click on that record again all right so let's quickly create will just generate another its generate another record here again we'll make that today and I'll select myself again let's refresh our data connection should see another one in there and so if I go in and I'm now I don't have that option for that because the status is completed but I can open this one my experience in I could see I can't click on can't declare it until I have done all my answers and now I can clear that's the truth and I've completed that record so the only thing we have left is the new sign-on so when a record hasn't or when a visit hasn't already been set up for us in our site and manifest we want the ability for the user to click on a new sign on and to go away or to go ahead and just create a new record in our list so I'm gonna get a little GT with this and just copy or duplicate that screen do you know I don't really think this is Gd because marks up give you the option of duplicating the screen and duplicating different components on the screen I actually think it's pretty smart way of doing things but you know feel free to leave comments below if you think I am being GD in this otherwise definitely leave comment if you think I'm being smart about it alright let's continue on the screen let's this call is new let's just call this new sign on and we pretty much have got we want to do exactly the same thing let's just move this field down up a little bit these fields down a little bit and if I go back to wall I'm gonna grab I'm gonna copy this people pick up in inside of my data card and I'm gonna paste it instead of saying search employee I'm going to say select employee and for the people pickup I'm just gonna call this underscore new so I know it's new she's gonna check all these feels to you and scorn you just so I know that they are for the when I'm doing new sign on rather than completing an existing one let's just move that label back all right now pretty much all these fields gonna be exactly the same in here a couple of things I can see they are all all correct but yeah I don't want to reference my existing record so I just removed that entire reference to the record that we selected in the gallery and what this will do is it'll create a new record when we click on it rather than when we run patch sorry rather than updating an existing record so the only other thing here we need to do is on our display mode want a tad you can see these values like by duplicating their field these values have they've also changed so even though when I duplicated those fields these fields were still valid li pointing to the completed sign on field but because I went through the process of duplicating it by default it will repoint these functions to the new screen or the all the fields that are relevant took this screen rather than the fields that are relevant to the original screen so a lot of the works already done for you which is great but I do need to because I've added a new field here I do need to add our people picker and lets a display name I want to wrap this sorry if you're doing this back to front in a is blank function so I also want to check if that's blank we need to add down the field here today and let's select a drop down show it above came from just looks like the drop down and in here our fields will be our sites that we have said we've got Brisbane Factory and this is just for the demo obviously in your organization this would be sourced from a list of all your sites that potentially will receive visitors now that could be a separate database that could be sourced from a SharePoint list or it could be hard-coded inside of your power but for this example just keep it simple long and hard coded and I think the other one was New Castle what okay and sort of so it doesn't default to to the first option I'm just gonna create a I like doing this with my drop-down especially when they're hard coded just adding an entry at the beginning select so that way I can detect what this hasn't been slipped it or not so in our patch or in our change the name at this drop-down site visit site location okay so we need a bit more logic here first so in our display mode location selected all right so that's that and you know patch remember we're saving this to the title in this example just using the default title field in SharePoint and this will be our drop down site location selected value but the last thing I need to do here and this is the complicated bit is I need to save the traveller data that I am getting from this people picker to SharePoint now I mentioned earlier that field is a special type of field it is like a person record and we can't just patch it like I can't just go I think I call that true did I call that travel yet traveller so I can't just go travel I equals people pick out this isn't gonna work that's not gonna work because that is a text value that that's not gonna work either because the record type is different so how do we actually patch that person field from our combo box back into our SharePoint person field so there's there's actually a format to this record and we can do it but rather than typing it all out I'm just gonna paste it in here all right so that is the that is the format that you're going to need for that people pick up to patch that people pick a field back to SharePoint okay so let's give that a let's go back to our home so we need a way to be able to create a new visitor and let me just insert a button I think in the original app had a big green button down here mate takes a bit bigger and on here we just want to when we click it we just okay get that right final alright so in this scenario I can see a couple of completed ones but I don't have a sign on for my side visit today so let me click on new sign on let me select myself which side of my visit Ian's visiting the new car support today and I'm also doing this site ordered still don't have a sore throat or any of those other symptoms I have not visited and now I'm I can declare all my information provided here is the truth click on that and I have it completed all right so we do a problem still here let's just have a look at our patch all right so if we look at the data we captured here we didn't we didn't save date from date to Z so let's go back to and you sign on we need a couple more fields just grab all these all these down and this is gonna be date leaving site okay say date leaving and you know you want to add a couple of things here you know patch date from is today and date to is from our date leaving selected date and we just want some logic here as well we want to make sure that those fields aren't left blank so I display my I just want to add another or DTE day leaving selected day and wrap that around a is blank function let's go back to our home try that again run me up alright see a couple things here I'm not resetting these fields so let's just we've got to remember every time we add a new feel to this screen we have to reset it okay go back to home let's try that again click on you select Geno stuff which side of my visiting Newcastle port what date am i leaving let's leave tomorrow site or dit nope nope if I scroll down I've got my new site manifest I've recorded from the from day the to day and now it's completed so that covers that really simple side visitor app if you know this would be something that would be really simple to add more questions to say for example if you want to also check if the person had the appropriate PPE equipment you could just add that as another field in your SharePoint list and add it to your forms you could also add an additional process there where when a site visitor visit has been completed a summary of it gets emailed to say the receptionist or even a manager above that so they can review the site visitors you could also have a summary of the day the day's site visitors email to a manager you you know I see this app also you know you can add extra restrictions and there where or extra sort of functionality where if someone does say yes or no to some of those questions you could have it run a different workflow process where you don't necessarily get a status of completed you might get a status status of denied access or or further instruction at that point and you know I also see possibly writing another app or creating a separate app that supports this app for the for the receptionist where they can actually go through and review all the site visits and make modifications or make updates as they require to those records and that would kind of work in in tangent with the actual the kiosk app or the out iPad app where where this is really designed just to fill out your site visit but then there is a supporting app that processes those applications you know hopefully you got something out of today and you can take what I've shown you here and expand on it and create something that will really work within your organized hey hit the like button if you liked this video comment something in the comment section below and of course subscribe to stay up to date with all my latest videos thank you so much for watching I'll see you in the next video

Channel: Chino Does Stuff

Views: 8,161

Rating: 5 out of 5

Keywords:

Id: le4Fl50Ru-0

Length: 76min 10sec (4570 seconds)

Published: Mon Apr 06 2020