SharePoint-Warteliste für Veranstaltungen in der Buchungsapp

Wir haben euch bereits unsere Applikation für Veranstaltungs‑Buchungen vorgestellt. Sind bereits alle Plätze für einen Termin einer Veranstaltung vergeben, haben wir nun die Funktionalität für eine Warteliste hinzugefügt. In diesem Beitrag möchten wir euch genauere Einblicke in die Umsetzung von Smarter Event Booking geben.

Anmelden zur Veranstaltungs-Warteliste

Ein Benutzer hat die Möglichkeit, sich zu einem Termin einer Veranstaltung anzumelden. Jeder Termin hat jedoch eine fixe Teilnehmerzahl. Wurden bereits alle Plätze gebucht, stellen wir dies mit einem Hinweis beim Termin dar. Ein Benutzer hat dann die Möglichkeit, sich auf eine Warteliste für diesen Termin setzen zu lassen. Dafür klickt er einfach auf den Button „Auf die Warteliste“.

Wenn sich dann ein Benutzer, welcher den Termin gebucht hat, abmeldet, rückt der nächste Benutzer von der Warteliste automatisch nach. Er ist damit für den Termin angemeldet und wird per E-Mail verständigt.

Außerdem hat ein Benutzer die Möglichkeit, sich wieder von der Warteliste abzumelden.

Technische Umsetzung

Für die Warteliste haben wir ein neues Feld „Warteliste“ vom Typ „Mehrere Textzeilen“ in der Terminliste hinzugefügt. Dort speichern wir die ID, den Namen und die E‑Mail‑Adresse der Benutzer für die Warteliste im JSON‑Format.

Beispiel:

[{"id":13,"title":"Verena Schönleitner","email":"verena@openinnovationhub.onmicrosoft.com"}]

Meldet sich ein Benutzer für die Warteliste an, fügen wir ihn in das Feld „Warteliste“ ein.

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]),
  });

Meldet sich ein Benutzer ab, der den Termin gebucht hat, lesen wir die Warteliste aus. Wir entfernen den ersten Benutzer der Warteliste und fügen ihn zu den Teilnehmern hinzu. Den Benutzer informieren wir darüber per E‑Mail.

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);
}

Fazit

Die integrierte Warteliste sorgt dafür, dass freie Plätze automatisch nachbesetzt werden und alle Beteiligten informiert bleiben. Habt ihr Interesse an weiteren Details zu unserer SharePoint‑Veranstaltungs‑Warteliste? Dann nehmt gerne Kontakt mit uns auf.

Kontakt aufnehmen