Skip to main content

Modal

We can define some fields that will be displayed in a modal. This can be useful to display some information to the user and organize the form in different parts. For a modal component, 2 properties are required: properties and modal. As a group or a section, the properties property is used to define the fields that will be displayed in the modal. The modal property is used to define the modal UI. The modal is set to being scrollable if the content of the modal is bigger than 70% of the height of the screen. Note that all the text that can be defined for the modal can be translation keys.

There is 2 ways to define a modal:

"as": "modal"​

For a group, or a section, we can define a modal by adding the as property with the value modal to the group or section. This will display the fields defined in the group or section in a modal. Note that it only works for "type": "group" or "type": "section" elements. It does not work elsewhere.

Example for a group:

{
  "policy_owner": {
    "type": "group",
    "as": "modal",
    "properties": {
      "first_name": {
        "component": "text",
        "label": "First name"
      },
      "last_name": {
        "component": "text",
        "label": "Last name"
      }
    },
    "modal": {
      "field": {
        "label": "Define policy owner"
      },
      "openButton": {
        "label": "See policy owner"
      },
      "footer": {
        "closeButton": "Close"
      },
      "header": {
        "title": "Policy owner"
      }
    }
  }
}

In this example, all the fields defined in the properties of the policy_owner group will be displayed in a modal. It will have the same behavior as a group, meaning that the data related to the fields will not be prefixed by the group name. So the output will be:

{
  "first_name": "John",
  "last_name": "Doe"
}

Group as Modal Storybook Example​

Group as Modal#

Example for a section:

{
  "policy_owner": {
    "type": "section",
    "as": "modal",
    "properties": {
      "first_name": {
        "component": "text",
        "label": "First name"
      },
      "last_name": {
        "component": "text",
        "label": "Last name"
      }
    },
    "modal": {
      "field": {
        "label": "Define policy owner"
      },
      "openButton": {
        "label": "See policy owner"
      },
      "footer": {
        "closeButton": "Close"
      },
      "header": {
        "title": "Policy owner"
      }
    }
  }
}

In this example, all the fields defined in the properties of the policy_owner section will be displayed in a modal. It will have the same behavior as a section, meaning that the data related to the fields will be prefixed by the section name. So the output will be:

{
  "policy_owner": {
    "first_name": "John",
    "last_name": "Doe"
  }
}

Section as Modal Storybook Example​

Group as Modal#

"type": "modal"​

We can define a schema that will be a type: "modal", and it will display the fields defined in the schema in a modal.

Example:

{
  "policy_owner": {
    "type": "modal",
    "properties": {
      "first_name": {
        "component": "text",
        "label": "First name"
      },
      "last_name": {
        "component": "text",
        "label": "Last name"
      }
    },
    "modal": {
      "field": {
        "label": "Define policy owner"
      },
      "openButton": {
        "label": "See policy owner"
      },
      "footer": {
        "closeButton": "Close"
      },
      "header": {
        "title": "Policy owner"
      }
    }
  }
}

In this example, all the fields defined in the properties of the policy_owner modal will be displayed in a modal. The output will be the same as the group example.

Storybook Examples​

Modal#

Modal#

The modal UI is defined in the modal property. It contains 5 properties: field, openButton, footer, header, modalProps.

field​

The field property is used to define the label of the modal. The modal component is shown like a field in the form. So we can define a label that will be displayed before the button that opens the modal. As an input, we can set label to false to hide the label. We also can define the inline property to true to display the button and the label inline (true by default). If we set it to false, the button will be displayed below the label. Note that as an input, you can also set a tooltip to the label by adding the tooltip property.

Example:

{
  "label_not_inline": {
    "type": "group",
    "as": "modal",
    "properties": {
      "first_name": {
        "component": "text",
        "label": "First name"
      },
      "last_name": {
        "component": "text",
        "label": "Last name"
      }
    },
    "modal": {
      "field": {
        "label": "Label of the modal",
        "inline": true,
        "tooltip": "This is a tooltip"
      },
      "modalProps": {
        "size": "lg"
      },
      "openButton": {
        "label": "See policy owner",
        "block": true,
        "color": "warning",
        "size": "sm"
      },
      "footer": {
        "closeButton": "Close",
        "closeButtonProps": {
          "color": "primary",
          "outline": true,
          "size": "sm"
        }
      },
      "header": {
        "title": "Policy owner"
      }
    }
  }
}

openButton​

