Workflow Form Builder - Field Configuration Guide

This manual provides a complete reference for all field types available in the uKnowva Form Builder under the sections: Basic, Data, Layout, and uKnowva Fields. Each field includes a description, use case, and example.

Field Settings in Form Builder

When creating custom forms in uKnowva HRMS, each field has a set of configurations that allow you to control its appearance, behavior, and validation.

These settings can be grouped into two categories: Common Settings that are available for all fields, and Field-Specific Settings that depend on the type of field you are using.

Understanding these settings helps you design forms that are both user-friendly and functional.

Common Settings for All Fields

The common settings are shared across most form fields and are organized into several tabs: Display, Data, Validation, Conditional, and Layout.

Display Tab

The Display tab contains settings that control how the field appears on the form.

Label Position: Determines where the label for the field is displayed.
Placeholders: The placeholder text appears inside the input field when it is empty, guiding the user on what to enter.
Description: A small text displayed below the input field to give additional instructions or context.
Tooltip: Adds a small icon beside the field, which displays explanatory text on hover.
Autocomplete: Controls whether the browser can automatically fill in values for this field.

Checkbox options include:

Hidden: The field is part of the form but not visible to users.
Hide Label: The label of the field is hidden while remaining visible in the form builder.
Initial Focus: Makes this field the first one focused when the form loads.
Disabled: Prevents users from interacting with this field.
View Access: Select who can view this field from a drop-down, such as Self, Admin, All, Consultants, Employee, Engineering Team, Field Executives, etc.
Edit Access: Select who can edit this field using the same options as View Access.

Data Tab

The Data tab manages the field’s underlying data properties.

Multiple Values: Allows users to enter more than one value for this field.
Default Value: Pre-fills the field before any user interaction. This overrides placeholder text.
Input Format: Forces the field value into a specific format (Plain, HTML, or Raw).
Redraw On: Redraws the field if another component’s value changes, useful for interpolated labels.
Clear Value When Hidden: Automatically clears the field’s value if it is hidden.
Display Mask: Helps display input in a readable format without affecting the saved value. Common placeholders include:

9: numeric
a: alphabetical
*: alphanumeric
Example: Telephone mask (999) 999-9999

Validation Tab

The Validation tab controls when and how the field’s data is verified.

Validate On: Determines when validation triggers (blur, change).
Required: Ensures the field is filled before submission.
Error Label: The label shown if an error occurs.
Custom Error Message: Displays a custom message for validation errors.

Conditional Tab

Conditional settings let you show or hide fields dynamically.

This component should display: Choose True or False to control visibility.
When the form component: Select a component and specify the condition (e.g., has a certain value of a dependent field) that triggers the display.

Layout Tab

The Layout tab provides options to define the HTML attributes for the field’s input element. Attributes here can include classes, IDs, or other custom HTML attributes. Settings from other tabs may override these attributes.

Basic Fields

These are common input elements used in most forms.

1. Text Field

Purpose: To input short text.
Example: Employee Name, Username EMP001

Display Tab:

Custom CSS Class: Add a custom CSS class to the field.
Show Word Counter, Show Character Counter, Hide Input, Allow Spellcheck checkboxes.
Text Cases: Choose how input text should be formatted: Mixed, Uppercase, Lowercase, or Truncate Multiple Spaces.

Data Tab:

Input Format: Forces output in Plain, HTML, or Raw formats.

Validation Tab:

Minimum/Maximum Length: Sets character limits.
Minimum/Maximum Word Length: Limits words.
Regular Expression Pattern: Ensures the field meets a regex pattern.

2. Email

Purpose: To capture email addresses.
Example: This email address is being protected from spambots. You need JavaScript enabled to view it.

3. Text Area

Purpose: To input longer text.
Example: Reason for leave, Comments

Display Tab:

Rows: Sets the number of visible rows.
Editor: You can select a different editor of your choice.
Auto Expand: Automatically increases the text area height as text is entered.
Tab Index: Controls tab order in the form.

