CiviForm Docs
HomepageAboutContact
Search
⌃K
Links

Adding a new question type

1. Add the new type and type definition

  1. 1.
    Add a new enum to QuestionType. Please maintain alphabetical ordering
  2. 2.
    Add a new question type definition class that extends QuestionDefinition​
  3. 3.
    Add logic in QuestionDefinitionBuilder to handle the new type

2. Implement additional validation or configuration logic

  1. 1.
    Implement a MyTypeValidationPredicates class on MyTypeQuestionDefinition
  2. 2.
    Add error messages to display to ValidationErrorMessages​

3. Add rendering logic for applicant views

  1. 1.
    Add a new MyTypeQuestion class - use TextQuestion as an example
  2. 2.
    Update ApplicantQuestion to handle the new type
  3. 3.
    Add a new MyTypeQuestionRenderer that uses j2Html to render the question. See TextQuestionRenderer for an example
  4. 4.
    Update ApplicantQuestionRendererFactory to handle the new type and delegate to the new renderer
  5. 5.
    Check for validation errors and display them
    1. 1.
      Update MyTypeQuestion to check for errors
    2. 2.
      Add field errors to MyTypeQuestionRenderer

4. Add question form for applicant submission

  1. 1.
    Add a new MyTypeQuestionForm class - see TextQuestionForm as an example
  2. 2.
    Update QuestionFormBuilder to create the right form by question type

5. Allow the admin to create questions of this new type

  1. 1.
    Update QuestionConfig to handle the new type. If the new question type has custom validation or configuration options, add logic for rendering those inputs here.
  2. 2.
    Select an appropriate icon for this question type from Heroicons. Copy the SVG code for the desired icon and use it in Icons for your new type

5. Test!

  1. 1.
    Add unit tests for the new types
  2. 2.
    Run the app locally and test the following:
    1. 1.
      Admin flow
      1. 1.
        Can you add a new question of this type?
      2. 2.
        Can you edit the question?
      3. 3.
        Does the icon look as intended?
    2. 2.
      Applicant flow
      1. 1.
        Can you fill out the question?
      2. 2.
        Do error messages render correctly
  3. 3.
    Add a helper function in the browser tests for the new question type: admin_question.ts and applicant_questions.ts​
  4. 4.
    Add a focused browser test for the new question type: e.g. checkbox.test.ts​
Previous
Internationalization (i18n)
Next
Deploy system
Last modified 8mo ago