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>
<script>
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 onload="onLoad()">
<p id="display" style="margin-left:2em; margin-top:2em; color:blue; font-size:300%"> </p>
</body>
</html>