Custom Form Question

When using the Forms extension, there will be some occasions where the existing question tiles will not support all the features that you need. Using SpringBot, you have the option of creating a custom question tile to use in your forms.

Building a custom question tile

Here in this article, we will walk you through how to create a new text area question.

1. Locate clientside/src/app/lib/behaviours/form/form-questions
2. Create a new folder called form-textarea-question and navigate into the new folder.
3. The next step is to create a new Angular component with a TypeScript file and its accompanying HTML file. Create 2 files: form-textarea-question.component.ts and form-textarea-question.component.html.

4. Insert the following code into form-textarea-question.component.ts:

    import {Component} from '@angular/core';
     import {FormCustomQuestionComponent} from '../form-custom-question/form-custom-question.component';
     @Component({
         selector: 'div[cb-form-textarea-question]',
         templateUrl: './form-textarea-question.component.html',
     })
     export class FormTextAreaQuestionComponent extends FormCustomQuestionComponent {
     }
   

   Look too simple? That’s because you are leveraging the current FormTextfieldQuestionComponent. All question types have been built with a clear hierarchical structure to allow easy management and extension.

5. To add the TextArea to our custom question, we need to modify our new HTML file, which is currently blank. Insert the following code into form-textarea-question.component.html:

    <p class='question__content'>{{ data.questionContent ? data.questionContent : 'Change your question in Options' }}</p>
     <p *ngIf="data.questionSubtext" class='question__sub-text'>{{ data.questionSubtext }}</p>
     <cb-textarea
              *ngIf="formMode !== 'build'"
              [isRequired]="!!data.required"
              [name]="data.name"
              [labelVisible]="false"
              [id]="'question' + data.questionNumber"
              [placeholder]="'Enter your answer here'"
              [(ngModel)]="data.answer"
              [isDisabled]="formMode != 'response'">
     </cb-textarea>
     <cb-textarea
              *ngIf="formMode === 'build'"
              [isRequired]="!!data.required"
              [name]="data.name"
              [labelVisible]="false"
              [id]="'question' + data.questionNumber"
              [placeholder]="'Enter your answer here'">
     </cb-textarea>
     <p *ngIf="data.questionSubtext">{{ data.questionSubtext }}</p>
     <div *ngIf="formMode == 'build'"
              cb-form-post-question
              [data]="data"
              (delete)="onDeleteQuestion()"
              (edit)="onEditQuestion()"
              (duplicate)="onDuplicateQuestion()"
              (changeOrder)="onOrderChange($event)">
     </div>
   

6. Congratulations, you now have a new text area question tile! However, before you can use it you must first register it.

Registering a question tile

Now that our new question is ready, we need to register our new question so that it can be used in the form builder.

1. Locate and open clientside/src/app/lib/behaviours/form/form-questions/form-behaviour-questions.module.ts.

2. Turn on the protected region Add any additional imports here and insert the following line of code:

    import {FormTextAreaQuestionComponent} from './form-textarea-question/form-textarea-question.component';
   

3. Turn on the protected regions Add any additional declaration here, Add any additional exports here and Add any additional entry components here and insert the following line of code:

    FormTextAreaQuestionComponent,
   

4. Locate and open clientside/src/app/lib/behaviours/form/form-utils.ts.

5. Turn on the protected region Add any additional imports here and insert the following line of code:

    import {FormTextAreaQuestionComponent} from "./form-questions/form-textarea-question/form-textarea-question.component";
   

6. Turn on the protected region Add any additional questions types here and insert the following code:

    {
         key: 'TextArea',
         value: 'textarea'
     }
   

7. Turn on the protected region Add any additional question component here and insert the following line of code:

    textarea: FormTextAreaQuestionComponent,
   

8. Turn on the protected region Add any additional question config component here and insert the following line of code:

    textarea: FormCustomQuestionConfigComponent,
   

9. Save the file.
10. You can now add the text area question tile into the form the same way you would one of the default types.

Viewing the New Question Tile

If you followed all the instructions above, you should now be able to add in a Text Area question type from the list of question tiles you normally see. Once selected, it will appear in the form designer.