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.

Figure 1. Example HTML Control

Properties

In addition to the General Element Properties, this element utilizes the following properties:

NewItem1032

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.".

Configuration

You can specify key-value pairs which can then be read by the HTML Control. Use the getConfigValue() method to get the value of the specified key from the configuration properties.

Specifying configuration entries enables the reuse of HTML source code without having to make changes directly to the code. For this purpose, the HTML source code is in an external script and not directly in the expression of the form control.

By passing a variance into the script through this property of the control, you don’t have to make changes to the source code, for example, to use a different URL or variable. You could program an RSS reader and, depending on which form it is accessed from, it reads traffic news or the weather for tomorrow.

Properties

value: any: The value of the control variable

Methods

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

processing of the form may get slower when using the deep flag.

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.

Examples

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      input {
        width: 100%;
        margin: 4px 0;
      }
    </style>

    <script>
      function update(element) {
        IYOPROForm.value = element.value;
      }
    </script>
  </head>

  <body>
    <input type="time" id="time" onchange="update(this)">
  </body>
</html>

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

NewItem1034

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

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:
HTML IFrame