Validation Tab:

Minimum Length: This setting defines the minimum number of characters that must be entered in the field before it can be accepted.
Maximum Length: This setting determines the maximum number of characters a user can enter into a field.
Minimum Word Length: This field specifies the minimum number of words (not characters) that must be entered in the field.
Maximum Word Length: This defines the maximum number of words a user can enter in the field.
Regular Expression Pattern: This advanced option allows you to enforce a specific pattern or format that the field input must match, using regular expressions (RegEx).

4. Phone Number

Purpose: To collect mobile or landline numbers.
Example: +91-9876543210

Display Tab:

Input Mask: Predefined format for phone numbers.
Input Mask Placeholder Char: Specify a placeholder character.
Allow Multiple Masks: Enables multiple formats.

5. Number

Purpose: Numeric-only input.
Example: 25, 10000

Data Tab:

Use Thousands Separator (Checkbox): When this option is checked, the system automatically adds a thousands separator (comma) to large numbers for better readability.
Decimal Places: This field determines the maximum number of decimal places that can be displayed or accepted in the input.
Require Decimal (Checkbox): When this option is enabled, the field will always display a decimal format, even if the entered number doesn’t include decimal digits.

Validation Tab:

Minimum Value, Maximum Value: Set numerical boundaries for the field.

6. Date / Time

Purpose: Select date and time.
Example: 2025-07-24 14:30

Display Tab:

Display in Timezone: This option lets you choose the timezone in which the captured date and time should be displayed. You can select from options such as Viewer, Submission, Location, or UTC.
Use Locale Settings: When this checkbox is enabled, the date and time are formatted according to the locale preferences of the user’s system (e.g., DD/MM/YYYY for India or MM/DD/YYYY for the U.S.).
Allow Manual Input: Checking this box allows users to manually type the date or time instead of using the calendar picker.
Format: This option defines how the date and time are displayed. You can choose or define a custom format such as YYYY-MM-DD, DD/MM/YYYY, or MMM D, YYYY h:mm A.

Date Tab:

Enable Date Input: When checked, this enables users to select or input dates in the field. If disabled, the field may only accept time values (useful for time-only fields such as “Shift Start Time”).

Disable Specific Dates or Date Ranges: You can blacklist certain dates or a range of dates that users should not select.
Disable Weekends: Checking this box prevents users from selecting weekend dates (Saturday and Sunday).
Disable Weekdays: Conversely, enabling this option blocks all weekdays, allowing only weekends to be selected — useful for weekend-based events or shifts.

Time Tab:

Enable Time Input: When checked, users can select or input specific times in the field. You can enable this along with date input for full datetime fields or leave only time input active for time-only forms.
Hour Step Size: This setting determines how the hour value increments or decrements in the time picker.
Minute Step Size: Similar to the hour step, this defines how the minutes change in the picker.
12 Hour Time (AM/PM): When this checkbox is selected, the time will display in 2-hour format with AM/PM indicators instead of the default 24-hour format.

Data Tab:

Clear value when hidden: When enabled, this setting automatically clears the field’s value if the field becomes hidden (for example, due to a conditional display rule).

Validation Tab:

Use calendar to set minDate: This setting allows you to manually select the minimum allowable date using a calendar picker.
Use Calendar to Set Max Date: This setting allows you to manually select the maximum allowable date using a calendar picker.

7. Password

Purpose: Masked input for sensitive data.
Example: ********

Display Tab:

Hidden: This checkbox hides the password field from users, often used in cases where a password is auto-generated or not required for manual entry.
Hide Label: When checked, the field label (such as “Password”) is not shown on the form.
Show Word Counter / Show Character Counter: These options display a counter that tracks the number of words or characters entered in the field.
Initial Focus: When this is checked, the password field will automatically gain focus when the form loads.
Allow Spellcheck: This checkbox enables or disables the browser’s spellcheck functionality for the field.
Disabled: This makes the field read-only and prevents user input. It’s useful for forms where the password is prefilled by the system.

Data Tab:

