Email

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Email” control form wizard. Here you are required to fill in the following details:

  1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
  2. Label Name: Specifies the display name or title for a field or control in the user interface.
  3. Column Width: Specifies the width of a column in a layout or grid system, allowing control over how much space the column occupies relative to others.
  4. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
  5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
    1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon.
    2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

  1. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
    1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.
  2. Confirm Email: A property used to validate and ensure that the email entered matches the intended or original email field for accuracy and consistency. It typically involves re-entering the email for confirmation.
    1. Confirm with control key: A property that allows validation by referencing another control (e.g., a primary email field) to ensure the entered value matches the expected one.
    2. Confirm Email Message: A customizable message displayed to the user if the email confirmation does not match the original email input.

3rd Step – Advance

  1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
  2. Description: Enter extra suggestions for user experience on this field
  3. Align Self: Defines the alignment of a specific item within a flex container, allowing it to override the container's default alignment rules.
  4. Flex: Specifies how a flex item will grow, shrink, or maintain its size within a flex container, determining its proportion relative to other items.
  5. Form Control Margin Bottom: Defines the spacing below a form control element, allowing customization of the vertical gap between controls for better layout and design consistency.

Click “Confirm” and “Email” control is configured.