Desk Reservation Power App Enhancements

what's up everyone april dudum here i've got a lot of positive response from my desk reservation powerapps template that i released a few weeks ago so for this template tuesday i thought i'd do something a little bit different and address some of the questions that i've got as a result of that template a lot of you had some specific questions around different features and enhancements that you wanted to add to the app and how to do it so i thought i'd just make a video walking through some of the most commonly asked enhancements and show you how to do those but first here's the intro [Music] i'll start with an easy one a lot of you have noticed that in the list tempo that's deployed there's an active field that's in there but that's not being used in the app so one of the questions that i got from quite a few of you was can we use that active field to show or hide certain desks if they're active or inactive i included this active field which is a number field exactly for that purpose so if you have a bunch of desks and some of them might be out of commission for one reason or another you can toggle this to either zero or one in your sharepoint list zero meaning it's not active one meaning it is active and we can update the powerapps template to accommodate for that and only let people book desks that are active the first step to get this piece working is to fill out the active field in your sharepoint list itself which you see i did here at the second step is we need to make a small tweak to the powerapp template you'll want to go to the desk select screen and look for the gallery available desk and if we point that to the items property of the gallery and expand out the formula bar we can add one additional filter in here so the current filter is filtering out desks that don't have existing reservations but we can come in right behind this not function and add two ampersands and then we can say where and active equals one so it's only going to return desk with an active status so i'm going to update my data source do a little refresh since i filled in that data making sure it gets the correct information and you see instantly as soon as i refresh that it's reduced the amount of desks showing so i only have desks two three five and six available and if we go compare that to our data source two three five and six were the only ones with an active field value of 1. so that's a really straightforward and simple enhancement to add to this particular template the next question that i got was how can we allow multiple dates for a particular reservation because right now in the template when you go in to make a reservation you can only select a single date so how can we allow someone to book a desk for say the entire week thankfully this is also a relatively easy fix so for this screen on the date selection screen and the calendar piece we're utilizing a component for that and one of the features of this component is a custom property called select range which is a boolean so if you select the calendar component on the date selection screen you can toggle this from off to on and now that will allow you to select a range of dates instead of just a single date so if we click play on this you see if i select the 17th i can also select the 21st and now it has all of those dates as the date range so it's going to take the 17th as a start date and the 21st as the end date the only other thing we have to do here is write out the end date that we selected in the calendar to a global variable so that we can do some additional logic to pass that into our data source so if we go to the date selection screen and we look at the continue button in its onselect property you'll see that we were setting a global variable called selecteddate to the calendar start date so we can just do one more thing here we can go right below this and set another global variable called selected end date and set it to our calendar one which is our calendar component on this screen and then we can do a dot and there's an end date property that's available to us in the component that we can call so now that we have both of those the start date and the end date captured you see below that i'm sending two other global variables a start time and an end time variable and with that i'm getting the date that i selected and formatting that so it's a date and a time value so i need to make one more tweak we can leave the start time alone but for the end time rather than pointing that to the selected date we want to point that to our new selected end date global variable another thing that you'll need to change is on the desk select screen we're showing the dates that you selected to find a desk in this label so we'll want to update this if we look at the labels text property we need to change this last part so this is the from and the two we need to change instead of pointing to selected date we'll point that to selected end date so that then it will actually show the correct date range that you have selected so if we continue walking through the process we'll select this desk and continue in this screen you'll probably want to make one more tweak then this is the confirmation screen and right now we're only showing the start date essentially so you'll want to kind of move this label that has the time down a little bit and expand this start date label and instead of just having the selected date we can copy this same formula do an ampersand so that we can add in some custom text here we'll do a quote and just kind of separate this out with a hyphen so we'll wrap that in quotes and another ampersand and then we can paste in that same formula just changing selected date to selected end date another trick here i can show you is if you want to have this each on two lines in the same label you see how like the friday is kind of showing right there well right before where you want the new line you can use a special character called char 10 and that will force a new line break so now it's going to accurately show the range on the confirmation screen and then if we click confirm it gives us a success message and if we go inspect our desk reservations list in sharepoint will see a new reservation made for the 24th from 8 am to the 28th to 5 pm i'll just run through one more scenario so we can make sure that that desk is gone so just to prove that it still works with the date range desk 5 isn't an option anymore because there is a reservation made for that desk for that entire week that leads us into our next question and that's how do you allow people to book multiple desks at one time so this would be a scenario that someone pointed out to where maybe you're reserving desk for an entire team of people so you might want to reserve four or five desks at a given time for your entire team so to do that that's all going to happen here on the desk select screen and we'll need to add in some additional logic which will let us select multiple ones of these desks and when we click continue that will loop through figure out which desk we have selected and write those out to the data source so if we look at the template as it is right now you'll see that we actually can select multiple of these desks but the way it's coded right now it's not going to write all of those out so we need to add additional logic to accommodate for that we take a look at what's going behind the scenes if we expand out our gallery available desk that's on the screen and we select the check box that's on here and click on the drop down in the properties pane and go to its on check property you see that we're setting a global variable called selecteddesk to the selected item so what's going to happen as it stands now is each time i select this the selected item global variable will be updated with whatever the most recently selected desk that i have is so if we need to allow for multiple of these instead of setting one global variable we need to set this into a collection that we can then loop through so what we're going to do is we're going to comment out this set function and we will replace that with a collect we'll call this selecteddesk plural and we'll point that to this item so now each time we click that it's going to add the selected item into a collection now if we uncheck one we need to accommodate for that as well so let's copy this collect function change this property drop down to the on uncheck and you see here we were setting that global variable to blank but we can comment that out and we can use the remove function which allows us to remove an item from a collection so we can say remove from selected desk this item so if we uncheck it removes it from the collection now that we have our collection we need one more piece of additional logic in the button that actually writes this back out to our data source that's not this continue button because all this does is takes us to a confirmation screen as you can see there but that's actually happening here on our confirm button on the confirm screen now we can see we have an error now on this button and if we expand out the unselect of the button we'll see that's because it's relying on the selected desk property that we just commented out so this is where we need to make the change so that it patches this correctly so we're going to kind of leave this patch here but we're going to add something above it so what we can do if we need to essentially loop through all of the items in that collection and for each one right out to our data source that that particular desk is reserved with the given dates to loop through a data source we can use a function called for all if we type forall put an open parenthesis so in this case we want to forall through our selected desk collection and get each of the selected desk then when we're in that for all we want to patch a new record with that selected desk information so we can leave our patch there and we'll just add in like i did a closing parenthesis and we still get an error because we just need to change some mapping in this formula so instead of on desk text having it point to selecteddesk.title just change that selecteddesk to this record.title because that will get the current record in the loop of the for all and that's really all we need to change in this you'll notice we have one more error here in this label where we're showing the information of the desks that you have selected so let's change this and since we have potentially multiple desks we can use another function called concat and with concat we can point that directly to our selected desk collection and we can take the title from that and we can separate that out with a comma so this will loop through our collection get the title of the desk and separate that out split it out with a comma so i'll show you what that looks like we'll just walk through a test scenario i'm going to book a new reservation let's say from the second through the fourth i'll do these three desks click continue and you see there's that concat in action so i selected desk five three and six and it has those separated out with commas and now if i click confirm this should be doing the for all in my patch and i should see those different reservations for each desk and if i can go back to my data source let's just confirm and there are the three desks that i reserved from the second to the fourth all done and that one patch those were by far the three most common questions slash enhancement requests that i've received for this particular template if you have any more feature enhancement requests or questions about this template or any other templates that i've created drop a note in the comments and if you have suggestions for future templates let me know as well if you found this helpful please like and subscribe and i'll catch you in the next video you

Channel: April Dunnam

Views: 10,170

Rating: 4.9499998 out of 5

Keywords: Desk Reservation Power App Enhancements, 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: GJe6l13rgF0

Length: 13min 36sec (816 seconds)

Published: Tue Sep 01 2020