Text Case: When data is entered, you can change the case of the value. You can select to change it to Mixed case, upper case, or lower case.

Validation Tab:

Minimum Length: Specifies the minimum number of characters required for the password.
Maximum Length: Defines the maximum number of characters allowed in the password.
Regular Expression Pattern: This option allows you to define a RegEx pattern that the password must match before the form is submitted.

8. Day

Purpose: Pick a date only.
Example: 2025-07-24

Day Tab

Placeholder: This setting defines the placeholder text that appears inside the Day input box when it is empty.
Day First: When this checkbox is enabled, the Day input will appear before the Month input on the form.

Month Tab

Placeholder: This allows you to define placeholder text for the Month field when it is empty. Common examples include “MM” or “Select Month.”

Year Tab

Minimum Year: This setting specifies the earliest year that can be entered.
Maximum Year: This option defines the latest year that can be entered.
Placeholder: Similar to the Day and Month tabs, this field defines the placeholder text shown when the Year field is empty.

Data Tab

Default Value: This option allows you to set a default value for the Day, Month, and Year fields. Keep in mind that when a default value is set, it will override the placeholder text.

Validation Tab

Require Day: When checked, the Day field becomes a mandatory field, meaning users cannot submit the form without entering a valid day value.
Require Month: Enabling this checkbox makes the Month field mandatory before submission. It ensures that users provide the month value when the form requires a full date.
Require Year: This checkbox makes the Year field mandatory. Users will be unable to submit the form without selecting or entering a valid year.
Maximum Day: This setting specifies the latest permissible date that can be set in the field.
Minimum Day: This defines the earliest permissible date that can be entered.

9. Checkbox

Purpose: Multi-select options or yes/no.
Example: I agree to the terms.

Data Tab

Shortcut: This setting allows you to assign a keyboard shortcut to the checkbox component. When configured, users can select or deselect the checkbox using a specific key combination instead of clicking manually.
Input Type: This setting determines the type of input behavior applied to the checkbox field. You can choose between two modes:

Checkbox
Radio

10. Time

Purpose: Pick only the time.
Example: 09:00 AM

Validation Tab

Unique: If this checkbox is checked, it ensures the submitted time is unique

11. Select Boxes

Purpose: Multi-select dropdown.
Example: Skills: Java, SQL, Excel

Data tab

Values: This setting allows you to define the options that users can pick. You can specify both the Label (what is displayed on the form) and Value (what is stored in the database when selected).

Validation Tab

Allow only available values: Ensures users can only select from the predefined options.
Minimum checked number: The minimum number of options that must be selected.
Maximum checked number: The maximum number of options that can be selected.
Minimum checked error message: Custom message displayed if the user selects fewer than the required minimum.
Maximum checked error message: Custom message displayed if the user exceeds the maximum allowed selections.

12. Select

Purpose: Single-select dropdown.
Example: Employment Type: Full-time / Part-time

Display Tab

Widget Type: Choose the widget for displaying the select box, e.g., Choices.js or default HTML select. This controls how the dropdown appears and behaves visually.

Data Tab

Data Source Type: Determines where the options come from. You can select:

Values: Manually define the labels and values.
JSON: Provide raw JSON data for complex structures.
URL: Fetch options from a remote API.
Resources or Custom JSON: Additional advanced sources.

Data Source Value: Enter the labels and values to be used in the select dropdown.
Storage Type: Controls how the selected data is stored. Options include Autotype, String, Array, etc. Choose a type based on how you want submissions recorded.

Validation Tab

Allow only available values: Ensures only valid selections are submitted.

13. Radio

Purpose: Single choice using radio buttons.
Example: Gender: Male / Female / Other

Display Tab

Options Label Position: Decide where the labels appear relative to the radio button (e.g., left, right, top).

Data Tab

Default Value: The value pre-selected when the form loads. This overrides placeholders.
Storage Type: Controls how the selected value is stored (Autotype, String, Array, etc.).

Validation Tab

