How to Create an Admin Page to Manage Booking Requests (Part 2/2) | Velo by Wix

In the first part of this video tutorial, we used the WIX Bookings API to create a quick booking form for your services. In this video, I'll show you how to build an admin page to manage all your booking requests. You'll be able to view pending appointments and approve or dismiss them from this page. Before you begin, make sure code is enabled for the design of the admin page, you'll use two repeaters. Go to Add Lists and Grids and select a repeater. The first repeater will include client details for all your pending appointments. Go to Add Text and Add Text Elements. To set up the repeater, select the element, click Edit Text and change it to Full Name. Then, from the Properties Panel, change the ID to name, add four additional text elements, and change their IDs to age, label, age, date, and time, respectively. These IDs will be used later in your code to approve or dismiss incoming requests. Add two buttons here. Go to Add button and choose a design that works with your site. Change the IDs of these buttons to Approve button and Dismiss button, respectively, then select the repeater. From the Properties panel, change its ID to Requests Repeater. Layer a container box with an additional text element over this repeater, Change the text to no Pending Requests. This text will appear when you don't have any pending requests. From the Properties panel, change the ID of the container box to no Pending Requests and select Hidden on Load. The second repeater will display appointments you've dismissed. Repeat the same steps as before, but add the following IDs to your text. Dismissed Name, Dismissed Age, Label, Dismissed Age, and Dismissed Email. Add a Contact button and change its ID to Email button. You'll use this button to notify clients when their request is dismissed. From the Properties panel, change the ID of this repeater to Dismissed Requests. All of these IDs will be used later in your code. Next, go to Add Database and add a data set for the pending appointments. Then click Settings. Under Connect a collection, connect it to the Pending Appointments Collection. Change the dataset's name to Pending Requests Dataset, and under mode, choose Read Only. Then go to Filter and click Add Filter. For field, choose Status Condition is Enter Pending as the value, and click Add Filter. Next, go to Sort and click Add Sort. For this field, choose Updated Date and select Old to New as the order. Then, from the Properties panel, change this dataset's ID to Pending Requests. Dataset. Connect the Requests repeater to the dataset. Click on the Repeater. Connect to Data, and under Connect a dataset, choose the Pending Requests Dataset. Then Data bind the Name and Age text elements to the Name and Age fields in the Pending Requests collection. Repeat this process for the Dismissed Requests repeater. However, this time when you add the data set, rename it Dismissed Requests Dataset and enter Dismissed as the value for the filter. Then click Add Filter. Add the same sorting options as before. Then change the dataset's ID to Dismissed Requests Dataset. Connect the repeater to the Dismissed Requests dataset, and Data bind the Dismissed name, Dismissed Age, and Dismissed email text elements to the collection's Name, Age, and email fields, respectively. Now let's revisit the Pending Appointments collection from the previous video. From the Site Structure sidebar on the left, go to Database and click on the Pending Appointments collection. You'll notice the following field Email Name and Age. These fields hold info from the clients that have requested to book a service. The Status field will show if a request is pending, approved, or dismissed, while items in the last field Requested slot are objects that represent bookings made with the Bookings API. The requested slot is added by the code when clients submit their booking request. Now that you have a better understanding of this collection, you'll write code that adds functionality to your admin page. To start, open the code panel at the bottom of the page here. Then import three Web WIX Data, WIX Bookings, and WIX Location. The WIX Data module allows you to work with your database collection. WIX Bookings lets you book approved requests, and in this example, WIX Location will open your default email provider so you can contact customers if you dismiss the request. Next, add an onready function for the Pending Request Dataset. This function waits for your dataset to load. Then it uses gettotalcount to check if you have any pending requests. If you have pending requests, they'll appear in your requests repeater. If not, the no Pending Requests message will appear. Now you'll add the core of your code. You may see some errors in the next few lines, but that's okay. You'll be adding helper functions later. To resolve these for now, select the Requests Repeater from the Properties Panel Hover over OnItem Ready, click the plus sign and hit Return or Enter on your keyboard. The ONITEM Ready function will automatically be added to your code. This function iterates over data from the Pending Appointments collection. You'll use this function to connect data to relevant elements in the request repeater. Next, define a new variable Slot. This variable holds each client's requested time slot. Then create another variable, Start. This variable gets the start, date, and time from each of your slots. Now use dollar item to specify individual date elements from your request's repeater. Assign this Property to the GetDate function with the Start variable as a parameter. Do the same for time elements in your repeater, only this time you'll use the gettimeofday function with Start as the parameter. These helper functions will work together to populate your repeater, displaying dates and times for each booking request. Proper formatting of date and time will be done later in your code. Create an onclick event for the Dismiss button. Make sure the event is async. Then disable your Dismiss and Approve buttons. Next, use the Await command to call the dismissrequests function with item data as a parameter. Repeat this process for the Approve button, but this time call the approverequest function with itemdata as a parameter. You'll write these functions later in your code. Next, add functionality to the Dismissed Requests repeater. Select the repeater and add another OnItemReady event. Then use Dollar Item to add an OnClick event to your Contact button. Create the variable subject and define it with an email subject line like thanks for getting in touch. Next, use WIX location to with a template literal. Enter a mail to link with itemdata, email, and Subject as parameters. This launches your default email provider pre populating an email with the Dismissed client's email address and your custom subject line. Now create an async function dismissrequest with a Pending Request parameter. Change the Pending request status to dismissed. Then use WixData Update on your Pending Appointments collection with the updated Pending Request status. This updates the status of booking requests in your collection. Dismissed requests will be labeled as Dismissed. Additionally, these requests will appear in the Dismissed Requests repeater. Now call the function refreshdata. This function refreshes your datasets, making sure each repeater is up to date. Approved requests will no longer appear as pending in the requests. Repeater and Dismissed ones will show up in the Dismissed requests repeater. You'll write this function later in your code. Next, create an async function approverequest, with Pending requests as the parameter. Then add a slot variable and assign it to pendingrequests requestedslot. This variable acts as an object in the WIX Bookings module. Add a new variable Service using the GetServiceHelper function with the slots service ID. The service variable gets data from your bookings collection. You'll use this data later in a function that finalizes bookings. Next, create an array and name it form fields this array holds client details from your QuickBooking form. Each object in the array represents a field from your form, such as full name or age. Use the get field ID Helper function with the Service variable and the field you want to call in this case name to get the relevant object id. Then add a value property and assigned it to pendingrequests name. Now add another object to the array. For email, use the same Helper function with the Service variable and the field you want to call this time Email. Then add another value property and assign it to Pending requests. Email to hold the data in your array and complete checkout. Create a new object Booking Info. Then use the Slot and Form fields variables as its properties. Now create a variable for booking response and call the wixbookings checkoutbooking with the Booking Info object. This code uses the object's data to book appointments and return a response. Next, add an if condition for confirming appointments. If the booking response status is confirmed, then the Pending request status changes to Approved and updates your collection using Refresh Data. If the booking request isn't approved, the Approve button will be enabled so you can try again. Now it's time to add code for the helper functions. Start by creating the GetService function. This returns the correct service from your bookings collection using WixData, GET and a specific ID. Then add the getfieldID function to return relevant IDs for fields in your collection. Next, use the Refresh Data function to update your datasets as you approve or dismiss booking requests and display the no Pending Requests message if you don't have pending requests. Finally, add a couple of date helper functions. The gettimeofday function will get the time and return it formatted as AM or pm. Meanwhile, the getdate function receives a date and returns it in the format of day, month, year. Now you're all set. Click Save and publish your site to view your admin page in action. All your pending requests show up in the first repeater. Use the buttons to approve requests that work for you and your staff, or dismiss those that you can't fit into your schedule right now. Once you've confirmed a booking request, you'll notice it no longer appears in the Pending Appointments repeater. Depending on your site settings, an automated email with the booking details will be sent to your client. Meanwhile, all Dismissed requests will automatically populate the Dismissed Requests repeater here. When you click Contact, you'll be able to reach out to those clients with alternative time slots or staff and work towards building positive customer relationships. Now you're ready. This video is always here, so come back and watch it again whenever you need help. You can also visit our documentation page for tutorials, articles, example code, and more.