Skip to main content

InputGroup How To's

How to's for the InputGroup guide.

How to Use Input Group?​

How to Use Input Group?​

The following steps demonstrate how to use the Input Group object on a form.

Add the Input Group Object to the Form​

  1. Open the form design screen
  2. Go to the Toolbox panel
  3. Locate the Input Group object
  4. Add the object to the form using drag / drop

Add Objects into the Input Group​

  1. Click inside the Input Group area added to the form
  2. Add one or more of the following objects:
    • TextBox
    • NumberBox
    • Button
    • Icon
    • DateTimePicker, etc.

All added objects are displayed side by side and aligned within the same group.

Configure Layout and Appearance​

  • Adjust the Width values of the objects
  • Position buttons or icons to the left or right if needed
  • The order of objects within the group is determined by the order in which they are added

Example Usage Scenario​

Creating a Search Field:

  • Input Group
    • TextBox → “Search”
    • Button → “Search”

With this structure, the user sees a clear and usable search field on a single row.

Notes​

  • Input Group does not handle validation or event management
  • Each object inside it retains its own Events and Properties settings
  • It is a recommended layout object for responsive forms

What Is Input Group?​

What Is Input Group?​

Input Group is a form design object used to display and organize multiple input controls (TextBox, NumberBox, Button, Icon, etc.)
as a single unified block on a form.

With this object, related fields can be presented side by side or in an integrated manner, creating a more organized and understandable user interface.

What Is It Used For?​

  • Displaying multiple fields aligned on a single row
  • Creating input field + button combinations
  • Improving visual consistency and user experience (UX)
  • Reducing form complexity

Common Usage Scenarios​

  • Search field + Search button
  • TextBox + icon
  • Numeric field + unit label
  • Password field + show/hide button

Notes​

  • Input Group provides layout and visual arrangement only.
  • It does not change the data behavior of the objects inside it.
  • It is highly suitable for responsive designs.

How to Use Client Enabled?​

What is Client Enabled?​

Client Enabled is a property that defines whether a form control is active (enabled) on the client side when the form is first loaded.
If it is set to True, the control is immediately usable by the user.
If it is set to False, the control is disabled and cannot be interacted with until a specific condition or rule activates it.

This property is especially useful for controlling the user’s interaction flow and applying dynamic behaviors using the Rule Manager.

What Does It Do?​

The property allows developers to:

  • Control when a form control becomes interactive.
  • Prevent users from entering or changing data until prerequisites are met.
  • Dynamically enable or disable controls based on user input or logic.

Example Scenario — Conditional Activation​

Scenario:
A form contains a checkbox called “I Accept Terms” and a text field called “Signature.”
The goal is to make the “Signature” field inactive until the user checks “I Accept Terms.”

Steps to Implement:​

  1. Select the “Signature” field in the form editor.

  2. In the Properties panel, find the Client Enabled field.

  3. Set the value to False — the field will now be disabled by default when the form loads.

  4. Open the Rule Manager.

  5. Add a new rule:

    Condition:

Action:

  1. Save and publish the form.

Result:​

  • When the form loads, the “Signature” field is disabled.
  • Once the user checks “I Accept Terms,” the field automatically becomes active and editable.

Behavior Summary​

Property StateDescription
TrueThe control is active and ready for user interaction when the form loads.
FalseThe control is disabled at load time and can be enabled dynamically via rules or code.

Notes & Best Practices​

  • Use the Client Enabled property to manage client-side interactivity without requiring server actions.
  • Combine it with Rule Manager to define when and how controls become active.
  • Remember: if server enablement is disabled, the client cannot enable the control even if Client Enabled is set to True.
  • By default, this property is set to True (active).

Summary​

Client Enabled improves form usability by letting developers control when and how users interact with form controls.
It is essential for creating responsive, condition-based form experiences where user actions dynamically change the form’s state.