UI improvements for form builder add/edit process.

Organic Feature

https://invis.io/HGKICLMBATR
https://invis.io/NHRYGE4BJM8
https://invis.io/PN10HL086DMW

https://convertr.atlassian.net/browse/DAS-1235

https://drive.google.com/open?id=0B0Ou1BX7e1gAWC1EMFJYY1htdWM

Product

11/03/21

• Rearrange UI so field controls are in top right of field editor (follows more traditional UI expectations rather than being in various places)

  • 

‘Type’, ‘Name’, ‘Enabled’ toggle are the 3 settings required for a field to be active within a form and are therefore most prominent at the top of each field editor

  • Controls for field in top right of field editor now use consistent UI with rest of platform buttons and controls

  • ‘Required’ toggle and message, ‘Label’, ‘Placeholder’ and 'CSS' class moved onto second row of each field editor, where these settings are deemed as the optional settings for each field

• Consolidate field settings into single dialog (reduces layout shift as fields no longer appear depending on different types, reduces scolling as field height is smaller)

  • 

‘Edit Options', anything under ‘Advanced Options' dropdown (e.g. ‘constraints’, 'default value’) a single dialog tab called 'Options’

  • 

‘Choices' moved into same single dialog as above under ‘Choices’ tab

• Improve the current disjoint between ‘required’ toggle and ‘required message' (before the required message would appear if a checkbox was turned on creating layout shift )

  • Toggle to turn on required message now as a prefix next to the input field

Product

11/03/21

• For ‘settings’ dialog, have tabs:

  • Options tab (HTML type would need default value slapped into this)

  • Choices tab (only available for checkboxes, choice and radio options)

  • Remove ‘constraints’ (will still be available through processr job) and therefore will need to move ‘default value’ into ‘Options’ tab

• On field editor inputs have placeholders for all items that make sense (e.g. required message input could be ‘Required message’)

• For ‘settings’ tab for each fields, have 2 tabs

  • Options tab (HTML type would need default value slapped into this)

  • Choices tab (only available for checkboxes, choice and radio options)

  • Remove ‘constraints’ (will still be available through processr job) and therefore will need to move ‘default value’ into ‘Options’ tab

• Disabled field inputs and settings (https://docs.google.com/spreadsheets/d/1v1_36NJqSetStXY3J1_XQRi1WvZ528isOSHYRm4IB44/edit?usp=sharing - https://convertr.atlassian.net/browse/DAS-1235)