Kuika's Email element allows users to enter data in a valid email address format. Unlike a standard Text Input element, the Email element ensures that the entered value is in a valid format by checking for the “@” and “.” characters. This ensures that the data received from the user is reliable in terms of accuracy.

Supported in both web and mobile applications.

Areas of Use

• Email entry on login and sign-up screens
• Forgot Password screens
• Contact forms
• Email verification steps
• Notification preferences or newsletter subscriptions

Use Case – Login Screen

On a login screen, users must enter a valid email address to access the application. The Email element detects and alerts users if they enter an email address in an invalid format.

In the scenario:

• The user arrives at the “Welcome Back” screen.
• They enter their email address in the “Email Address” field.
• The Email element performs format validation (example: name@domainname.com).
• If the email is entered in the correct format, the user enters their password and clicks the “Login” button.
• If the format is incorrect, a warning message is displayed and the login process is stopped.

Connecting the Data Source

1. Go to the Datasources module.
2. From the Tables area, create a new table using the + Add New Table option and name it UserAccountsEmail.
3. Add the following fields:

4. Then go to the SQL Actions tab.
5. Create a new action: LoginUser
6. Enter the following SQL query:

‍SELECT *FROM UserAccountsWHERE Email = @Email AND PasswordUser = @PasswordUser;

This query checks for the user matching the entered email and password.

UI Design Module Operations

1. Go to the UI Design module.
2. Select the Email element from the Elements → Text Input → Email category on the left side.
3. Drag and drop the Email element onto your screen.
4. Configure the following settings in the Properties panel:

• Placeholder: “name@domainname.com”
• Allow Clear: Active
• Value: userEmail (optional dynamic binding)

5. Add a Password element below it.
6. Then add a Button element (Label: “Login”).
7. Define the following action for the button:

• onClick → Managed DB → Custom SQL Action (LoginUser)

8. Parameters:
   
   • Email → EmailInput.value
   • Password → PasswordInput.value
9. If the query returns no results, display the message “Invalid email or password” to the user.

Using Properties in a Scenario Context

• Value: Represents the value entered in the Email element or coming from the data source.
• Placeholder: Shows the user an example format (e.g., “name@domainname.com”).
• Allow Clear: Allows the user to easily clear the entered value.

When the Scenario Step is Complete

• The user enters their email address and password.
• The email format is automatically checked.
• If the format is valid and the information is correct, the user logs into the system.
• If an incorrect email format is entered, an error message is displayed.

Restrictions

• Format checking in the Email element is performed only on the “@” and “.” characters.
• Additional JavaScript or Regex validation is required for advanced field validations (e.g., domain checking).
• If the email field is empty, the form will not be submitted.
• Multiple email addresses registered to the same table should not be allowed.

Tips and Best Practices

• Use a valid format example in the Placeholder section: name@domainname.com
• Enhance the user experience by keeping the Allow Clear feature enabled.
• The email keyboard opens automatically on mobile devices, which speeds up form filling.
• Provide users with an alternative access option by offering a “Forgot my password?” link.
• Email addresses should be case-insensitive (e.g., KUİKA@domain.com ≈ kuika@domain.com).