Reservation System App

[abah]

Hello everyone!

I am currently working on a reservation app to reserve seats at the office.

I was wondering if it is possible to do something like an airplane seat reservation system like below in Power Apps.

One idea was to do it with buttons but it will take a lot of time and the selected seat cannot be changed.

Any ideas on how to do it?

Thank you very much in advance!

[v-bofeng-msft]

Hi @abah :

Do you need an app to reserve seats like this?

A little bit complicated,I've made a test for your reference:

1\I create a sharepoint list-BookSeats

Title-Text

From-Date and Time(Incloud time)

To-Date and Time(Incloud time)

User-Text

2\Back to PowerApps Studio and add two textinput controls(FromInput/ToInput)

3\Add a Gallery control(Gallery2) and set it's Items property to

[1,2,3,4,5,6,7,8,9]

 4\Add three person icons into this gallery(Seat1/Seat2/Seat3)

Seat1-OnSelect

Set(TheVar,"01");/*TheVar is my custom variable*/
Set(UserName,User().FullName);/*UserName is my custom variable*/
If(
    IsBlank(
        LookUp(
            BookSeats,
            Title = Text(ThisItem.Value,"[$-en]00") & "01" && 
            ((DateTimeValue(FromInput.Text) >= From && DateTimeValue(FromInput.Text) <= To) || (DateTimeValue(ToInput.Text) >= From && DateTimeValue(ToInput.Text) <= To) || (DateTimeValue(FromInput.Text) >= From && DateTimeValue(ToInput.Text) <= To))
        )
    ),
    Patch(
        BookSeats,
        {
            Title: Text(
                ThisItem.Value,
                "[$-en]00"
            ) & TheVar,
            From: DateTimeValue(FromInput.Text),
            To: DateTimeValue(ToInput.Text),
            User: UserName
        }
    )
)

Seat1-Color

If(
    IsBlank(
        LookUp(
            BookSeats,
            Title = Text(ThisItem.Value,"[$-en]00") & "01" && 
            ((DateTimeValue(FromInput.Text) >= From && DateTimeValue(FromInput.Text) <= To) || (DateTimeValue(ToInput.Text) >= From && DateTimeValue(ToInput.Text) <= To) || (DateTimeValue(FromInput.Text) >= From && DateTimeValue(ToInput.Text) <= To))
        )
    ),
    RGBA(0,18,107,1),
    Color.Red
)

Seat2-OnSelect

Set(TheVar,"02");Set(UserName,User().FullName);If(IsBlank(LookUp(BookSeats,Title=Text(ThisItem.Value,"[$-en]00")&TheVar&&((DateTimeValue(FromInput.Text)>=From&&DateTimeValue(FromInput.Text)<=To)||(DateTimeValue(ToInput.Text)>=From&&DateTimeValue(ToInput.Text)<=To)||(DateTimeValue(FromInput.Text)>=From&&DateTimeValue(ToInput.Text)<=To)))),Patch(BookSeats,{Title:Text(ThisItem.Value,"[$-en]00")&TheVar,From:DateTimeValue(FromInput.Text),To:DateTimeValue(ToInput.Text),User:UserName}))

Seat2-Color

If(IsBlank(LookUp(BookSeats,Title=Text(ThisItem.Value,"[$-en]00")&"02"&&((DateTimeValue(FromInput.Text)>=From&&DateTimeValue(FromInput.Text)<=To)||(DateTimeValue(ToInput.Text)>=From&&DateTimeValue(ToInput.Text)<=To)||(DateTimeValue(FromInput.Text)>=From&&DateTimeValue(ToInput.Text)<=To)))),RGBA(0,18,107,1),Color.Red)

Seat3-OnSelect

Set(TheVar,"03");Set(UserName,User().FullName);If(IsBlank(LookUp(BookSeats,Title=Text(ThisItem.Value,"[$-en]00")&TheVar&&((DateTimeValue(FromInput.Text)>=From&&DateTimeValue(FromInput.Text)<=To)||(DateTimeValue(ToInput.Text)>=From&&DateTimeValue(ToInput.Text)<=To)||(DateTimeValue(FromInput.Text)>=From&&DateTimeValue(ToInput.Text)<=To)))),Patch(BookSeats,{Title:Text(ThisItem.Value,"[$-en]00")&TheVar,From:DateTimeValue(FromInput.Text),To:DateTimeValue(ToInput.Text),User:UserName}))

Seat3-Color

If(IsBlank(LookUp(BookSeats,Title=Text(ThisItem.Value,"[$-en]00")&"03"&&((DateTimeValue(FromInput.Text)>=From&&DateTimeValue(FromInput.Text)<=To)||(DateTimeValue(ToInput.Text)>=From&&DateTimeValue(ToInput.Text)<=To)||(DateTimeValue(FromInput.Text)>=From&&DateTimeValue(ToInput.Text)<=To)))),RGBA(0,18,107,1),Color.Red)

5\Add a datatable(DataTable3) control and set it's items property to

Filter(
    BookSeats,
    Title = Text(
        Gallery2.Selected.Value,
        "[$-en]00"
    ) & TheVar && User=UserName
)

 6\Add a button and set it's OnSelect property to

Remove(BookSeats,DataTable3.Selected)

It is used to delete the selected reservation

Best Regards,

Bof

[abah]

Thank you so much!

This helps a lot.

I have two questions though, for the From and To text controls, how do I connect them to the list in SharePoint and how do I make them automatically show the date＆time? Sorry, I am just starting out with SharePoint and PowerApps.

Also, we have different layouts for different rooms so is it possible to change the layout of the seats? And is it possible to give a number to each seat in the row so I know which seat was reserved or it would be too complicated?

Thank you very much again and sorry for the many questions.

[v-bofeng-msft]

Hi @abah :

Q1: for the From and To text controls, how do……

A:If you want these two text input controls to automatically display the time, you can set their Default property to 

Now()

Q2:Also, we have different layouts for different rooms so is it possible……

A:If you want to change the seat layout or number the seat.Then you can't simply use gallery to achieve this function. Need to manually add the same number of seats and set them in turn (similar to my solution), which will be a very complicated task.

Best Regards,

Bof

[abah]

I understand, thank you very much.

For Q1, maybe I didn't explain it properly but which setting should I change to have it shown like in your example? Should I add a Date Picker or the user needs to manually introduce the date and time for their reservation?

[abah]

Another problem I have is with the data table, although I select 3 seats for example, only 1 seat will appear in the table. 

[v-bofeng-msft]

Hi @abah :

For testing, I used the textinput controls.

Adding a date picker is a better choice. 

Best Regards,

Bof

[abah]

I understand but can you please teach me how you made it for this test? In my app I only have From and To now without any info, how can I add info there like in your test? Sorry if I am not being clear enough.

[v-bofeng-msft]

Hi @abah :

Please try this(Modify the solution I originally provided😞

1\Add two datepicker controls(DatePickerFrom/DatePickerTo)

2\Replace 

DateTimeValue(FromInput.Text)

With

DatePickerFrom.SelectedDate

3\Replace 

DateTimeValue(ToInput.Text)

With

DatePickerTo.SelectedDate

Best Regards,

Bof

[abah]

Thank you very much! I tried this method and it worked.

I have another question, how is it possible for the user to know which seat to choose?

Is it possible to add a number under the person icon?

Thank you!