We’ve already introduced our event booking application. When all seats for a given event date are taken, our new waitlist feature steps in. In this post, we share how we implemented it in Smarter Event Booking.
Join the event waitlist
Users can register for specific event dates. Each date has a fixed capacity. If all seats are booked, the interface clearly indicates this for that date, and users can add themselves to the waitlist with a single click on “Join waitlist”.
If a registered participant cancels, the next person on the waitlist is automatically promoted to a confirmed attendee, and receives an email notification.
Users can also remove themselves from the waitlist at any time.
Technical implementation
We added a new field “Warteliste” (waitlist) of type “Multiple lines of text” to the event date list. It stores the user’s ID, name, and email address in JSON format.
Example:
[{"id":13,"title":"Verena Schönleitner","email":"verena@openinnovationhub.onmicrosoft.com"}]When a user joins the waitlist, we append them to the “Warteliste” field.
let waitingList: IAttendee[] = listItem.Warteliste
? (JSON.parse(listItem.Warteliste) as IAttendee[])
: [];
const updatedListItem = await sp.web.lists
.getByTitle(this.eventDateList)
.items.getById(eventDate.id)
.update({
Warteliste: this.serializeWaitingList([...waitingList, attendee]),
});When a confirmed attendee cancels, we read the waitlist, remove the first entry, and add them to the attendees. We then notify the promoted user by email.
let existingAttendeeIds = listItem.Teilnehmer !== undefined
? listItem.Teilnehmer.filter((t) => t.Id !== attendee.id)
: [];
const waitingList: IAttendee[] = listItem.Warteliste !== undefined
? (JSON.parse(listItem.Warteliste) as IAttendee[])
: [];
// Moves the first attendee from waiting list up
let waitingListAttendeeElevated = false;
let waitingListAttendee: IAttendee | undefined;
if (waitingList && waitingList.length > 0) {
waitingListAttendee = waitingList.shift();
existingAttendeeIds = [...existingAttendeeIds, waitingListAttendee.id];
waitingListAttendeeElevated = true;
}
const updatedListItem = await sp.web.lists
.getByTitle(this.eventDateList)
.items.getById(eventDate.id)
.update({
TeilnehmerId: { results: [...existingAttendeeIds] },
Warteliste: this.serializeWaitingList(waitingList),
});
// Send mail if attendee moves up from waiting list
if (waitingListAttendeeElevated && waitingListAttendee) {
await this.sendEmailToAttendee(event, updatedEventDate, waitingListAttendee);
}Conclusion
The built‑in waitlist automatically fills freed‑up seats and keeps everyone informed. Want to learn more about our SharePoint event waitlist? Get in touch.
