Loading...

Control API

hide()

Hides a control by setting its visibility property to hidden. This will not remove the control from the DOM.

Example

controls.Input1.hide();

hideIf(condition : boolean)

Conditionally hides a control.

Example

This example shows whether a control is shown or hidden based on a product id from the Workbook.

Controls.Input1.hideIf(AppVariables.CurrentProductID == "Product123");

collapse()

Hides a control by setting its display property to none so that it will not take up any space in the DOM.

Example

controls.Input1.collapse();

show()

Shows a control by setting its visibility to visible.

Example

controls.Input1.show()

showIf(condition : boolean)

Conditionally shows or hides a control.

Example

This example shows whether a control is shown or hidden based on a product id from the Workbook.

Controls.Input1.showIf(AppVariables.CurrentProductID == "Product123");

addCss(cssClass : string)

Adds one or more css classes to the to the HTML Element if the css classes are not already applied.

Examples

Controls.Input1.addCss("bold alert");
Controls.Input1.addCss("positive-number");

setValidity(isValid : true | false, text? : string, cssClass? : string)

Sets the validity state of a control.

* Passing false as the isValid argument will draw a red border around the control

* Passing a text argument will display an error message below the control.
This argument is optional.

* Passing a cssClass argument enables you to apply custom styling to the control.
This argument is optional.

Example

var isValid = this.someComplexValidation(models.Customer.Name);
controls.CustomerName.setValidity(isValid, texts.Fields_Is_Required);

validateRequired(text? : string, cssClass? : string)

Validates that the input control (Dropdown, Text Area or Input) has a value.

* Passing a text argument will display an error message below the control.
This argument optional.

* Passing a cssClass argument enables you to apply custom styling to the control.
This argument is optional.

Example

This example shows how to validate that the Input_Email control has a value. If it does not, the text represented by the Email_Required text resource is displayed as the validation failure message.

controls.Input_Email.validateRequired(texts.Email_Required);

nativeElement()

Returns the native DOM element of the control.


setIsVisible(isVisible : boolean)

Sets the visibility of the control.

Example

Controls.Input1.setIsVisible(IsVisible.CurrentProductID == "Product123");

removeCss(cssClass : string)

Removes the css class of the control.


toggleCss(cssClass : string, condition : boolean)

Toggles the css class of the control depending on the condition.


disable()

Disables control.

Example

controls.Input1.enable();

disableIf(condition : boolean)

Disables control if the condition is met.

Example

Controls.Input1.disableIf(AppVariables.CurrentProductID == "Product123");

enable()

Enables control.

Example

controls.Input1.enable();

enableIf()

Enables control if the condition is met.

Example

Controls.Input1.enableIf(AppVariables.CurrentProductID == "Product123");

setIsEnabled(isEnabled : boolean)

Sets the status of the control as Enabled.