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 the control.

Example

controls.Input1.enable();

disableIf(condition: boolean)
Disables the control if the condition is true.

Example

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

enable()
Enables the control.

Example

controls.Input1.enable();

enableIf(condition: boolean)
Enables the control if the condition is true.

Example

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

setIsEnabled(isEnabled: boolean)
Sets the status of the control as Enabled.

Table of Contents

Control API