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
Script File	Enter the link to the script file, e.g. simply type the script name if the script file is on the same level as the form
Configuration	Specify the key-value pairs which can then be read by the HTML Control
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, stretch mode or set a height in pixels. The stretch mode uses the rest of the available space
Height	Height of the control in pixels
Min Height	Specify the minimum height, that the HTML Control should have
Stretch Proportion	Specify the size ratio of the control to other controls with stretch mode
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
Script File	Design the HTML Control by defining your own HTML source code in a script. This way, you could also reference it in other forms.

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
	getConfigValue(key: string, defaultValue?: string): string	Retrieves the value of the given key from the configuration properties. You may specify a default value that will be returned if the given key doesn't exist
	loadRepositoryFile(id: number, successCallback?: (blob: Blob) => void, errorCallback?: (e: any) => void, alertError?: boolean): void	Load a file from the repository. The file is determined based on its ID. The data is returned as a Blob.
	refresh(): void	Use this method when changes occur within an object and IYOPRO does not recognize the changes on its own.

Sample

This sample sets the HTML Control variable via a time input control.

<!DOCTYPE html>

<html>

<head>

<style>

input{

width: 100%;

margin: 4px 0;

}

</style>

function update(element) {

IYOPROForm.value = element.value;

}

</script>

</head>

<body>

</body>

</html>

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('display');

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>

Note

We would like to point out a specific behavior regarding the HTML Control. For technical reasons, the iFrame is currently drawn over the actual content. This results in the HTML Control being displayed in front of a floating window (see fig.).