Control API

The Control API in Profitbase Forms provides a set of methods for dynamically managing form controls at runtime. It allows developers to show or hide controls, apply or remove CSS classes, validate input, enable or disable elements, and directly access native DOM elements. This enables flexible, condition-based UI behavior and enhanced user interaction within Profitbase applications.

enableTab()
Enabling tab in Form Schema.

Example

controls.tabcontrol.enableTab(tabName);

disableTab()
Disabling tab in Form Schema.

Example

controls.tabcontrol.disableTab(tabName);

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