HtmlContainer

<div id="html_container_1"
    data-win-control="HFWinJSCtrl.HtmlContainer"
    data-win-options="{
        label: 'HTML Container',
        required: true,
        tooltip: 'sample tooltip'
    }">
</div>

Property	Type	How to use	Description
doNotCopy	Boolean	doNotCopy: true	Set "true" whenever the field should get deleted if form is copied.
label	String	label: 'HTML Container'	Define a label for your control element.
required	Boolean	required: true	Set "true" if the control has to be filled in.
tooltip	String	tooltip: 'sample tooltip'	Write a comment to provide further information about the field. A question mark will then be shown within the label and with a click/tap on it, the information will occur.
onChanged	Function(value: string)	onChanged: HFFormdefinition.Namespace.Method	Call a pre-defined JS-method to do something when the status of the control changes

Note: A HtmlContainer is used to dynamically add HTML elements to a form. It is possible to place an initial value as children to the control but it is very limited which tags can be placed.

Usage

The following describes which tags are allowed and how the control is used.

Value

Read

• HybridForms.API.FormControls.getCtrl(sample-id).val(): returns a string of the children of the FormControl with the id equals sample-id.

Write

• HybridForms.API.FormControls.getCtrl(sample-id).val(value): takes a HTML string as value and place this string as children of the FormControl with the id equals sample-id.

Allowed tags

1. Container: <div>, <span>

2. Text & Formatting: <h1>, <h2>, <h3>, <h4>, <p>, <a>, <b>, <i>, <strong>

3. Lists: <ul>, <ol>, <li>

4. Tables: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>

Images

To prevent XSS (Cross-Site-Scripting) images have their own syntax. Normal image tags are forbidden!

<hf-img id="img01" hf-type="formdefinition" hf-src="form-logo.png" class="test-class img-responsive" alt="form logo"></hf-img>

There are three types of image sources which can be defined with hf-type:

1. hf-type="formdefinition": Is used to include an image from the form definition. hf-src has to be the image filename.

   • e.g.: hf-src="form-logo.png"

2. hf-type="form": Is used to include an image from the form attachments. hf-src has to be the attachment filename.

   • e.g.: hf-src="sketch-6ec3a4a2-d384-186e-68c6-3b827df4cba4.png"

3. hf-type="extern": Is used to include an image from an extern source. hf-src has to be a valid url to an image. CORS problems can occur!

   • e.g.: hf-src="https://www.example.com/something/example.png"

Info

If no class is assigned, the Bootstrap class img-responsive is automatically assigned to limit the size of the image.

Form fields

Form fields can be easily displayed on screen by simple put form field id in curly braces ({{form-field-id}}).

If shadow fields are needed (e.g. _HFDropDownListText) the pipe operator should be used to print the shadow field value ({{form-field-id | 'HFDropDownListText'}}).

These fields are observed which means the value of the HtmlContainer change every time the form field value change.

Custom functions

Custom functions can be executed by declaring a HFCustomString in a placeholder ({{HFCustomString: HFFormdefinition.YourNamespace.htmlContainerFunc}}).

Note

This function has to return a value! If HFCustomString is placed inside a RU For-Loop the function is executed with two parameters. First parameter is the RepeatingUnit ID and the second one is the current RepeatingUnit index.

export function htmlContainerFunc(ruId?: string, ruIndex?: number) {
    if (ruId && ruIndex) {
        return `RepeatingUnit: ${ruId} - ${ruIndex}`;
    }

    return 'Custom Function Execution';
}

RepeatingUnit For-Loop

Define a repeating template (data-hf-ruFor="repeating_id") which reacts on a RepeatingUnit change. All child elements are duplicated by the amount of the given RepeatingUnit count. All field placeholder are extended with the repeating postfix to print field values of each RepeatingUnit (e.g. {{repeating-field-id}} becomes repeating-field-id_hfrepeating_1)

<div id="ru_for_loop_example" data-win-control="HFWinJSCtrl.HtmlContainer">
    <div data-hf-ruFor="repeating_id">
        <h3>RepeatingUnit For-Loop</h3>
        <span>{{repeatableCount}}</span>
        <span>{{repeating-field-id}}</span>
    </div>
</div>

Note: {{repeatableCount}} represents a special placeholder which holds the current repeating index.

Conditional structure

It is possible to display structures conditionally by field values. data-hf-if is used to display structure on field value. data-hf-if-not is used to display structure on NO field value.

<div id="if_example" data-win-control="HFWinJSCtrl.HtmlContainer">
    <div data-hf-if="example_id">
        <div>NOT Display</div>
    </div>
    <div data-hf-if-not="example_id">
        <div>NOT Display</div>
    </div>
</div>

Stored data

<div id="html_container_1"
    data-win-control="HFWinJSCtrl.HtmlContainer"
    data-win-options="{
    label: 'HTML Container',
    required: true,
    tooltip: 'sample tooltip'
}">
    <div class="container">
        <p>Test Paragraph</p>
        <hf-img id="img01" hf-type="formdefinition" hf-src="form-logo.png" class="test-class img-responsive"></hf-img>
    </div>
</div>

For each HtmlContainer inside your forms there is one value pair of stored data:

It is a HTML string which describes the children of the FormControl.

{
    "id": "html_container_1",
    "value": "<div class=\"container\"><p>Test Paragraph</p><hf-img id=\"img01\" hf-type=\"formdefinition\" hf-src=\"form-logo.png\" class=\"test-class img-responsive\"/></div>"
}