Header How To's
How to's for the Header guide.
How to Use Header?
How to Use Header?
A Header is a component used to display the title of a form. It is used to convey the topic or purpose of the form to the user.
The following steps describe how to add and use the Header component on a form.
1. How to Add a Header Component to a Form?
- Open the form design screen.
- Go to the
Toolboxpanel. - Locate the
Headercomponent. - Drag and drop it onto the form.
- Click the component and configure its settings from the
Property Viewerpanel.
2. Basic Configurable Properties
| Property | Description |
|---|---|
Text | The title text that will be displayed to the user. |
Visible | Determines whether the Header will be visible on the form. |
Width / Height | The width and height of the header area. |
Horizontal Align | Sets the alignment of the label text: align left, right, or center. |
Heading Type | Determines the heading type. Possible values are: h1, h2, h3, h4, h5, h6. |
3. Usage Examples
Form Title
Used to add titles such as "Employee Information Form", "Sales Proposal", "Customer Registration Form".
Section Header
Can be used as a subheader to separate specific sections within the form.
Informational Text
Can also serve as a static text area for describing the purpose of the form or providing usage instructions.
4. Tips
- Keep the title as short and clear as possible.
- If the form is long, add additional headers to sections to improve readability.
- Use alignment consistent with other components to create a visual hierarchy.
This document explains step-by-step how to use the Header component on a form.
What Is Header?
What Is Header?
A Header is a title component placed at the top of a form to explain the form’s purpose, definition, or content to the user.
This component helps clarify what the form is used for and provides immediate guidance to the user.
Features
- Displays a fixed and editable title text.
- Makes the form more understandable and professional.
- Enhances user experience by providing informative titles.
- Can be easily added to the form via drag-and-drop.
Usage Areas
- Form titles
- Section headers
- Informative static text areas
- Labeling different steps of a process
Why Is It Used?
- To explain the purpose or topic of the form
- To create a hierarchical visual structure
- To improve the professional appearance of the form
- To reduce content complexity and guide the user
This document explains what the Header component is and why it is used in form design.
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:
-
Select the “Signature” fieldin the form editor. -
In the
Propertiespanel, find theClient Enabledfield. -
Set the value to
False— the field will now be disabled by default when the form loads. -
Open the
Rule Manager. -
Add a new rule:
Condition:
Action:
- 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 State | Description |
|---|---|
True | The control is active and ready for user interaction when the form loads. |
False | The control is disabled at load time and can be enabled dynamically via rules or code. |
Notes & Best Practices
- Use the
Client Enabledproperty to manageclient-side interactivitywithout requiring server actions. - Combine it with
Rule Managerto define when and how controls become active. - Remember: if
server enablementis disabled, the client cannot enable the control even ifClient Enabledis set toTrue. - 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.