Allow only available values: Ensures that users cannot submit a value outside the predefined options.

Data Fields

Used to input structured or repeating data.

1. Data Grid

Purpose: Enter multiple rows of structured data.
Example:

Item	Qty	Price
Pen	2	10

Display Tab

Disable Adding/Removing Rows: Hides the “Add Another” and “Remove Row” buttons.
Allow Reorder: Enables users to reorder rows within the grid.
Add Another Text: Customize the text of the “Add Another” button.
Conditional Add Button: Show or hide the Add button based on conditions.
Add Another Position: Decide the button placement relative to the grid array.
Equal Column Width: Ensures all columns have the same width.
Enable Row Groups: Groups rows for easier visualization.
Initialize Empty: The grid starts without any visible rows.
Editable Fields: Choose which fields can be edited in the pop-up.
Viewable Fields: Choose which fields are visible in the pop-up view.

Validation Tab

Minimum Length: Minimum number of rows required before submission.
Maximum Length: The Maximum number of rows allowed.

2. Survey

Purpose: Create survey questions with ratings or options.
Example:

How satisfied are you? (1-5)
Would you recommend us? (Yes/No)

Data Tab

Questions: Enter each question’s Label and Value.
Values: Define the selectable answers for each question (e.g., “Satisfied”, “Very Satisfied”). Each answer should have a Label (displayed to the user) and a Value (stored in the database).

Layout Fields

Used to organize and structure the form visually.

1. HTML Element

Purpose: Add custom HTML content.
Example: <h3>Instructions</h3>

Display Tab

HTML Tag: Select the HTML tag to use for this element (e.g., <div>, <span>, <p>). This controls how the content is structured in the form.
Attributes: Add safe HTML attributes such as src, href, or title to customize the element. Unsafe attributes are automatically blocked for security.
Content: Enter the actual HTML content that will be displayed in the form.
Refresh On Change: When checked, the HTML element will rerender whenever a value on the form changes. This is useful for dynamic content that depends on other fields.

3. Content

Purpose: Add static text blocks.
Example: Please complete all fields before submitting.

4. Columns

Purpose: Arrange fields side-by-side.
Example:

Column 1: First Name
Column 2: Last Name

Display Tab

Column Properties: Configure the width, offset, push, and pull of each column to achieve the desired layout.
Auto Adjust Columns: Automatically adjusts column widths to evenly distribute the space.

5. Field Set

Purpose: Group related fields together.
Example: Address set: Street, City, State

Display Tab

Legend: Enter the text that will appear as the fieldset’s legend. This helps users understand what the grouped fields relate to.

6. Panel

Purpose: Visual section box for fields.
Example: Section: "Employee Details"

Display Tab

Theme: Select a theme from the dropdown to style the panel. Themes control colors, borders, and overall visual appearance.

7. Table

Purpose: Display read-only structured data.
Example: View-only table for leave balance summary.

Display Tab

Number of Rows: Enter the total number of rows to display in the table.

Number of Columns: Enter the total number of columns.
Clone Row Components: When checked, allows rows to be cloned easily.
Cell Alignment: Set horizontal alignment for table cells (left, center, right).
Striped: Adds striped styling to table rows.
Bordered: Adds borders to table cells.
Hover: Highlights a row when the user hovers over it.
Condensed: Condenses the table size for a more compact display.

8. Tabs

Purpose: Split long forms into tabs.
Example:

Tab 1: Personal Info
Tab 2: Bank Info

Display Tab

Labels and Keys: Define the tab titles and internal keys for each tab.
Hidden: When checked, the tab will be hidden from view.
Vertical Layout: Displays the tabs in a vertical orientation.
Hide Label: Hides the tab label when rendered, useful for clean UI.

uKnowva Fields

Integrated with uKnowva platform and user data.

1. User

Purpose: Select a user from uKnowva.
Example: Assign Task to: [Select User Dropdown]

Display Tab

Multiple Users: Allow selection of more than one user.
Include Self: Include the current logged-in user in the options.
Include User / Group: Add specific users or groups for selection.
Exclude User / Group: Remove specific users or groups from the options.

