Skip to main content
Version: 9.6

Highlighter

A Highlighter is used to highlight text. 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="text_highlighter"
    data-win-control="Highlighter"
    data-win-options="{
        label: 'Text Highlighter',
        tooltip: '',
        mark: 'highlight'
    }">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Eleifend porttitor vehicula facilisi urna euismod litora diam viverra primis accumsan ultrices mi suscipit.
    Mus ad quam conubia <strong>hendrerit torquent ullamcorper</strong>
    elementum consequat eu amet velit consequat condimentum.
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

FormControl Options​

doNotCopy​

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

How to use: doNotCopy: 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

mark​

Set the mark type for the highlighter.

How to use: mark: 'highlight'
Type: 'highlight' | 'bold' | 'strikethrough'
Default: highlight

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.

DefaultValue​

The dafault value of the Highlighter is simple HTML code which describes the children of the FormControl. To highlight text initiallly, the text has to be wrapped in a <span> tag with the class highlight and a data attribute data-highlighted="true".

<span data-highlighted="true" class="highlight">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eleifend porttitor vehicula facilisi
</span>

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.

Stored data​

<div id="text_highlighter"
    data-win-control="Highlighter"
    data-win-options="{
        label: 'Text Highlighter',
        tooltip: '',
        mark: 'highlight'
    }">
    <span data-highlighted="true" data-timestamp="1717412668684" class="highlight">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Eleifend porttitor vehicula facilisi </span>urna euismod litora diam viverra primis accumsan ultrices mi suscipit.
    Mus ad quam conubia <strong>hendrerit torquent ullamcorper</strong> elementum consequat eu amet velit consequat condimentum.
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</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": "<span data-highlighted=\"true\" data-timestamp=\"1717412668684\" class=\"highlight\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Eleifend porttitor vehicula facilisi </span>urna euismod litora diam viverra primis accumsan ultrices mi suscipit.Mus ad quam conubia <strong>hendrerit torquent ullamcorper</strong> elementum consequat eu amet velit consequat condimentum.<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>"
}