Skip to main content

DOMElement How To's

How to's for the DOMElement guide.

How to Use DOMElement?​

How to Use DOMElement?​

The following steps describe how to add a DOMElement component to a form and start using it.

Add DOMElement to the Form​

  1. Open the form design screen.
  2. Go to the Toolbox panel.
  3. Find the DOMElement component.
  4. Drag and drop the component onto the form.

Review the Properties​

When the component is selected, the Property Viewer panel displays the following tabs:

  • General
  • Label
  • Behavior
  • Appearance
  • Events

These sections are used to configure the component’s behavior and events.

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.

What Is DOMElement?​

What Is DOMElement?​

DOMElement (Document Object Model Element) represents the structural model of a web page running in the browser.
With this component, you can directly access, read, and manipulate HTML elements inside a form.

A DOMElement can represent any DOM node on a page, such as:

  • DIV
  • SPAN
  • INPUT
  • BODY
  • HTML

What Is It Used For?​

The DOMElement component is used for the following purposes:

  • Dynamically modifying HTML elements on the form
  • Adding or removing CSS classes
  • Controlling visibility, styles, or content
  • Creating advanced interactions using JavaScript
  • Implementing custom UI behaviors that cannot be achieved with standard form components

Key Features​

  • Works on the client side
  • Provides direct interaction with JavaScript and CSS
  • Enables access to the HTML/DOM structure
  • Makes it possible to build advanced and highly customized user experiences

When Should It Be Used?​

  • When standard form components are not sufficient
  • When custom UI behavior is required
  • When dynamic HTML/CSS manipulation is needed
  • When JavaScript-based integrations are required

DOMElement is a powerful and flexible control component designed for advanced developers.