Add input option on form components

The form components in the Page builder default component set have been upgraded with a new feature, allowing users to add inputs directly via an option in the sidebar, in addition to the already available drag-and-drop method. This update also enables users to add inputs within locked widgets or page templates, making form modifications more accessible for those without unlocking permissions.

Key benefits

1. Improved accessibility - Users who lack permission to unlock page templates or widgets can now add form inputs seamlessly.
2. Enhanced usability - Form modifications are among the most frequent tasks in app development. By introducing a hybrid solution for adding new inputs - both sidebar option and drag-and-drop - we cater to various user roles and skill levels.

New features

To address this need, we have introduced the following new features:

• Add input option - Users can now initiate the input configure wizard to add new form inputs by clicking an option in the sidebar of form components.
• Updated configure wizard - The original configure wizard for inputs has been replaced with an updated wizard supporting all the necessary capabilities. This wizard appears both when selecting the option and when using drag-and-drop to add inputs to the canvas.
• Back office template integration - The add input option is now available within the Back office page template, allowing form updates even in a locked state.

How this new feature works

1. Using the 'add input' option - Selecting this option from the sidebar launches a configuration wizard. You will notice that the configure wizard has been updated: 
   
   
   The 'old' configure wizard.
   
   
   The 'updated' configure wizard shown now.
   
   
2. Choosing an input component - When using the add input option, users can select from a dropdown displaying all available input components, complete with names and icons.
3. Binding options - Users can determine how to bind the new input to their form:
   1. Property-based - Select an existing model property to bind to the input. The list is filtered based on the chosen component. Users can also create new properties within this flow as they are used to.
   2. Non-property-based - Choose an existing action input variable or create a new one using the provided text input field, which is displayed by default.
4. Saving the new input - Once configured, clicking 'Save' adds the new input as a direct child of the form, positioned at the bottom of the list, even below the Submit button (if available).
5. Synchronizing action step mapping - If the input is added property-based, the form change is synchronized to the value mapping option of the autogenerated create or update action step. Learn more about this specific feature here.
6. Reordering inputs - If drag-and-drop is available, users can reposition the input manually by selecting and moving them around. Otherwise, they can use the reconfigure option - also present in the sidebar - to adjust the order of form components. Learn more about this option here.

Back office page template 

This update also enables users to add inputs within locked widgets or page templates, making form modifications more accessible for those without unlocking permissions.

This is ensured by exposing the Add input option on the forms all the way up to the page wrapper options, which are accessible in a locked state: 

Limitations

Every feature has its scope. It's a great principle to make this known:

• Forms with multi column layouts - In multi-column form layouts, the "Add Input" option currently appends new inputs below the last child component, rather than integrating them within the multi-column structure.
• Saving the wizard - Currently, the Enter key does not function as expected when saving the configuration wizard while adding inputs. This functionality will be improved in future sprints.
• Versioning: The update applies only to the latest version of the Form components in the default component set. Existing components already in use will not be updated automatically.
  This is also the case for all pages already created based on the Back office page template. Existing pages will not be updated automatically.