HTML Control

Parent Previous Next

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%">&nbsp;</p>

 </body>

</html>