Gets the control's required state.
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
console.log(ctrl.required);
Sets the control's required state
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
ctrl.required = false;
Checks the validity of the color input control.
A promise that resolves to a ValidationInfo object. The object has an 'isValid' property that indicates whether the control is valid, and a 'message' property that contains a validation message if the control is not valid.
const validityResult = await ix.api.dom.getControl("<ELEMENT-GUID>").checkValidity();
// example of `validityResult` - field is required, but was not filled
ValidationInfo {
valStatus: false,
valMessage: 'Please make a selection',
valType: 'required'
}
Retrieves the current color value of the control.
This method returns the current color value of the control as a string in a valid CSS color format (e.g., HEX, RGB, etc.). If the control does not have a color value, it returns an empty string.
The current color value of the control, or an empty string if no color value is set.
// Get the control by its element GUID and retrieve the color value
const ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
const value = ctrl.getValue();
console.log(colorValue); // Outputs the color value to the console
Sets a color value for the control.
This method allows you to programmatically set the color value of the control.
The color value should be provided as a string in a valid CSS color format (e.g., HEX, RGB, etc.).
If the color value has changed and the yellowFade setting is enabled, the control will visually indicate the change.
If the triggerOnchange setting is set to "always" or "strict" and the color value has changed, the control will dispatch a change event.
The color value to set.
Optional settings: { Optional settings. Determines when to trigger a 'change' event.
// Get the control by its element GUID and set the color value to white
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
ctrl.setValue("#ffffff", { triggerOnchange: "always" });
Represents an edit control for color values.
This control is used to input and edit color values in a user-friendly manner. It can handle various color formats (e.g., RGB, HEX, etc.) and provides a color picker for intuitive color selection. This makes it easier for users to input and adjust color data.