Skip to main content
Version: Upcoming 🦄

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-hf-control="Highlighter"
    data-hf-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 the 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 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 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.

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="Highlighter"
    data-hf-options="{
    label: 'Text Highlighter',
    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="text_highlighter"
    data-hf-control="Highlighter"
    data-hf-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 an 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>"
}