Skip to main content
Version: Upcoming 🦄

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-hf-control="HtmlContainer"
    data-hf-options="{
        label: 'HTML Container',
        required: true,
        tooltip: 'sample tooltip'
    }"
></div>

FormControl Options​

doNotCopy​

Set "true" whenever the field should get deleted if the Form is copied.
How to use:
doNotCopy: true
Type: boolean

editor​

Set "true" to enable a rich text editor in HybridForms.
How to use:
editor: true
Type: boolean

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

DefaultValue

​

The dafault value of the HtmlContainer is simple HTML code which describes the children of the FormControl.

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-hf-control="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-hf-control="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>

copyValueFrom​

Define a FormControl that synchronizes its value with the current field. This synchronization process occurs upon navigating to the page where the current control is situated. It only occurs if the field is empty or the mode is set to "overwrite".

<div
    id="html_container_1"
    data-hf-control="HtmlContainer"
    data-hf-options="{
    label: 'HTML Container',
    copyValueFrom: 'html_container_2'
}"
></div>
Option interface
interface ICopyValueFromObject {
    sourceId: string;
    mode: 'overwrite' | null;
    callback: (value: string) => string;
}

type CopyValueFromType = string | ICopyValueFromObject;

callback​

Specify a function to process value before copy.
How to use:
callback: HFFormDefinition.Namespace.processValue
Type: function
Signature: function(value: string) => string

mode​

Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
How to use:
mode: 'overwrite'
Type: string

sourceId​

Specify source id
How to use:
sourceId: 'target_id'
Type: string

Stored data

​

<div
    id="html_container_1"
    data-hf-control="HtmlContainer"
    data-hf-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 an 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>"
}