Skip to content

Resolve "Survey form style"

Bram Wiepjes requested to merge 524-survey-form-style into develop

Aug-24-2022_22-02-29

This merge request introduces the ability to switch to a survey style form view. It's now possible to create form themes via a registry. The "normal" form theme should work exactly how it did before. The premium version now introduces a survey style form. Here, the questions are shown one by one instead of all at the same time.

Form themes

It's now possible to create form themes via a registry. This means that a developer can extend the form functionality by introducing a new theme. A theme is basically the way a form looks, it doesn't change anything about the functionality of the form. I've introduced a new registry named FormViewThemeType. The most important methods are the getPreviewComponent and getFormComponent. The components returned are responsible for previewing/editing the form and for actually showing the form to the visitor when publicly shared. I've introduced a FormViewFormThemeType, which is basically the form how it was before. A lot of code from the FormViewPreview.vue and form.vue has been moved to FormViewThemePreviewForm and FormViewThemeForm. The premium version introduces a FormViewSurveyThemeType which holds all the code for the survey theme. It's deactivated for non premium users.

Testing pointers

  • It should not be possible to change to the survey theme as a non premium. This should also not be possible in the SaaS version where a group is on the subscription.
  • If a survey themed form already exists, it should not be possible to make changes to it as a non premium user.
  • When the user does have premium access, whether it's via account level premium or group level premium (saas) it should be possible to change to the survey theme.
  • The "normal" form theme should work exactly like it did before.
  • It should be possible to navigate through the questions via the button in the bottom right corner.
  • In editing mode, it should be possible to click on "Order fields" in the bottom right corner and drag them into the right corner.
  • When clicking on the "next" button, the input should be validated. Clicking on the down button in the bottom right corner should not trigger the validation.
  • Clicking on "submit" in the last question should check if all fields are valid and navigate to the first one that's not.
  • In editing mode, in the last "fields/question" it should be possible configure a thank you or redirect.

Merge Request Checklist

  • changelog.md has been updated if required
  • New/updated Premium features are separated correctly in the premium folder
  • The latest Chrome and Firefox have been used to test any new frontend features
  • Documentation has been updated
  • Quality Standards are met
  • Performance: tables are still fast with 100k+ rows, 100+ field tables
  • The redoc API pages have been updated for any REST API changes
  • Our custom API docs are updated for changes to endpoints accessed via api tokens
  • The UI/UX has been updated following UI Style Guide

Closes #524 (closed)

Edited by Bram Wiepjes

Merge request reports