We can define the button that will open the modal. It has the same properties as a button component, like label, block, color, size. Also, only for this button, we can define the as property to link to display the button as a link. Only the link value is accepted, to have a normal display, we should not define the as property.

Example of the open button:

{
  "openButton": {
    "label": "See policy owner",
    "block": true,
    "color": "warning",
    "size": "sm"
  }
}

We can define the footer of the modal, it"s basically a button that will be displayed at the bottom of the modal. It has the same properties as a button component, like closeButton, and closeButtonProps. The closeButton is the label of the button, and the closeButtonProps is the props of the button, the same properties that the open button has.

Example of the footer:

{
  "footer": {
    "closeButton": "Close",
    "closeButtonProps": {
      "color": "primary",
      "outline": true,
      "size": "sm"
    }
  }
}

We can define the header of the modal, basically the title of the modal.

Example of the header:

{
  "header": {
    "title": "Policy owner"
  }
}

modalProps​

We can define the props of the modal, it has the same properties as a modal component, like size. For the size, 3 values are available: sm, lg, fullscreen. lg is the default value.

Example of the modalProps configuration:

{
  "modalProps": {
    "size": "lg"
  }
}

Examples:

{
  "small_modal": {
    "type": "group",
    "as": "modal",
    "properties": {
      "first_name": {
        "component": "text",
        "label": "First name"
      }
    },
    "modal": {
      "field": {
        "label": "Small modal"
      },
      "modalProps": {
        "size": "sm"
      },
      "openButton": {
        "label": "open"
      },
      "footer": {
        "closeButton": "Close",
        "closeButtonProps": {
          "size": "sm"
        }
      },
      "header": {
        "title": "Small modal"
      }
    }
  },
  "large_modal": {
    "type": "group",
    "as": "modal",
    "properties": {
      "first_name": {
        "component": "text",
        "label": "First name"
      }
    },
    "modal": {
      "field": {
        "label": "Large modal (default)"
      },
      "modalProps": {
        "size": "lg"
      },
      "openButton": {
        "label": "open"
      },
      "footer": {
        "closeButton": "Close",
        "closeButtonProps": {
          "size": "sm"
        }
      },
      "header": {
        "title": "Large modal"
      }
    }
  },
  "fullscreen_modal": {
    "type": "group",
    "as": "modal",
    "properties": {
      "first_name": {
        "component": "text",
        "label": "First name"
      }
    },
    "modal": {
      "field": {
        "label": "Fullscreen modal"
      },
      "modalProps": {
        "fullscreen": true
      },
      "openButton": {
        "label": "open"
      },
      "footer": {
        "closeButton": "Close",
        "closeButtonProps": {
          "size": "sm"
        }
      },
      "header": {
        "title": "Fullscreen modal"
      }
    }
  }
}

For the content, the modal is set to being scrollable if the content of the modal is bigger than 70% of the height of the screen. The fields defined in the modal are considered as visible so they will be taken into account to the form data gestion. Even if the modal is not open, if the fields contains errors, the form will be marked as invalid. When closing the modal, the fields are not cleared, so the data will be kept. The modal component is only a way to display the fields in a modal, it is not intended to provide other behaviors than that.

Validations​

The modal component is not intended to provide validations, but the fields defined in the modal are considered as visible so they will be taken into account to the form data gestion. Even if the modal is not open, if the fields contains errors, the form will be marked as invalid. If the fields in the modal are not valid, the button that opens the modal will be marked as invalid. An error message is shown under the button if the button is invalid. We can change the error message by adding the errorLabel property to the field property.

Example:

{
  "policy_owner": {
    "type": "group",
    "as": "modal",
    "properties": {
      "first_name": {
        "component": "text",
        "label": "First name",
        "validations": ["required"]
      },
      "last_name": {
        "component": "text",
        "label": "Last name",
        "validations": ["required"]
      }
    },
    "modal": {
      "field": {
        "label": "Preneur d"assurance",
        "errorLabel": "Veuillez renseigner les champs requis"
      },
      "openButton": {
        "label": "Voir les informations du preneur",
        "size": "sm"
      },
      "footer": {
        "closeButton": "Fermer",
        "closeButtonProps": {
          "color": "secondary",
          "size": "sm"
        }
      },
      "header": {
        "title": "Preneur"
      }
    }
  }
}

In this example, if the fields are not valid, the button will be marked as invalid and the error message will be "Veuillez renseigner les champs requis".