Timeslot Registation Form

[m_wllms]

I am new to power apps and I was tasked to create a Lunch Reservation form using Power Apps that has a dropdown list of available times that increment by 5 minutes. They would like to use a sharepoint list to store the data and populate the dropdown list. In addition, they would like for the time slot to be removed from the dropdown list once it has been selected. Is this possible in Power Apps? What is the best way to accomplish this?

[Meneghino · Accepted solution]

Hi @m_wllms, yes, it is all possible.

Here is an idea, slightly adapting your approach to use PowerApps functionality:

1. Create a SharePoint list called LunchReservations* with the standard Title column (that we will use to store the name of the person who made the reservation) and two additional single line of text columns, called LunchDate and LunchTime**
2. Create a new blank PowerApp***, Phone layout
3. Add your SharePoint list as a data source
4. Add a text box at the top of the screen (it should be called TextBox1 by default) and set its Text property to:
   

   User().FullName

5. Add a date picker control just below the text box
6. Add a custom vertical gallery just below the date picker
7. Assuming you want the 5 minute increments from 12:00 to 12:25 (you can always expand this later), then set the gallery's Item property to this:
   

   ["12:00", "12:05", "12:10", "12:15", "12:20", "12:25"]

8. Insert a text box in the left side of the gallery's template (the part that repeats) and set its Text property to this:
   

   ThisItem.Value

9. Insert a button (Button1) in the right side of the gallery's template and set the OnSelect property to this:
   

   Patch(LunchReservations, Defaults(LunchReservations), {Title: TextBox1.Text, LunchDate: Text(DatePicker1.SelectedDate, "yyyy-mm-dd"), LunchTime: ThisItem.Value})

10. Now save your app so far, press play to run the app and press any button.  It should have created a new record in your list.  If this is fine, then go back to editing the app
11. Set the button's DisplayMode property to this:
    

    If(IsEmpty(Filter(LunchReservations, LunchDate = Text(DatePicker1.SelectedDate, "[$-en-GB]yyyy-mm-dd") && LunchTime = ThisItem.Value)), DisplayMode.Edit, DisplayMode.Disabled)

12. Set the button's Text property to this:
    

    If(Button1.DisplayMode=DisplayMode.Disabled, "Reserved", "Free")

13. That is all...please see my screenshots below.  There is much more you can do to make this more robust, but this should be a good start. For example if you want to show the date in SharePoint in the US fashion, just create a calculated column to do that.
14. Please let me know how you get on or if you have any questions.

* Always a good idea to avoid spaces and special characters in all names, please remember that PowerApps code is case-sensitive

** The reason we use text columns to store the date and time is to avoid issues with time zones, server times etc. that you will find discussed in a number of other posts

*** I never create apps from data, since it is inevitably easier to start from a blank canvass that trying to adapt a generated app, but that is my personal preference.  I also never use forms in PowerApps for the same reason.

[m_wllms]

Thank you for your help! This worked perfectly and I was able to implement it quickly and without any issue!

I have an additional question. In the Gallery's Item property where I list the times can I make it to where it pulls them from a single line of text column in SharePoint instead of hard coding the values? If so, How is this done?

Thanks again for your help! You are a lifesaver!

[Meneghino]

Hi @m_wllms, you are welcome.

Can you please clarify your additional question?  What is it that you are trying to achieve?  Do you have different lunchtimes for different days of the week, or does the lunchtime change once in a while?

[m_wllms]

Yes, the times change frequently so I would like to be able to allow our Office Manager to update the times without having to learn/use PowerApps. Ideally, they would update the times on another table called TimeSlot. The table would have two columns The Title would be a single line of text column with a list of times and the other column would be called Availability and it would be a choice column with two choices: Available or Unavailable. When a time is selected it would be marked as Unavailable and the items would be filtered to only show times when Availability = available. As a result, unavailable times would no longer be displayed as a choice in the Registration form. When it came time to update the list form for another event they would just go in and change the times and mark all of them as available so that they would show up as choices for the next time. This doesn't have to be a gallery item it can also be a simple dropdown. Do you think this is possible?

[Meneghino · Accepted solution]

Hi @m_wllms

Yes, easily possible.

Much easier to make the Availability column a yes/no column.

Then just replace the Items of the gallery with

Filter(TimeSlot, Availability)

However, a quick test shows that this does not work as expected.  This seems like a bug.

I will write a separate post and please follow up with Microsoft.

[Meneghino]

You will also need to replace Title for Value in a few of the expressions.

Please let me know if you have issues.

[m_wllms]

Awesome! Thanks again!

[mr-dang]

Aside: Microsoft Bookings is an offering that could be another solution you may want to consider.

[m_wllms]

Thanks! I will look into it! 🙂