Implementing Attendee Forms in Wizard of Open Event Frontend
This blog post illustrates on how the order form is included in the attendee information of the Open Event Frontend form and enabling the organizer to choosing what information to collect from the attendee apart from the mandatory data i.e. First Name, Last Name and the Email Id during the creation of event itself. The addition of this feature required alteration in the existing wizard flow to accommodate this extra step. This new wizard flow contains the step : Basic Details : Where organizer fills the basic details regarding the event.Attendee Form : In this step, the organizer can choose what information he/she has to collect from the ticket buyers.Sponsors : This step enables the organizer to fill in the sponsor detailsSession and Speakers : As the name suggests, this final step enables the organizer to fill in session details to be undertaken during the event. This essentially condensed the flow to this : The updated wizard checklist To implement this, the navigation needed to be altered first in the way that Forward and Previous buttons comply to the status bar steps // app/controller/create.jsmove() { this.saveEventDataAndRedirectTo( 'events.view.edit.attendee', ['tickets', 'socialLinks', 'copyright', 'tax', 'stripeAuthorization'] ); } //app/controller/events/view/edit/sponsorshipmove(direction) { this.saveEventDataAndRedirectTo( direction === 'forwards' ? 'events.view.edit.sessions-speakers' : 'events.view.edit.attendee', ['sponsors'] ); } Once the navigation was done, I decided to add the step in the progress bar by simply including the attendees form in the event mixin. // app/mixins/event-wizard.js { title : this.l10n.t('Attendee Form'), description : this.l10n.t('Know your audience'), icon : 'list icon', route : 'events.view.edit.attendee' } Now a basic layout for the wizard is prepared, all what is left is setting up the route for this step and including it in the router file. I took my inspiration for setting up the route from events/view/tickets/order-from.js and implemented it like this: // app/routes/events/view/edit/attendee.jsimport Route from '@ember/routing/route';import CustomFormMixin from 'open-event-frontend/mixins/event-wizard';import { A } from '@ember/array';export default Route.extend(CustomFormMixin, { titleToken() { return this.l10n.t('Attendee Form'); }, async model() { let filterOptions = [{ name : 'form', op : 'eq', val : 'attendee' }]; let data = { event: this.modelFor('events.view') }; data.customForms = await data.event.query('customForms', { filter : filterOptions, sort : 'id', 'page[size]' : 50 }); return data; }, afterModel(data) { /** * Create the additional custom forms if only the compulsory forms exist. */ if (data.customForms.length === 3) { let customForms = A(); for (const customForm of data.customForms ? data.customForms.toArray() : []) { customForms.pushObject(customForm); } const createdCustomForms = this.getCustomAttendeeForm(data.event); for (const customForm of createdCustomForms ? createdCustomForms : []) {…