In this blog we will see the implementation of custom form for session and speakers form. Since every event organiser requires different fields required to be filled by speakers for their sessions, for ex. Some event organiser may need GitHub profile whereas other may need LinkedIn profile so, we implemented custom form for session and speaker form in Open Event Frontend so that every organiser can choose fields he/she requires to be filled by his speakers who are filling their proposal. Custom form allows following features:
- Allows organiser to choose whether he wants a particular field or not.
- Organiser can make a field compulsory, so that no speaker can submit his proposal without filling that field.
So, to get started we define our getCustomForm() method in mixins and it looks something like this:
import Mixin from '@ember/object/mixin'; import MutableArray from '@ember/array/mutable'; export default Mixin.create(MutableArray, { getCustomForm(parent) { return [ this.store.createRecord('custom-form', { fieldIdentifier : 'title', form : 'session', type : 'text', isRequired : true, isIncluded : true, isFixed : true, event : parent }), this.store.createRecord('custom-form', { fieldIdentifier : 'subtitle', form : 'session', type : 'text', isRequired : false, isIncluded : false, event : parent }), this.store.createRecord('custom-form', { fieldIdentifier : 'shortAbstract', form : 'session', type : 'text', isRequired : false, isIncluded : true, event : parent }), ...
Here we define all the possible fields with their properties. Every field has different properties that enables us to identify whether to choose or reject them. So to enable this these fields to be chosen by organiser we need to feed them into model.
In our session-speakers-step.js in components we assign these fields to our model thorugh this:
didInsertElement() { if (this.get('data.event.customForms')&&!his.get('data.event.customForms.length')) { this.set('data.event.customForms', this.getCustomForm(this.get('data.event'))); } }
This hook gets called when our component is rendered and custom form fields gets assigned to data.event.customForms in our model.
In our handlebars template we create sliders to enable organiser to choose whether he wants to enable a field or not.
In our template logic we write a loop that renders these sliders for each fields and manipulate them as organiser slides any slider for a field. Let’s take a look at the template code block:
<tbody> {{#each customForm.session as |field|}} <tr class="{{if field.isIncluded 'positive'}}"> <td class="{{if device.isMobile 'center' 'right'}} aligned"> <label class="{{if field.isFixed 'required'}}"> {{field.name}} </label> </td> <td class="center aligned"> {{ui-checkbox class='slider' checked=field.isIncluded disabled=field.isFixed onChange=(action (mut field.isIncluded)) label=(if device.isMobile (t 'Include'))}} </td> <td class="center aligned"> {{ui-checkbox class='slider' checked=field.isRequired disabled=field.isFixed onChange=(action (mut field.isRequired)) label=(if device.isMobile (t 'Require'))}} </td> </tr> {{/each}} </tbody>
Every slider has a action attached to it that manipulates a property of the custom for and on proceeding it saves the custom form model to server.
Later on when rendering for for speaker we fetch details from server about which fields are required or not.