Common Configurations

Common Configuration Group

This section provides detailed information on various widget bindings and configurations available for dynamic UI control and customization.

Basic Bindings

Bindings are used to dynamically control UI behavior by linking widget properties to conditions or values. They allow developers to define rules that control visibility, interactivity, and styling based on expressions or data models.

Property	Description	Comments
Visibility	Specify a visibility condition for the widget. The widget will be visible only if the expression evaluates to true. If no condition is provided, the widget is visible by default.	Allows user to control the visibility of elements dynamically based on component properties.
Enable/Disable	Specify an enable condition for the widget. The widget will be enabled only if the expression evaluates to true. If no condition is provided, the widget is enabled by default.	Useful when you want to restrict user interactions based on conditions.
CSS Class	CSS Class binding allows you to dynamically add or remove CSS classes based on component model properties.	Useful for styling elements conditionally.

Additional Bindings

These bindings provide enhanced control over widget appearance and interactivity, including attributes, icons, and field-specific styling based on conditions.

Property	Description	Comments
Attributes	Dynamically set custom HTML attributes on widgets.	Used when the widget needs runtime attributes such as aria-label, title, etc.
Left Icon	Bind a model property or condition to dynamically render a left icon.	Used to display contextual icons beside form fields or buttons.
Right Icon	Similar to Left Icon, but renders on the right side of the widget.	Can be used to indicate status or actions.
Field Border	Conditionally applies border styling to form fields.	Useful for indicating errors, warnings, or success states.

Additional Event Bindings

Event binding lets you listen for and respond to user interactions (such as keystrokes, mouse movements, clicks, etc.) and execute corresponding logic in the component. It enables dynamic behavior and interaction in the application.

It allows association of additional events (such as a mouse, keypress, or hover) with a specific event handler.

Example:

Keyup Event Binding: Used to capture input values dynamically as the user types.

<input (keyup)="onKeyup($event)"/>

Property	Description	Comments
+ New	Clicking the "+ New" button to add a new event binding entry which binds required event to the widget.
Type	Specify the type of an event.	Example: keydown, mouseover, click, mouseenter.
Event	Select the event handler from the dropdown.	Some events require input parameters to function correctly. Users can associate data from the current item in an iterable container. Widgets inside grids, iterable containers, pick lists, etc., can bind dynamic data to input parameters. Allows mapping event parameters to relevant template variables. Displays predefined event handlers available for event binding.
Action	Allows user to delete the event binding.

Style Bindings

Style binding allows dynamic application of inline styles to elements based on component logic or variables.

This enables fine-grained control over visual presentation depending on runtime conditions (e.g. error state, user preference, data-driven color changes).

You can bind single style properties or multiple styles using binding expressions.

Example: [style.color]="isError ? 'red' : 'black'"

Property	Description	Comments
+ New	Click "+ New" to add a style property binding to the widget.	Enables styling based on expressions or variables.
Style	Specify the CSS style property.	Example: color, background-color, font-size, border.
Value	Bind the style value dynamically using an expression or variable.	Example: [style.color]="isActive ? 'blue' : 'gray'"
Action	Removes the selected style binding from the list.

ARIA Bindings

ARIA (Accessible Rich Internet Applications) bindings are used to improve accessibility by providing additional semantic information to assistive technologies.

They allow developers to describe the behavior and state of UI elements to users who rely on screen readers or other assistive tools.

ARIA attributes enhance HTML elements by communicating roles, states, and properties that are not natively available in standard HTML.

Property	Description	Comments
+ New	Click "+ New" to add an ARIA attribute to the widget.	Each attribute improves accessibility.
Attribute	Specify the ARIA attribute to bind.	Example: aria-label, aria-hidden, aria-live, aria-expanded.
Value	Define the dynamic or static value of the ARIA attribute.	Supports variables or expressions as values.
Action	Remove the ARIA attribute from the binding list.

Tooltip Configuration

Tooltips provide contextual information or guidance when users hover over or focus on a widget or element. They enhance usability without cluttering the interface.

Use tooltip bindings to configure tooltip content and behavior for widgets.

Property	Description	Comments
Tooltip	Enter the text to display in the tooltip.	This text will appear when the user hovers over the widget.
Position	Set the position of the tooltip relative to the widget.	Example values: top, bottom, left, right.
Trigger	Specify the event that triggers the tooltip display.	Common triggers include: hover, click, focus.
Delay	Set a delay (in milliseconds) before the tooltip appears.	Optional setting to control the appearance timing.

Attributes Configuration

Attributes configuration allows you to assign standard HTML attributes to widgets. These attributes define element behavior, accessibility, styling hooks, and more.

These can be static or dynamically bound based on the application state or logic.

Property	Description	Comments
id	Assign a unique identifier to the widget.	Useful for targeting specific elements in logic or style rules.
name	Assign a name to the widget or input field.	Often used in form submissions or accessibility purposes.
title	Specifies extra information about an element (displayed as tooltip on hover).	Acts as an additional text label.
tabindex	Controls the widget’s order in keyboard navigation.	Helps enhance accessibility and user navigation.
disabled	Disables interaction with the widget.	Can be bound to a condition to toggle dynamically.

Style & Layout

This section allows you to apply custom styling and layout properties to widgets, enabling precise control over appearance and alignment.

Property	Description	Comments
Class	Specifies one or more CSS classes to apply to the widget.	Multiple classes can be separated by spaces.
Style	Defines inline CSS styles for the widget.	Used for quick custom styling; use with caution to maintain consistency.
Layout	Manages how the widget is positioned within its container.	May include flex/grid properties depending on layout engine used.
Responsive Behavior	Enables visibility toggles or adaptive styles for different screen sizes.	Requires predefined responsive classes or utility styles.

Additional Configuration

This section includes extra settings and advanced configuration options that enhance widget behavior and flexibility.

Property	Description	Comments
Tab Index	Sets the tab order for keyboard navigation.	Useful for improving accessibility and controlling navigation flow.
Custom ID	Assigns a unique identifier to the widget.	Helpful for targeting via JavaScript or automated testing.
Data Attributes	Allows addition of custom data-* attributes.	Used for storing extra information or interacting with external scripts.
Ref	Specifies a reference variable to access the widget instance programmatically.	Used for advanced logic, validations, or dynamic control.
Test ID	Defines a test-specific ID for use in automated UI testing.	Should be unique and consistent across environments.