2. Table Reference

Purpose: Reference values from existing tables.
Example: Choose Asset from Asset Master table

Data Tab

DB Table: Select the database table to fetch values from.
Key Column: Choose the column to use as the key for each item. ( ID recommended most of the time)
Value Column: Choose the column to display as the value.
Custom MySQL Query: Optionally provide a custom SQL query to fetch specific data. Example: concat(name,'(', username,')').
Additional SQL Where Clause: Add filters to your SQL query to restrict data.
Dependent Fields: Map fields that depend on other fields using columns: Dependent Field, DB Column, Is Text.
Fields Mapping: Map other fields to database columns for custom data storage.
Lazy Load Data: Check to load data only when needed, improving performance.
Search Request Delay: Set a delay (in seconds) before sending a search query.
Limit: Restrict the number of results returned.
Search Threshold: Set the matching threshold for search results.
Read Only Value: Displays the value in read-only mode without allowing selection.
Use Exact Search: Disables fuzzy matching for precise results.
Disable Storing Request Result in Cache: Forces live data fetches instead of cached results.
Clear Value When Hidden: Clears field value if the component is hidden.

3. Profile Field

Purpose: Auto-fetch values from user profile.
Example: Auto-fill Email, Department, or Employee Code

Display Tab

Read Only: Prevents the user from editing this field.
Profile Field: Select a profile field from the dropdown to populate the data.
Mapping Field: Map the selected profile field to a form field.

4. Attachment

Purpose: Upload files.
Example: Upload Proof of Expense

Display Tab

Multiple Attachments: Choose whether users can upload more than one file.
Allowed File Types: Select the allowed file formats, e.g., PNG, JPEG, PDF.
Allow Upload via Camera Only: Restrict uploads to images captured from the device camera.
Sample File ID: Provide a sample file for reference.
Max File Size (MB): Define the maximum file size for uploads.

5. Star Rating

Purpose: Collect quantitative feedback using a star-based rating system.
Example: Rate satisfaction with training sessions from 1 to 5 stars.

Display Tab

Max Rating: Define the maximum number of stars to display. Only numeric values are allowed. For example, entering 5 will create a 5-star rating system.

6. Switch Button

Purpose: Allow users to select between two options (On/Off).
Example: Enable or disable notifications, mark a task as complete/incomplete.

Display Tab

Yes Label: Enter the label text for the “Yes” side of the switch. This is the visible text that the user sees.
No Label: Enter the label text for the “No” side of the switch.
Yes Value: Define the value that will be stored/submitted when the switch is set to Yes.
No Value: Define the value that will be stored/submitted when the switch is set to No.
Default Value: Set the default state of the switch when the form loads. It can be Yes or No based on your requirement.

Validation Tab

Required: Mark this field as mandatory. The user must choose a value before submitting the form.
Unique: Ensure that the value submitted is unique across all submissions.

Best Practices

Use Field Set and Panel to improve form readability.
Use Tabs for multi-section forms.
Use Profile Fields to minimize data entry.
Always include Validation where needed (especially for email, number, date).

This guide ensures that users building workflow forms in uKnowva can choose and configure each field appropriately for their use case.

Conditional Display – Example Configuration

Objective

Display the field "Employee Name" only if "Type of Hire" = "Replacement".

Steps to Configure

1. Create or Identify the Controlling Field

Field Label: Type of Hire
Property Name: type_of_hire
Field Type: Select
Values:

New
Replacement

2. Create the Dependent Field

Field Label: Employee Name
Field Type: User (from uKnowva Fields)
Property Name: employee_name

3. Configure Conditional Display

Inside the Display or Conditional settings of Employee Name field:

Setting	Value
This component should display	(Enable it)
When the form component	Type of Hire
Has the value	Replacement

Final Behavior

When Type of Hire = New → "Employee Name" is hidden.
When Type of Hire = Replacement → "Employee Name" is visible.