Form - In a modal

Overview

For forms, the main guideline is to display it in a dedicated page. But in few cases it may be complex to create a new page for a form. Thus, to ease the experience, in those cases you may create a form in a modal :

• When there are not many fields (3 to 5 fields)

• When forms are embedded (a form in an another form)

• When creating an object in a form (create a rule, add a parameter (...) in a form)

Form in a modale

Guidelines

Save Bar

• Visibility: The Save Bar is always shown in a form in modal

• Functionality: Both 'Save' and 'Cancel' buttons are enabled

Behaviors

• Save action closes the modal and triggers a snackbar on the main page
• Same error management as a regular creation form

Limitations

A modal should not trigger another modal. You may be obliged to do so, but be aware of possible poorer experience. You should test your mock-up in those cases to be sure users are able to navigate through the form.

Thus, those inputs may be complex to use in a form within a modal:

• DateRange Picker

• Date Time Picker

There is one component that can never be used in a form within a modal :

• Advanced Picker

However, a modal can trigger overlays such as Dropdowns, Tooltips, etc.

Create an object in a form through a modal

When a form involves creating an object, it’s important to determine whether the object should be created within the form itself or through a modal.

1. Simple Objects:

   • If the object is simple and requires only a few fields, use a specific panel or a card within the form.

   • This approach is less intrusive and allows users to quickly input necessary information without navigating away from the form.

2. Complex Objects:

   • When the object involves dynamic blocks with more than one field, it is better to use a modal.

   • Modals provide more flexibility and space to handle complex data inputs.

3. Benefits of Using Modals:

   • Separation of Concerns: Modals allow for a clear distinction between the main form and the sub-form used for creating the object.

   • Error Management: It becomes easier to handle errors specific to the object creation separately from those of the main form.

   • Data Management: Results from the modal can be returned and displayed in a datatable within the main form, ensuring a clear organization of nested objects.

4. Implementation Tips:

   • Ensure the modal is user-friendly and intuitive, providing clear instructions and feedback.

   • Use appropriate validations and error messages within the modal to ensure data integrity.

   • Upon successful creation of the object, update the datatable in the main form to reflect the new data without requiring a full page refresh.