top of page
Booking List

Booking List

Query and display a list of bookings filtered by date and status

Intermediate.png

Intermediate

4K

Published:

April 25, 2021

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example we display a list of existing bookings in a repeater. The bookings are filtered according to date and status.



Security Note


The code in this example exposes sensitive business and client information. Make sure that only authorized admins can access this data. See below for best security practices for this example.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It


Page elements


  • 3 form input elements to set start & end date and booking status filters

  • Submit button

  • Text element to display errors and other messages

  • Repeater to display the booking data



Code


  1. For security best practices, verify that the visitor is a logged-in member with an Admin role both on the client side and backend (code is inactive in the example).

  2. Initialize the filters and set default values.

  3. Set the repeater onItemReady event to show the relevant booking data.

  4. Use the backend getBookings() function to return the bookings data based on the date and status filters.

  5. Display the returned bookings data in the repeater.

  6. Display error messages if needed.


The queryBookings() function returns, by default, only the booking data of the logged-in member. In order to query all booking data, we added the option {“suppressAuth”: true}. 



Security best practices


  1. Verify that the visitor is a site member with an Admin role on client side and on the backend. The code is provided in a comment. 

  2. Build the example as a dashboard page. Dashboard pages can be accessed only by site administrators.

  3. If the page is not a dashboard page then restrict page access to admin members only.

  4. Restrict backend function access to admins only.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Service List

Service List

Filter a list of services and view the next available slot.

Intermediate.png

Intermediate

Replace Bookings Calendar page

Replace Bookings Calendar page

Replace the default Wix Booking Calendar on your site with a tailored version to better suit your needs.

Intermediate.png

Intermediate

Quick Book and Pending Appointments

Quick Book and Pending Appointments

Let customers quickly book appointments, which are then approved or declined.

Intermediate.png

Intermediate

Limit the number of bookings per contact in a week with ECOM Validations SPI

Limit the number of bookings per contact in a week with ECOM Validations SPI

Limit each site member’s bookings to no more than three per week.

Intermediate.png

Intermediate

Custom Book flow on Booking V2

Custom Book flow on Booking V2

Let Customers Experience your swift and customized appointment booking process with Bookings V2 APIs.

Intermediate.png

Intermediate

Round Robin appointment scheduling

Round Robin appointment scheduling

Allow bookings with no staff selection, creating Round Robin scheduling - evenly spread the bookings among staff members

Intermediate.png

Advanced

Anchor 2
bottom of page