Skip to main content
Version: 9.6

HtmlContainer

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.

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

FormControl Options​

doNotCopy​

Set "true" whenever the field should get deleted if form is copied.

How to use: doNotCopy: true
Type: boolean

editor​

Set "true" to enable a rich text editor in HybridForms. Set "highlight-only" to enable highlighting or styling of default value.

How to use: editor: true
Type: boolean | 'highlight-only'

hidden​

Hide FormControl in Form.

How to use: hidden: true
Type: boolean

label​

Define a label for your control element.

How to use: label: 'HTML Container'
Type: string

onChanged​

Call a pre-defined JS-method to do something when the status of the control changes

How to use: onChanged: HFFormdefinition.Namespace.Method
Type: function
Signature: function(value: string) => void

required​

Set "true" if the control has to be filled in.

How to use: required: true
Type: boolean

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.

How to use: tooltip: 'sample tooltip'
Type: string

tooltipTemplate​

Write an id of a html container 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 content of the container will occur.

How to use: tooltipTemplate: 'example_control_tooltip'
Type: string

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>, <blockquote>, <label>

  2. Text & Formatting: <h1>, <h2>, <h3>, <h4>, <h5>, <p>, <a>, <b>, <i>, <u>, <s>, <em>, <strong>, <sub>, <sup>, <br>

  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!

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