Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • Guidelines
  • Save Bar
  • Behaviors
  • Limitations
  • Create an object in a form through a modal

Was this helpful?

  1. Design
  2. Patterns
  3. Forms

Form - In a modal

Last updated 1 year ago

Was this helpful?

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)

Guidelines

Save Bar

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

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

Behaviors

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.

Save action closes the modal and triggers a on the main page

Same as a regular creation form

snackbar
error management
Form in a modale