HTML Control

An HTML Control allows you to write your own HTML source code or embed external content.

In order to add a HTML Control, drag the shape from the Form Toolbox onto the Form and drop it at the desired location.

Sample HTML Control

Properties

This Element utilizes beside the General Element Properties the following properties:

Control Parameters

HTML Source	Specify which source you want to use for the HTML Control
HTML	You may specify an HTML source code
URL	The static URL, i.e. https://www.iyopro.com
Variable	You may specify a variable name. The HTML Control can then handle the variable value. If you choose the Dynamic URL as the source, the value will contain a dynamic URL.
HeightMode	You may use the automatic mode or set a height in pixels
Height	Height of the control in pixels
Action	You may specify an expression to be executed when the defined condition is met

Required

Specify, if the input is required or not. A form may only be submitted if all required inputs have been made.

HTML Source

Source Code	Design the HTML Control by defining your own HTML source code
Static URL	Embed content via a static URL, e.g. widgets, images, tutorials
Dynamic URL	You may specify a variable that allows you to dynamically set an URL to embed content, e.g. widgets, images, tutorials

You can use the following in your HTML source code to interact with the IYOPRO form. Call them with "IYOPROForm.".

Members

	value: any	The value of the control variable
	onValueChange(callback: (newValue?: any, oldValue?: any) => void)	This method registers the value changed callback of the control's variable
	getVariableName(): string	This method returns the variable name
	executeAction(successCallback?: () => void, errorCallback?: (e: any) => void, alertError?: boolean): void	Executes the expression in the Action Property. You may specify what happens in case of a successful or failed execution and if there should be an error message
	getFormValue(attribute: string): any	Retrieves the value of the given form variable
	setFormValue(attribute: string, value: any): void	Stores a value in the given form variable
	watchFormValue(attribute: string, callback: (newValue?: any, oldValue?: any) => void, deep?: boolean): void	This method registers the value changed callback of the given form variable deep: use this only if you want to monitor complex data structures or small changes. Attention: processing of the form may get slower
	onVisibilityChanged(callback: (isVisible: boolean) => void): void	This method registers the visibility changed callback. The visibility change happens according to the conditions of the form property "Visibility"
	onDisabledChanged(callback: (isDisabled: boolean) => void): void	This method registers the disabled changed callback. The deactivation change happens according to the conditions of the form property "Disabled"
	onAllowSubmitChanged(callback: (allowSubmit: boolean) => void): void	This method registers changes to the condition of the control that prevents the submitting of the form. The property "Required" has to be checked
	onDestroy(callback: () => void): void	Specify what is supposed to happen once the control no longer exists, for example closing connections to external systems
	setRequiredCheck(allowSubmit: (value: any) => boolean): void	Specify the condition that has to be met in order to submit the form. The property "Required" has to be checked
	setRequiredErrorMessage(message: string): void	Specify an error message for a required input. It will be displayed if the requirement is not met and the validation messages are visible
	refresh(): void	Use this method when changes occur within an object and IYOPRO does not recognize the changes on its own.

Sample

This sample gives you an idea of how some of the methods can be used.

<html>

<head>

const TEXT_VARNAME = 'text';

const ADDON_VARNAME = 'addon';

var text = "";

var addOn = "";

function onLoad()

{

text = IYOPROForm.getFormValue(TEXT_VARNAME) || "";

addOn = IYOPROForm.getFormValue(ADDON_VARNAME) || "";

IYOPROForm.setFormValue(TEXT_VARNAME, text);

IYOPROForm.setFormValue(ADDON_VARNAME, addOn);

IYOPROForm.watchFormValue(TEXT_VARNAME, function (newVal) {

newVal = newVal || "";

if (newVal != text)

{

text = newVal;

update();

}

}, true);

IYOPROForm.watchFormValue(ADDON_VARNAME, function (newVal) {

newVal = newVal || "";

if (newVal != addOn)

{

addOn = newVal;

update();

}

}, true);

IYOPROForm.onDisabledChanged(function (isDisabled) {

var paragraph = document.getElementById('displayText');

if (isDisabled)

paragraph.style.textDecoration = "line-through";

else

paragraph.style.textDecoration = "none";

});

IYOPROForm.setRequiredCheck(function () {

if (text == "" || addOn == "")

return false;

return true;

});

IYOPROForm.setRequiredErrorMessage("Write something into both textboxes.");

update();

}

function update()

{

IYOPROForm.value = text + " " + addOn;

var paragraph = document.getElementById('display');

paragraph.innerText = IYOPROForm.value;

paragraph.style.fontFamily = "'Balthazar', serif";

}

</script>

</head>

</body>

</html>