Desk Booking & Reservation Power Apps Template

hey everyone April Dunham here and back at you for another template Tuesday video this week I'm going to show my desk reservation power-ups template this is actually a request from one of my youtube subscribers so shout out to her for requesting this and thank you for everyone for all of your comments on my videos this particular template is really relevant for today's times when we're trying to figure out ways to go back to the office but also maintain social distancing so with office is running at limited capacity some kind of reservation system will really help that process I'll walk you through the app and we'll learn a few things about nested and complex filter functions and a lot of design tips and tricks but first here's the intro [Music] [Music] I've optimized the app for the mobile client there's three main screens of the application the first landing screen is the dashboard this is where you'll receive a welcome message and see your top two upcoming reservations you can click on my appointments and see additional appointments so this will show all the appointments that you've booked upcoming and then you can also click previous and see your history of appointments if we go to the book tab you'll be taken to a screen where you can select the date that you want a book now this is designed to be able to book one day at a time for certain hours of the day so I'm restricting it from typical work hours of 8:00 to 5:00 let's select a day maybe I only want a desk for half a day so we'll do 12:00 to 5:00 and click continue now this is going to take us to the screen where we need to select a desk so it's confirming the times that we have selected and it's showing us any desk that are available I've given these some generic names for now but we have a name and then a description of the desk about going to where it's located and then if you click this information-icon you could even embed a visual of the layout of the office so you can kind of see where the desk might be located just click the checkbox next to the desk that you want and this is obviously only filtering desks that are available and don't have existing reservations during this time click continue you'll have a confirmation screen just to make sure that you have the details ironed out click confirm it's booked you get a success message and that will automatically redirect you back to your dashboard screen and I can see that my desk reservation is showing up here and now let's go and I'll just just a prove to you that it is actually filtering the results so you can't double booked let's go back in and try to book something for the 15th from 12:00 to 5:00 you see when we do that desk two is missing so I can only select one of the other desks because there is a current reservation for that let's break this apart a bit one of the things I really tried to focus on on this app is the design really wanted to make it look not like power apps and very user friendly so we're using some images for backgrounds instead of just plain solid colors one quick tip for a website that I like to go to to get free stock royalty free images to use in my power ups is a website called pixels they have a ton of background photos and really photos of almost anything that's where I've got all the photos that I'm using in the application then I'm using my favorite control and power apps the HTML control to create this nice hover rounded background border but really just kind of using that for the background and I'm not injecting any information in it I'm going to overlay information on top of it it's just a simple line of HTML with a div that has a gray border and I'm using a border radius to give it some rounded corners and setting the height and width in a background color to give us some contrast on the screens I changed the fill of the screen itself to kind of a shade of gray so there's some variation between the HTML div that we have in the background of the app and overlaid on top of this I'm just using a gallery which I've applied some styling on to pull on the month date dust that's reserved in the time one of the things I said we'll learn in this is about some a little bit more complex filtering for this gallery that's showing up for the dashboard I wanted it to show just the top two upcoming reservations for the current logged in user well let's take a look at the filter query that we needed to make that happen first thing you'll notice is we're using the first in function and that's what enabled us to restrict the amount of results that are returned you wrap your filter query within the first in and then at the end you can pass it in the total number of items that you want to return so you see that's why I have a two right there then within that I'm using the sort by columns because I want to get these in sending order by the checkout from date so four sort by columns you pass it in your data source the column name that you want to sort by in quotes and then the order ascending or descending that you want to sort and within that we are using a filter in the desc reservations SharePoint lists in this case and we'll just take a quick look at our SharePoint list it's pretty simple we just have a title field where I'm storing the name of the person that reserved the desk in the destiny we have a separate column for the desk name the person that reserved it check out from and check out too so we kept it really simple first filter we're doing is we're getting the reserved by email because that is a person or group field so we need to get a property off of that and I have a global variable that is being set in the app on start to store the current logged in users information so I'm going to compare that to that current user dot email and then I'm going to take that check out from so the start date of the reservation in our SharePoint list and only returned the results that are greater than or equal to today now let's take a look at the formulas that I'm doing to get the month and the date from the check out from field look at the month name first I'm using a function called upper to convert the result to all uppercase letters and within that I'm using the text function passing in or check out from date field from our data source and I'm using the in quotes mmm functionality to get the month short name so if I were to go in here and add one extra M so for M total that would give me the full name of the month whereas 3 gives you the abbreviated name and 2 gives you the numeric value so those are the three different options to get the month from a date and for the date itself using that same upper function text again using that check out from and just using the DD shortcut to get the date if you do 3ds on this that will give you the day of the week in short code that this and 40s gives you the full spelled-out day the week so Monday Wednesday Friday and finally for the hours we're using that same text function and there's a property that you can use called date-time format and there's all these different formats that we can get from that so I'm using the short time option to extract the time from our SharePoint date field so you can do things like just get the the long date if you want so that will give you the day of the week month day year but if you just want to get the time from a date field then use the short time option the appointments page is really similar the gallery is doing all the same filtering except we're just not doing the first in in this case we're getting everything but what I'm doing here is i'm doing a tabbed approach if you want to know more about tabs i do have a video on that showing exactly how to implement tabs which i'll put a link to in the video notes on the date selection field i'm utilizing a calendar component which allows me to select a given day then i just put in two drop-down boxes which I've hard coded with values of 8:00 a.m. to 5:00 p.m. on each and on this continue button I'm utilizing some global variables using the set command to get the information so that we can use this in other screens so I'm studying a global variable called selected dates to the selected date from my calendar component for the start time since I'm not using a date/time control I'm utilizing a component and then dropdowns I need to format this into a valid date/time value so that we can patch this correctly so to do that we can use the date/time value function use the text function within that to pass it in a selected date and then format it with the short date function from our date time format then just do an ampersand so that we can add something to that and make sure you put between your date and your time and space so that's what we're doing here we just have two quotes and open in a closed and then a empty space within the middle then do another ampersand and then we can use the time value function to take the tie from the drop-down and convert that to a valid time value we're doing that for start time and we're also doing that for in time and then we just navigates to the next screen on the desk select screen this is where some nested kind of complex filtering is going on and I'm going to throw this out there because I'm sure you're going to notice it this template does have some delegation issues for this to really work the way that I intended I had to use the not function in that unfortunately is not a delicate function in SharePoint with the way I want to use it but I really don't think this would be too big of a problem because for this reservation system I don't believe you really need to keep past reservations at all or not for that long maybe a day or two tops so what I would suggest if you're in a high-volume situation is have a scheduled flow that runs every day in archives your reservations off or delete slim if you're comfortable with that so that that keeps the main reservations list under 2,000 items with that out of the way let's take a look at this filter function so in the back end I have our reservations but I also have a different list for desk notice touring the desk name description and a map link in this list so I only want to return the desk that don't have a reservation in the reservations list for the given time that the user selected to make that happen I'm filtering my desk list and within that I'm having another filter so I'm saying I want to filter the desk items where the title which is the dust name is not in this other nested filter so then I'm filtering our reservations list and I'm going to compare the checkout from date see if it's greater than or equal to the start time that I've selected and if the check out to is less than or equal to the end time then I'm going to do an or to get the check out from see if it's less than equal to the end time and the check out to is greater than or equal to the and time and the not we're going to do a dot to get the desk text so we're going to compare on that field so if there are no results in here that'll be blank and it's only going to show the desk that don't match I've just put in a checkbox control within the gallery so that the user can select which desk they want in on it's on check property I'm setting a global variable that will hold the selected desk the last piece of this is a tab component that I'm you see at the bottom of every one of these screens so we come over here you see I just have a simple component it's just a gallery control within the component and for the items we just have a table we're we're giving it a name an Associated icon and a page that it should navigate to this allows for a consistent look and feel across all of my screens with this component and here's a look at that calendar component that we're using in the app as well it's a little bit more complex it's two galleries to store one to store the day of the week and another to store the days and some labels and icons to handle navigating through the different months the beauty of this particular template is it can be used for any kind of reservations not just desk this can be used by a hair salon or maybe in a school setting to book time with a college advisor book a conference room lots of different options for this particular template if you have any other ideas for templates you'd like to see please use the comments section of my channel and drop me a note if you found this helpful please like and subscribe and I'll catch you in the next video [Music]

Channel: April Dunnam

Views: 48,227

Rating: 4.9750781 out of 5

Keywords: April Dunnam, Microsoft, room reservation, microsoft powerapps, powerapps tutorial, power apps, room reservation system, template tuesday, powerapps templates, powerapps templates free, powerapps desk booking, powerapps desk booking app, powerapps booking system, powerapps booking application, powerapps appointment booking system, powerapps date format, powerapps nested filter, Desk Booking & Reservation Power Apps Template

Id: zroxwXpVhHI

Length: 13min 54sec (834 seconds)

Published: Tue Jul 14 2020

Reddit Comments

[u/iProbablyUpvoted]

This is pretty great. Thanks for making/sharing. I'm a powerapps noob but was wondering if you have anything where a Team could keep track of which Team members are in the office vs working from home that day.

For example, a Team of 10 people in a department, only 5 allowed in the office at the same time. Either a Teams bot/adaptive card/SharePoint page/etc. where I can declare where I will be for the day, Office, WFH, Mobile/Field.

Then a page that would show the entire department's physical location for the day.