# HybridForms
## 10.0
### Custom Code Guide
#### [๐๏ธ Integration](https://manuals.hybridforms.net/docs/10.0/custom-code-guide/integration.md)
[We strongly advice for TypeScript over JavaScript when implementing Custom Code.](https://manuals.hybridforms.net/docs/10.0/custom-code-guide/integration.md)
---
### Custom Styling Guide
#### [๐๏ธ Integration](https://manuals.hybridforms.net/docs/10.0/custom-styling-guide/integration.md)
[SCSS files cannot be directly included in the Form, they must first be compiled into standard CSS files.](https://manuals.hybridforms.net/docs/10.0/custom-styling-guide/integration.md)
---
### Features
#### [๐๏ธ Conditions](https://manuals.hybridforms.net/docs/10.0/form-templates/features/conditions.md)
[Conditions enable you to offer different options of form parts based on the input, alter the visibility of form parts or create dependencies.](https://manuals.hybridforms.net/docs/10.0/form-templates/features/conditions.md)
---
### Form Controls
#### [๐๏ธ ButtonControl](https://manuals.hybridforms.net/docs/10.0/form-controls/buttoncontrol.md)
[The ButtonControl invokes a predefined custom callback.](https://manuals.hybridforms.net/docs/10.0/form-controls/buttoncontrol.md)
---
### Form Templates
#### [๐๏ธ Folder Structure](https://manuals.hybridforms.net/docs/10.0/form-templates/folder-structure.md)
[Form Templates and Areas](https://manuals.hybridforms.net/docs/10.0/form-templates/folder-structure.md)
---
### FormDev
#### [๐๏ธ Quickstart](https://manuals.hybridforms.net/docs/10.0/formdev/quickstart.md)
[Form development environment for developing Form Templates locally](https://manuals.hybridforms.net/docs/10.0/formdev/quickstart.md)
---
### HF Utilitiy Classes
#### [๐๏ธ Borders](https://manuals.hybridforms.net/docs/10.0/custom-styling-guide/hf-utility-classes/borders.md)
[Use border utilities to easily style the border and border-radius of an element. This is especially useful for images, buttons, and other elements.](https://manuals.hybridforms.net/docs/10.0/custom-styling-guide/hf-utility-classes/borders.md)
---
### HTML Template File
#### [๐๏ธ Basics](https://manuals.hybridforms.net/docs/10.0/form-templates/html-template-file/basics.md)
[The General Structure](https://manuals.hybridforms.net/docs/10.0/form-templates/html-template-file/basics.md)
---
### JS (deprecated)
#### [๐๏ธ Integration](https://manuals.hybridforms.net/docs/10.0/custom-code-guide/js/integration.md)
[There are two possible ways to implement JS functionality:](https://manuals.hybridforms.net/docs/10.0/custom-code-guide/js/integration.md)
---
### Controls
Custom Controls in HybridForms are specialized TypeScript classes designed to enhance Form Development by providing tailored functionality and visual components. Derived from `HybridForms.API.UIControls.BaseControl`, these controls have the capability to render HTML elements, manage events, and seamlessly integrate with the HybridForms Framework.
The key features of Custom Controls include:
* **HTML Rendering**: Custom Controls can generate HTML elements dynamically, allowing for the creation of customized user interfaces tailored to specific Form requirements.
* **Event Management**: These controls are equipped with event registration and deregistration mechanisms, enabling developers to handle user interactions and trigger actions within the Form.
* **Modularity**: Custom Controls promote code modularity and reusability by encapsulating functionality within self-contained TypeScript classes. This modular approach simplifies Form development and maintenance, enhancing overall code organization and readability.
By leveraging Custom Controls, developers can extend the capabilities of HybridForms, streamline Form development workflows, and create rich, interactive user experiences tailored to their unique requirements.
#### Integration within the HTML[โ](#integration-within-the-html "Direct link to Integration within the HTML")
```html
```
Note
IMPORTANT FACTS
* All registered event handlers have to get deregistered (dispose pattern) when the Form is left. Therefore you have to implement your `dispose()` method within your control.
* It is recommended that all Custom Controls derive from the HybridForms BaseControl `HybridForms.API.UIControls.BaseControl`
* This control adds the `win-disposable` class to the HTML markup and calls the dispose method when leaving the page.
* Override the `dispose`-method where to remove all previously registered event handlers.
#### Example usage in TypeScript and HTML[โ](#example-usage-in-typescript-and-html "Direct link to Example usage in TypeScript and HTML")
* TypeScript
* HTML
```typescript
export class CustomControl extends HybridForms.API.UIControls.BaseControl {
// instance properties
private onRendered: () => void;
public publicProp1: string;
// instance methods
constructor(element, options) {
super(element, options);
}
protected createControl(): Promise {
// will be called by base class
console.log('createControl');
// return a promise here, when all ui relevant work is done!
return Promise.resolve();
}
protected createView() {
// will be called by base class
// get called on PDF creation
}
protected registerEvents() {
// will be called by base class
// registerEvents here
console.log('registerEvents');
this.onRendered = () => {
console.log('form is rendered and ready');
};
HybridForms.API.Page.addEventListener('rendered', this.onRendered);
HybridForms.API.Page.addEventListener('viewrendered', this.onRendered);
}
public dispose() {
if (this.disposed) {
return;
}
// dispose registered events here
if (this.onRendered) {
HybridForms.API.Page.removeEventListener('rendered', this.onRendered);
HybridForms.API.Page.removeEventListener('viewrendered', this.onRendered);
}
this.disposed = true;
}
public static staticMethod() {
// static method
}
}
```
```html
```
---
### Examples
In HybridForms development, TypeScript functions are crucial for creating dynamic Forms. This guide explores their syntax, strategies, and best practices within the Framework. From event handling to data manipulation, functions empower developers to optimize Form performance and enhance user experience.
Our reliance on the FormAPI is significant for tasks such as retrieving and setting Form Control values, data manipulation, and managing Form events. For further details, please refer to our documentation available [here](https://manuals.hybridforms.net/form-api).
#### Combining Two ComboBoxes[โ](#combining-two-comboboxes "Direct link to Combining Two ComboBoxes")
* TypeScript
* HTML
```typescript
namespace HFFormdefinition.SomeNamespace {
/*
* filterData
* Type: onChanged Method
* Description:
* When choosing a Value from the Main ComboBox, the content in the Sub ComboBox
* will change to the relevant content for the selection.
* Works in both non- and repeating units.
* @data-hf-options:
* subCtrlId[string](required): formcontrol-id of effected ComboBox
*/
export function filterData() {
const filterField = this.val();
let currentRU = '';
if (HybridForms.API.RepeatingUnits.isRepeatingUnit(this.element)) {
currentRU = HybridForms.API.RepeatingUnits.getPostfixFieldId(this.element);
}
const comboBoxTargetCtrl = HybridForms.API.FormControls.getCtrl(this.subCtrlId + currentRU);
if (typeof comboBoxTargetCtrl === 'undefined') {
return;
}
const dataSource = comboBoxTargetCtrl.dataSource;
if (!filterField || !filterField.value) {
comboBoxTargetCtrl.setDataSource(dataSource);
return;
}
const filterByValue = filterField.value;
const filtered = dataSource.filter(function (item) {
return filterByValue === item.kat;
});
comboBoxTargetCtrl.setDataSource(filtered);
}
}
```
```html
```
#### Initializr Control[โ](#initializr-control "Direct link to Initializr Control")
* TypeScript
* HTML
```typescript
namespace HFFormdefinition.SomeNamespace {
export function highlightCell() {
$('input:radio, input:checkbox').each(function () {
const id = this.dataset?.hfId ? this.dataset.hfId : this.id;
const ctrl = HybridForms.API.FormControls.getCtrl(id);
const val = ctrl.val();
$(this)
.closest('div.color')
.toggleClass('highlight', val ? val : false);
});
}
/**
* Initializr: calls a callback function when the form is rendered
*/
export class Initializr extends HybridForms.API.UIControls.BaseControl {
private onRendered: () => void;
public callback: () => void;
constructor(element, options) {
super(element, options);
if (typeof this.callback === 'function') {
this.onRendered = () => {
this.callback.call(this);
};
HybridForms.API.Page.addEventListener('rendered', this.onRendered);
HybridForms.API.Page.addEventListener('viewrendered', this.onRendered);
}
}
public dispose() {
if (this.disposed) {
return;
}
if (this.onRendered) {
HybridForms.API.Page.removeEventListener('rendered', this.onRendered);
HybridForms.API.Page.removeEventListener('viewrendered', this.onRendered);
}
this.disposed = true;
}
}
}
```
```html
```
#### Data Source Handling[โ](#data-source-handling "Direct link to Data Source Handling")
* TypeScript
* HTML
```typescript
namespace HFFormdefinition.SomeNamespace {
/**
* setDataSource: sets the data source for a control
*/
export function setDataSource() {
HybridForms.API.FormStorage.getCatalog('StateCatalog').then((dataSource) => {
const amountField = HybridForms.API.Fields.getById('programmatic_set_datasource');
const fieldValue = amountField.value;
const amountCtrl = HybridForms.API.FormControls.getCtrl('programmatic_set_datasource');
amountCtrl.isLoaded().then(() => {
amountCtrl.setDataSource(dataSource);
if (fieldValue) {
amountCtrl.val(fieldValue);
}
});
});
}
}
```
```html
/api/catalogs/Staat?$select=Title,KatalogText&$orderby=KatalogText&$top=5000
```
#### User Display Name Handling[โ](#user-display-name-handling "Direct link to User Display Name Handling")
* TypeScript
* HTML
```typescript
namespace HFFormdefinition.SomeNamespace {
export function setUser() {
return HybridForms.API.User.get().displayName || '';
}
}
```
```html
```
#### Repeating Inputs[โ](#repeating-inputs "Direct link to Repeating Inputs")
* TypeScript
* HTML
* SCSS
```typescript
namespace HFFormdefinition.SomeNamespace {
export class addInput extends HybridForms.API.UIControls.BaseControl {
constructor(element, options) {
super(element, options);
}
private clickEvent(event) {
const targetId = event.currentTarget.id;
const $block = $(`#${targetId}`).closest('.repeating-input-container');
$('.repeating-input.hf-hide', $block).first().removeClass('hf-hide');
}
private getElementId(element: HTMLElement): string {
if (this.isView) {
return element.dataset.hfId;
}
return element.id;
}
private showRepeatingInputs($ct: JQuery | HTMLElement) {
$('.repeating-input:not(.init)', $ct).each((idx, element) => {
const $element = $(element);
const $input = $('.hf-formcontrol', $element);
let filled = false;
$input.each((index, el) => {
const field = HybridForms.API.Fields.getById(this.getElementId(el));
const value = field?.value;
if (value) {
filled = true;
}
});
if (filled) {
$element.removeClass('hf-hide');
} else {
$element.addClass('hf-hide');
}
});
}
protected createView() {
const $ct = this.$element.closest('.repeating-input-container');
this.showRepeatingInputs($ct);
}
protected createControl(): Promise {
const currentStatus = HybridForms.API.Form.getStatus();
if (currentStatus > 1) {
this.$element.parents('.add-input-wrapper').addClass('hf-hide');
}
const $ct = this.$element.closest('.repeating-input-container');
this.showRepeatingInputs($ct);
this.$element.on('click', (ev) => {
ev.stopImmediatePropagation();
ev.preventDefault();
this.clickEvent(ev);
});
return Promise.resolve();
}
public dispose() {
if (this.disposed) {
return;
}
this.$element.off('click');
this.disposed = true;
}
}
export class removeInput extends HybridForms.API.UIControls.BaseControl {
constructor(element, options) {
super(element, options);
}
private clickEvent(event) {
const targetId = event.currentTarget.id;
const $block = $(`#${targetId}`).closest('.repeating-input-container');
const $inputBlock = $('#' + event.currentTarget.id, $block).closest('.repeating-input');
const $input = $('.hf-formcontrol', $inputBlock);
$input.each((idx, element) => {
HybridForms.API.FormControls.getCtrl(element.id).val(null);
});
const $ruInputs = $('.repeating-input:not(.hf-hide)', $block);
$ruInputs.each((idx, context) => {
const $context = $(context);
const idPostfix = idx + 1;
let emptyRow = true;
const $formControls = $('.hf-formcontrol', $context);
$formControls.each((index, element) => {
if ($(element).hasClass('filled')) {
emptyRow = false;
}
});
if (emptyRow && idPostfix < $ruInputs.length) {
$formControls.each((index, element) => {
const id = element.id;
const ctrl = HybridForms.API.FormControls.getCtrl(id);
const nextId = id.replace(/input_(?:\d*)/, `input_${idPostfix + 1}`);
let nextCtrl = HybridForms.API.FormControls.getCtrl(nextId);
let nextVal = nextCtrl.val();
if (nextVal && typeof nextVal.value !== 'undefined') {
nextVal = nextCtrl.val().value;
}
ctrl.val(nextVal);
nextCtrl.val(null);
nextCtrl = null;
});
}
});
$('.repeating-input:not(.hf-hide):not(.init)', $block).last().addClass('hf-hide');
}
protected createControl(): Promise {
const currentStatus = HybridForms.API.Form.getStatus();
if (currentStatus > 1) {
this.$element.addClass('hf-hide');
}
this.$element.on('click', (ev) => {
ev.stopImmediatePropagation();
ev.preventDefault();
this.clickEvent(ev);
});
return Promise.resolve();
}
public dispose() {
if (this.disposed) {
return;
}
this.$element.off('click');
this.disposed = true;
}
}
}
```
```html
Hinzufรผgen
```
```scss
/* Repeating Input START */
.add-input-wrapper {
margin-bottom: 15px;
}
.add-input {
background-color: #d9d9d9;
border-radius: 4px;
padding: 10px 0;
cursor: pointer;
&:hover {
background-color: #cccccc;
}
p {
text-align: center;
margin: 0 !important;
}
}
.remove-input {
position: absolute;
top: 0;
right: 10px;
width: 30px;
height: 30px;
padding: 5px;
z-index: 9;
.remove-icon {
text-align: center;
color: black !important;
background-color: #d9d9d9;
margin: 0 !important;
height: 20px;
width: 20px;
border-radius: 100%;
cursor: pointer;
&:hover {
background-color: #cccccc;
}
}
}
.repeating-input.multiline {
.remove-input {
position: relative;
right: 0;
margin-left: 10px;
padding: 0;
.remove-icon {
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
width: 30px;
height: 30px;
}
}
.flex-1-shrink {
align-self: flex-end;
margin-bottom: 10px;
}
&:nth-child(even) {
background-color: rgba(217, 217, 217, 0.3);
}
}
.repeating-input {
display: none;
&.init {
display: block;
}
&:not(.multiline) {
.hf-numericfield:not(.no-padding) .k-input,
.hf-textfield:not(.no-padding) {
padding-right: 30px;
}
}
.hf-formcontrol {
&.hf-view {
display: none;
&.filled {
display: block;
}
}
}
}
/* Repeating Input END */
```
---
### Functions
Functions in TypeScript play a crucial role in enhancing the functionality of HybridForms by encapsulating reusable code that can be invoked as needed.
#### Integration within the HTML[โ](#integration-within-the-html "Direct link to Integration within the HTML")
Incorporating functions into your Form Definition in HybridForms offers versatile opportunities. For instance, you can utilize `onChanged` methods of Form Controls or callbacks of ListTemplates. These functions serve various purposes such as reacting to user inputs, customizing the interface, or implementing intricate business logic.
The function context within this integration is typically bound to the Form Control that triggers the function. Therefore, `this` refers to the Form Control itself, providing direct access to its properties and methods.
#### Example usage in TypeScript and HTML[โ](#example-usage-in-typescript-and-html "Direct link to Example usage in TypeScript and HTML")
* TypeScript
* HTML
```typescript
namespace HFFormdefinition.SomeNamespace {
export function doSomethingOnChange(value) {
console.log('value: ', value);
console.log('ctrl: ', this);
}
}
```
```html
```
---
### Integration
We strongly advice for TypeScript over JavaScript when implementing Custom Code. TypeScript offers type safety and significantly improved support for autocompletion in code editors. However, if you prefer to use JavaScript, you can find the documentation [here](https://manuals.hybridforms.net/docs/10.0/custom-code-guide/js/integration.md).
To incorporate TypeScript into your Form Development process, create a "tsconfig.json" file within the Form Definition folder. You can find a sample configuration file included in our "formDev" project.
Since TypeScript files cannot be directly included in the Form, they need to be transpiled into regular JavaScript files first. This transpilation process occurs automatically upon saving your files or can be triggered manually using the Template Exporter tool.
Once transpiled, link the JavaScript files in the script tag within the header of your Form Definition:
```html
```
For detailed examples, explore the Forms provided within the FormDefinitions folder of the "formDev" project.
#### The basic structure of HybridForms TypeScript (file)[โ](#the-basic-structure-of-hybridforms-typescript-file "Direct link to The basic structure of HybridForms TypeScript (file)")
**Define your namespace**
```typescript
namespace HFFormdefinition.BaseHelpers {
// variables, functions and classes
}
```
**Naming Convention for Namespacing:**
* HFFormdefinition.\[FORMDEFINITION-TITLE]
* HFFormdefinition.\[EXTERNAL-JS-FILENAME]
Note
Define the namespace **once** within the HTML Form Definition, especially when utilizing external files. Ensure that each Form Definition has a unique namespace to prevent any potential issues.
#### Full TypeScript example[โ](#full-typescript-example "Direct link to Full TypeScript example")
* TypeScript
* HTML
```typescript
namespace HFFormdefinition.BaseHelpers {
export function doSomethingOnChange(value) {
console.log('value: ', value);
console.log('ctrl: ', this);
}
}
```
```html
[...]
[...]
```
---
### Controls
Custom Controls in HybridForms are specialized WinJS classes designed to enhance Form development by providing tailored functionality and visual components. Derived from `HybridForms.API.UIControls.BaseControl`, these controls have the capability to render HTML elements, manage events, and seamlessly integrate with the HybridForms framework.
Key features of Custom Controls include:
* **HTML Rendering**: Custom Controls can generate HTML elements dynamically, allowing for the creation of customized user interfaces tailored to specific Form requirements.
* **Event Management**: These controls are equipped with event registration and deregistration mechanisms, enabling developers to handle user interactions and trigger actions within the Form.
* **Modularity**: Custom Controls promote code modularity and reusability by encapsulating functionality within self-contained WinJS classes. This modular approach simplifies Form development and maintenance, enhancing overall code organization and readability.
By leveraging Custom Controls, developers can extend the capabilities of HybridForms, streamline Form development workflows, and create rich, interactive user experiences tailored to their unique requirements.
#### Integration within the HTML[โ](#integration-within-the-html "Direct link to Integration within the HTML")
```html
```
Note
IMPORTANT FACTS
* All registered event handlers have to get deregistered (dispose pattern) when the Form is left. Therefore you have to implement your `dispose()` method within your control.
* It is recommended that all Custom Controls derive from the HybridForms BaseControl `HybridForms.API.UIControls.BaseControl`
* This control adds the `win-disposable` class to the HTML markup and calls the dispose method when leaving the page.
* Override the `dispose`-method where to remove all previously registered event handlers.
#### Example usage in TypeScript and HTML[โ](#example-usage-in-typescript-and-html "Direct link to Example usage in TypeScript and HTML")
* JavaScript
* HTML
```javascript
CustomControl: WinJS.Class.derive(
HybridForms.API.UIControls.BaseControl,
function (element, options) {
HybridForms.API.UIControls.BaseControl.call(this, element, options);
},
{
// instance properties
_onRendered: null,
publicProp1: null,
// instance methods
_init: function (element) {
// _init Method gets called in BaseControl.
// call the BaseControl _init Method with the call-Method
HybridForms.API.UIControls.BaseControl.prototype._init.call(this, element);
},
createControl: function () {
// will be called by base class
console.log('createControl');
// return a promise here, when all ui relevant work is done!
return Promise.resolve();
},
registerEvents: function () {
// will be called by base class
// registerEvents here
console.log('registerEvents');
this._onRendered = function () {
console.log('form is rendered and ready');
};
HybridForms.API.Page.addEventListener('rendered', this._onRendered);
HybridForms.API.Page.addEventListener('viewrendered', this._onRendered);
},
dispose: function () {
if (this.disposed) {
return;
}
// dispose registered events here
if (this.onRendered) {
HybridForms.API.Page.removeEventListener('rendered', this._onRendered);
HybridForms.API.Page.removeEventListener('viewrendered', this._onRendered);
}
this.disposed = true;
},
},
{
//Static methods
},
);
```
```html
```
---
### Functions
Functions in TypeScript play a crucial role in enhancing the functionality of HybridForms by encapsulating reusable code that can be invoked as needed.
#### Integration within the HTML[โ](#integration-within-the-html "Direct link to Integration within the HTML")
Incorporating functions into your Form Definition in HybridForms offers versatile opportunities. For instance, you can utilize `onChanged` methods of Form Controls or callbacks of ListTemplates. These functions serve various purposes such as reacting to user inputs, customizing the interface, or implementing intricate business logic.
The function context within this integration is typically bound to the Form Control that triggers the function. Therefore, `this` refers to the Form Control itself, providing direct access to its properties and methods.
#### Example usage in JavaScript and HTML[โ](#example-usage-in-javascript-and-html "Direct link to Example usage in JavaScript and HTML")
* JavaScript
* HTML
```javascript
(function () {
'use strict'; // forcing browser to strict mode Javascript
WinJS.Namespace.define('HFFormdefinition.SomeNamespace', {
doSomethingOnChange: function (value) {
console.log('value: ', value);
console.log('ctrl: ', this);
},
});
})();
//# sourceURL=[onChangedExample].js
```
```html
```
---
### Integration
There are two possible ways to implement JS functionality:
1. Directly within the HTML Form Definition in the head section or within HybridForms blocks:
```html
```
2. Via an external file and linked scriptTag within the Form Definition's header:
```html
```
For detailed examples, explore the Forms provided within the FormDefinitions folder of the "formDev" project.
#### The basic structure of HybridForms JavaScript (file)[โ](#the-basic-structure-of-hybridforms-javascript-file "Direct link to The basic structure of HybridForms JavaScript (file)")
1. **Pack JS within an IIFE (Immediately Invoked Function Expression)**
```javascript
(function () {
'use strict'; // forcing browser to strict mode Javascript
// code here
})();
```
2. **Define your WinJS namespace**
```javascript
WinJS.Namespace.define('HFFormdefinition.NamespaceChild', {
// variables, functions and classes
});
```
3. **For browser (e.g. chrome) debbugging purposes, add the following at the end of the file**
```javascript
//# sourceURL=[Name of the js file].js
```
4. **If you are using ESLint and the `no-undef-rule`, add globals at the beginning of the file to prevent ESLint errors**
```javascript
/* global $ WinJS Icomedias HybridForms [...] */
```
**Naming convention for namespacing:**
* HFFormdefinition.\[FORMDEFINITION-TITLE]
* HFFormdefinition.\[EXTERNAL-JS-FILENAME]
Note
Define the namespace once within the HTML Form Definition, especially when utilizing external files. Ensure that each Form Definition has a unique namespace to prevent any potential issues.
#### Full JavaScript example[โ](#full-javascript-example "Direct link to Full JavaScript example")
* JavaScript
* HTML
```javascript
/* ESLint no-undef-rule: define globals to prevent ESLint errors */
/* global $ WinJS IcoWinJS kendo HFWinJS HybridForms Icomedias HFFormdefinition */
(function () {
'use strict'; // forcing browser to strict mode JavaScript
WinJS.Namespace.define('HFFormdefinition.BaseHelpers', {
// variables, functions and classes
});
})();
//# sourceURL=[Name of the js file].js
```
```html
[...]
[โฆ]
```
---
### Borders
Use border utilities to easily style the border and border-radius of an element. This is especially useful for images, buttons, and other elements.
Below, you can see how to set the border, adjust the border width, omit the border, set the border color, and add a border radius.
#### Additive[โ](#additive "Direct link to Additive")
Result
Loading...
Live Editor
Result
Loading...
Live Editor
#### Subtractive[โ](#subtractive "Direct link to Subtractive")
Result
Loading...
Live Editor
#### Border Color[โ](#border-color "Direct link to Border Color")
Result
Loading...
Live Editor
#### Border Radius[โ](#border-radius "Direct link to Border Radius")
Result
Loading...
Live Editor
---
### Button
Use button utilities to quickly style buttons in HybridForms Forms.
#### Button Colors[โ](#button-colors "Direct link to Button Colors")
Use FormButton color classes to style them in different colors. You can set the button to have default, primary, warning, or error styles.
##### Default Button[โ](#default-button "Direct link to Default Button")
##### Primary Button[โ](#primary-button "Direct link to Primary Button")
Primary style: `class="hf-formbutton-primary"`.
```html
```
##### Warning Button[โ](#warning-button "Direct link to Warning Button")
Warning style: `class="hf-formbutton-warning"`.
```html
```
##### Error Button[โ](#error-button "Direct link to Error Button")
Error style: `class="hf-formbutton-error"`.
```html
```
#### CheckBox as a Button style[โ](#checkbox-as-a-button-style "Direct link to CheckBox as a Button style")
Use button style utility to quickly style CheckBoxes like buttons.
```html
```
#### Button Inline[โ](#button-inline "Direct link to Button Inline")
Use button inline utility to quickly place a small button inline with a TextField under a label.
```html
```
#### Button Inline with validator[โ](#button-inline-with-validator "Direct link to Button Inline with validator")
FormControl with error text has to be wrapped in a `hf-button-inline-input` container to work properly.
```html
```
---
### Color
Use color utilities to quickly style the text and background color of an element. Great for container, buttons, or any other element. Below, you can find how to style text color, background, buttons, or radio buttons.
#### Text Color[โ](#text-color "Direct link to Text Color")
Result
Loading...
Live Editor
#### Background Color[โ](#background-color "Direct link to Background Color")
Result
Loading...
Live Editor
#### Button Color[โ](#button-color "Direct link to Button Color")
Result
Loading...
Live Editor
#### Radio Button Color[โ](#radio-button-color "Direct link to Radio Button Color")
Result
Loading...
Live Editor
---
### Helpers
There are several helper utilities for quick styling.
#### Cursor[โ](#cursor "Direct link to Cursor")
Result
Loading...
Live Editor
#### Input disabled style[โ](#input-disabled-style "Direct link to Input disabled style")
Style any HTML tag as disabled input control.
Result
Loading...
Live Editor
---
### Layout
Use layout utilities to quickly add layout specific stylings.
#### Flex[โ](#flex "Direct link to Flex")
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
##### Enable flex behaviors[โ](#enable-flex-behaviors "Direct link to Enable flex behaviors")
Result
Loading...
Live Editor
##### Direction[โ](#direction "Direct link to Direction")
Result
Loading...
Live Editor
Result
Loading...
Live Editor
##### Gap[โ](#gap "Direct link to Gap")
Result
Loading...
Live Editor
Result
Loading...
Live Editor
##### Grow[โ](#grow "Direct link to Grow")
Result
Loading...
Live Editor
##### Shrink[โ](#shrink "Direct link to Shrink")
Result
Loading...
Live Editor
##### Auto[โ](#auto "Direct link to Auto")
Result
Loading...
Live Editor
##### Justify Content[โ](#justify-content "Direct link to Justify Content")
Result
Loading...
Live Editor
##### Align Items[โ](#align-items "Direct link to Align Items")
Result
Loading...
Live Editor
##### Align Self[โ](#align-self "Direct link to Align Self")
Result
Loading...
Live Editor
#### Float[โ](#float "Direct link to Float")
Toggle floats on any element, across any breakpoint, using the responsive float utilities.
Result
Loading...
Live Editor
#### Width[โ](#width "Direct link to Width")
Set element to full width.
Result
Loading...
Live Editor
#### Display[โ](#display "Direct link to Display")
Quickly toggle the display value of components.
```html
```
Hide elements if the Form has only one column (mobile devices).
Result
Loading...
Live Editor
---
### Integration
SCSS files cannot be directly included in the Form, they must first be compiled into standard CSS files.
The CSS files must be linked using the `link` tag within the Form Definition's header:
```html
```
Note
For detailed examples have a look at the Forms provided within the FormDefinitions folder of the "formDev" or visit the official [Sass/Scss documentation.](https://sass-lang.com/)
---
### Theming
Unlock creativity with our powerful theming system! Effortlessly customize the look and feel of HybridForms using intuitive themes, CSS variables for dynamic styling, and extensive style customization options.
#### Color Palettes[โ](#color-palettes "Direct link to Color Palettes")
color-palettes.scss
```scss
:where(:root) {
// color scales
// blue scale based on primary
--blue-50: #f2f7fd;
--blue-100: #e3edfb;
--blue-150: #d3e5f3; //primary-light
//--blue-200: #c1dcf6;
// neu
--blue-200: #d5ebfa; // primary-light-20
--blue-250: #a7bed5; // Primary-dirty
--blue-299: #7fb8e6; //* redesign, rahmenfarbe dashboard listpage
--blue-300: #66a0d2;
--blue-400: #4d9ee3;
--blue-500: #0072ce; // primary
--blue-600: #1866b1;
--blue-700: #145190;
--blue-800: #154677;
--blue-850: #175082; // primary-dark
--blue-900: #173b63;
--blue-950: #0f2642;
--blue-1000: #233543; //* redesign, background color required fields
// neu
--mint-green: #ccebe9;
--mint-green-50: #f1fafa;
--mint-green-100: #ccebe9;
--mint-green-200: #bde4e2;
--mint-green-300: #8fd1cf;
--mint-green-400: #5ab6b4;
--mint-green-500: #3e9c9c;
--mint-green-600: #368184;
--mint-green-700: #31696d;
--mint-green-800: #2f575b;
--mint-green-900: #2b494e;
--mint-green-950: #183034;
--mint-green-dark-500: #2a5d5f;
--mint-green-dark-700: #00454a;
//yellorange
--yellorange-50: #fff9eb;
--yellorange-100: #ffedc6;
--yellorange-125: #fef5e2; // background-highlight-area
--yellorange-150: #ffdd9e; // warning-light
--yellorange-200: #ffd988;
--yellorange-225: #f9cf77; // hightlighting-border color
--yellorange-250: #F89303;
--yellorange-300: #d28900; //warning
--yellorange-350: #ffbe67;
--yellorange-400: #ffa620;
--yellorange-500: #f98207;
--yellorange-600: #dd5c02;
--yellorange-700: #b73e06;
--yellorange-800: #942f0c;
--yellorange-900: #7a280d;
--yellorange-950: #461202;
--brownish-500: #5c461a;
--brownish-700: #3a2f1a;
// red
--red-100: #FDE6E5;
--red-200: #ff9999;
--red-300: #fd8484;
--red-400: #ff6666;
--red-500: #ff0000; // danger
--red-600: #EB0D00;
--red-700: #cc0000;
--red-800: #b30000;
--red-900: #a80011;
// green
--forest-green-50: #f2fcf1;
--forest-green-100: #defade;
--forest-green-200: #c0f3bf;
--forest-green-300: #8fe78e;
--forest-green-350: #87c79f;
--forest-green-400: #55d355;
--forest-green-450: #62a87c;
--forest-green-500: #2eb92e;
--forest-green-550: #457556;
--forest-green-600: #24ab24; // success
--forest-green-700: #1d781d;
--forest-green-800: #1c5f1c;
--forest-green-900: #194e1a;
--forest-green-950: #082b0a;
// gray
--gray-50: #F8F8F8;
--gray-75: #f6f6f6; //* light-10
--gray-100: #efefef;
--gray-101: #e0e0e0; //* textcolor dark
--gray-150: #ededed; //print-border-color
--gray-175: #e6e6e6; //print-border-color
--gray-200: #dcdcdc; // light-20
--gray-250: #cccccc; // light-25
--gray-300: #bdbdbd; // light-30
--gray-400: #989898;
--gray-450: #929694;
--gray-500: #7c7c7c;
--gray-550: #757575;
--gray-600: #656565;
--gray-701: #5f5f5f; //* zB, --header-icon-bg
--gray-700: #525252;
--gray-800: #464646;
--gray-850: #333333;
--gray-900: #3d3d3d;
--gray-925: #333333;
--gray-950: #272727; //* li item background
--gray-970: #212121;
--gray-990: #1d1d1d;
--gray-999: #121212; //* body background
--gray-200-alpha-50: rgba(220, 220, 220, 0);
--white-color: #ffffff;
--black-color: #000000;
--gradient-blue-green: linear-gradient(90deg, #175082 53%, #0c6577 100%);
// shadows
--shadow-key-umbra-opacity: 0.2;
--shadow-key-penumbra-opacity: 0.14;
--shadow-ambient-shadow-opacity: 0.12;
--shadow-0: none;
--shadow-1: 0px 2px 1px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 1px 1px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 3px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-2: 0px 3px 1px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 2px 2px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 5px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-3: 0px 3px 3px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 3px 4px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 8px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-4: 0px 2px 4px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 4px 5px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 10px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-5: 0px 3px 5px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 5px 8px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 14px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-6: 0px 3px 5px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 6px 10px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 18px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-7: 0px 4px 5px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 7px 10px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 2px 16px 1px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-8: 0px 5px 5px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 8px 10px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 3px 14px 2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-9: 0px 5px 6px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 9px 12px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 3px 16px 2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-10: 0px 6px 6px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 10px 14px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 4px 18px 3px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-11: 0px 6px 7px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 11px 15px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 4px 20px 3px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-12: 0px 7px 8px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 12px 17px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 5px 22px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-13: 0px 7px 8px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 13px 19px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 5px 24px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-14: 0px 7px 9px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 14px 21px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 5px 26px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-15: 0px 8px 9px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 15px 22px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 6px 28px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-16: 0px 8px 10px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 16px 24px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 6px 30px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-17: 0px 8px 11px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 17px 26px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 6px 32px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-18: 0px 9px 11px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 18px 28px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 7px 34px 6px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-19: 0px 9px 12px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 19px 29px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 7px 36px 6px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-20: 0px 10px 13px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 20px 31px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 8px 38px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-21: 0px 10px 13px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 21px 33px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 8px 40px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-22: 0px 10px 14px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 22px 35px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 8px 42px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-23: 0px 11px 14px -7px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 23px 36px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 9px 44px 8px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-24: 0px 11px 15px -7px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 24px 38px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 9px 46px 8px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
}
```
#### Default Variables[โ](#default-variables "Direct link to Default Variables")
css-variables.scss
```scss
:where(:root) {
/* SAVE-AREAS:
needed for getting th safe-area-inset-top value programmatically in Scaler.ts
in JS, eg: getComputedStyle(document.documentElement).getPropertyValue('--sat')
*/
--sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
--sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
--sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
--sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
--theme: light;
--bg-body: var(--blue-200);
--bg-body-sec: var(--color-light);
// Splashscreen
--bg-splash: var(--bg-body-sec);
--progress-splash: var(--color-primary);
// COLORS
// base definitions
--color-primary: var(--blue-500);
--color-primary-bg: var(--color-primary);
--color-primary-light: color-mix(in srgb, var(--color-primary) 20%, var(--white-color));
--color-primary-dark: color-mix(in srgb, var(--color-primary) 65%, var(--black-color));
--color-secondary: var(--mint-green-300);
--color-secondary-light: var(--mint-green-200);
--color-tertiary: var(--yellorange-200);
--color-tertiary-light: var(--yellorange-100);
--color-tertiary-dark: var(--yellorange-250);
--color-warning: var(--yellorange-250);
--color-warning-light: var(--yellorange-150);
--color-warning-dark: var(--yellorange-400);
--color-warning-text: var(--gray-925);
--color-error: var(--red-600);
--color-error-text: var(--color-light);
--color-danger: var(--red-500);
--color-danger-light: var(--red-100);
--color-success: var(--forest-green-600);
--color-success-dark: var(--forest-green-800);
--color-highlight: var(--yellorange-100);
--color-hyperlink: var(--color-primary);
--color-hyperlink-hover: var(--color-primary-dark);
--bg-disabled: repeating-linear-gradient(
145deg,
var(--gray-100),
var(--gray-100) 3px,
var(--gray-200) 3px,
var(--gray-200) 6px
);
// checkbox und radiobox colors
--color-radio-checkbox-bg: var(--color-light);
--color-radio-checkbox-bg-disabled: var(--gray-100);
--color-radio-checkbox: var(--blue-500);
--color-radio-checkbox-checked: var(--blue-500);
//light colors
--bg-light: var(--white-color);
--bordercolor-light: var(--white-color);
--textcolor-light: var(--white-color);
--color-light: var(--white-color);
--color-light-inverted: var(--white-color);
// dark colors
--textcolor-dark: var(--black-color);
--bordercolor-dark: var(--black-color);
--bg-dark: var(--black-color);
--overlay-bg: var(--gray-925);
--color-dark: var(--black-color);
--color-dark-inverted: var(--black-color);
// only formpage
--formpage-bg-body: var(--bg-body);
--formpage-color-primary: var(--color-primary);
--formpage-color-primary-bg: var(--formpage-color-primary);
--formpage-color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 20%, var(--white-color));
--formpage-color-primary-lighter: color-mix(in srgb, var(--formpage-color-primary) 6%, var(--white-color));
--formpage-color-primary-dark: color-mix(in srgb, var(--formpage-color-primary) 65%, var(--black-color));
--formpage-color-primary-darker: color-mix(in srgb, var(--formpage-color-primary) 25%, var(--black-color));
// fonts & font-sizes
--font-stack: 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-stack-monospace: Courier New, Courier, monospace;
--fontsize-control: 15px;
--fontsize-control-label: 13px;
--fontsize-filterbar: 11px;
--textcolor: var(--gray-925);
--textcolor-inverted: var(--color-light);
--textcolor-invalid: var(--black-color);
--textcolor-hover: var(--gray-700);
--textcolor-sec: var(--gray-600);
--textcolor-placeholder: var(--gray-600);
--selection-textcolor: var(--color-light);
--selection-bg: var(--color-primary-dark);
--header-button-bg: transparent;
--header-button-bg-active: var(--bg-body);
--header-button-bg-hover: transparent;
--header-button-color: var(--gray-50);
--header-button-border: var(--bg-body);
--header-button-border-hover: var(--color-secondary);
--info-msg-bg: var(--gray-950);
--info-msg-bg-lighter: var(--gray-950);
--info-msg-textcolor: var(--color-light);
--info-msg-bordercolor: var(--blue-299);
// Block title
--block-separator-color: var(--formpage-color-primary-light);
--blocktitle-padding-left: 0px;
// status-icons
--status-icon-color: var(--formpage-color-primary);
// controls
--control-bg: var(--gray-50);
--control-bg-transparent: transparent;
--control-bg-filled: var(--bg-light);
--control-bg-disabled: var(--bg-disabled);
--control-bg-req: var(--formpage-color-primary-lighter);
--control-textcolor: var(--color-dark);
--control-textcolor-placeholder: var(--textcolor-placeholder);
--control-bg-feature: var(--formpage-bg-body);
--control-border-color-feature: var(--color-light);
--control-bordercolor: var(--gray-450);
--control-bordercolor-required-not-filled: var(--formpage-color-primary);
--control-bordercolor-view: var(--gray-450);
--control-bordercolor-disabled: var(--gray-200);
--control-bordercolor-hover: var(--gray-500);
--control-icon-color: var(--color-dark);
--control-icon-color-disabled: var(--gray-550);
--control-checkbox-bg: var(--color-radio-checkbox-bg);
--control-checkbox-bg-filled: var(--color-radio-checkbox-checked);
--control-checkbox-icon: var(--color-radio-checkbox-bg);
--control-check-radiobox-border: var(--gray-700);
--control-checkbox-border-filled: var(--color-radio-checkbox-checked);
--control-radiobox-bg: var(--color-radio-checkbox-bg);
--control-radiobox-icon: var(--color-radio-checkbox-checked);
--control-radiobox-border-filled: var(--color-radio-checkbox-checked);
--control-radioCheck-highlight-inactive: var(--gray-600);
--control-radioCheck-highlight-active: var(--gray-925);
--control-toggle-btn-active: var(--formpage-color-primary);
--control-toggle-btn-bg: var(--bg-light);
--control-toggle-btn-border: var(--gray-250);
--control-toggle-btn-text: var(--textcolor-dark);
--label-bg: var(--gray-550);
--feature-label-bg: var(--gray-550);
--label-bg-required: var(--formpage-color-primary-bg);
--label-textcolor: var(--textcolor-light);
--label-checkbox-textcolor: var(--color-dark);
--label-textcolor-filled: var(--color-light);
// formpage block content
--highlight-border-color: var(--yellorange-225);
--highlight-area-bg: var(--yellorange-125);
// tooltip
// default
--tooltip-textcolor: var(--color-light);
// required
--tooltip-textcolor-req: var(--label-bg-required);
--tooltip-flyout-bg: var(--bg-light);
--tooltip-flyout-accent: var(--blue-299);
// badge-new
--badge-new-bg-color: var(--textcolor);
--badge-new-textcolor: var(--textcolor-inverted);
// kendo
--kendo-popup-bg: var(--white-color);
--kendo-popup-textcolor: var(--gray-800);
--kendo-popup-textcolor-dim: var(--gray-600);
--kendo-link-color: var(--formpage-color-primary-dark);
--kendo-link-color-hover: var(--kendo-link-color);
--kendo-chip-bg: var(--gray-100);
--kendo-chip-bg-hover: var(--gray-200);
--kendo-chip-border-color: var(--gray-200);
// SelectControls
--kendo-list-item-bg-odd: var(--gray-150);
// DatePicker
--kendo-calendar-header-bg: var(--gray-50);
--kendo-item-bg-hover: var(--gray-150);
// TimePicker
--kendo-time-highlight-bordercolor: rgba(0, 0, 0, 0.16);
// NumericField
--kendo-input-button-bg: var(--gray-50);
--kendo-input-button-bg-hover: var(--gray-100);
// print
--print-textcolor-label: var(--gray-100);
--print-bordercolor: var(--gray-150);
// buttons
--btn-bg: var(--gray-100);
--btn-dark-color: var(--gray-800);
--btn-dark-color-hover: var(--gray-600);
--btn-dark-textcolor: var(--color-light);
--btn-textcolor-dark: var(--color-dark);
--btn-textcolor-light: var(--color-light);
--btn-primary-color: var(--color-primary);
--btn-primary-color-light: var(--blue-300);
--btn-primary-color-dark: var(--color-primary-dark); // for focus/hover and border
--btn-primary-textcolor: var(--color-light);
--btn-primary-color-disabled: var(--blue-200);
--btn-primary-color-dark-disabled: var(--blue-250);
--btn-primary-textcolor-disabled: var(--gray-550);
--btn-secondary-color: var(--color-secondary-light);
--btn-secondary-color-dark: var(--color-secondary); // for focus/hover and border
--btn-secondary-color-toggled: var(--btn-secondary-color-dark);
--btn-secondary-color-border: var(--color-secondary); // for focus/hover and border
--btn-secondary-textcolor: var(--color-dark);
--btn-secondary-textcolor-dark: var(--btn-secondary-textcolor);
--btn-secondary-textcolor-disabled: var(--gray-550);
--btn-accent-bordercolor: var(--bg-light);
--btn-tertiary-color: var(--color-tertiary);
--btn-gray-color: var(--gray-250);
--btn-gray-color-light: var(--gray-150);
--btn-gray-color-dark: var(--gray-550);
--btn-gray-textcolor: var(--textcolor);
--btn-gray-textcolor-light: var(--textcolor-inverted);
--btn-gray-color-disabled: var(--gray-100);
--btn-gray-color-dark-disabled: var(--gray-200);
--btn-gray-textcolor-disabled: var(--gray-550);
--btn-danger-color: var(--red-500);
--btn-danger-color-light: var(--red-300);
--btn-danger-color-dark: var(--red-900);
--btn-danger-textcolor: var(--color-light);
--btn-danger-color-disabled: var(--red-200);
--btn-danger-color-dark-disabled: var(--red-100);
--btn-danger-textcolor-disabled: var(--gray-550);
--btn-warning-color: var(--color-warning);
--btn-warning-color-light: var(--color-warning-light);
--btn-warning-color-dark: var(--yellorange-300);
--btn-warning-textcolor: var(--color-dark);
--btn-warning-color-disabled: var(--yellorange-100);
--btn-warning-color-dark-disabled: var(--yellorange-150);
--btn-warning-textcolor-disabled: var(--gray-550);
--btn-success-color: var(--forest-green-400);
--btn-success-color-light: var(--forest-green-300);
--btn-success-color-dark: var(--color-success);
--btn-success-textcolor: var(--color-dark);
--btn-success-color-disabled: var(--forest-green-100);
--btn-success-color-dark-disabled: var(--forest-green-200);
--btn-success-textcolor-disabled: var(--gray-550);
--btn-radio-gray: #f1f1f1;
--btn-radio-gray-highlight: #b3b3b3;
--btn-radio-green: color-mix(in srgb, var(--btn-radio-green-highlight) 10%, var(--white-color));
--btn-radio-green-highlight: #2c8a4a;
--btn-radio-lightGreen: color-mix(in srgb, var(--btn-radio-lightGreen-highlight) 10%, var(--white-color));
--btn-radio-lightGreen-highlight: #73c82b;
--btn-radio-yellow: color-mix(in srgb, var(--btn-radio-yellow-highlight) 10%, var(--white-color));
--btn-radio-yellow-highlight: #fbc706;
--btn-radio-orange: color-mix(in srgb, var(--btn-radio-orange-highlight) 10%, var(--white-color));
--btn-radio-orange-highlight: #f47216;
--btn-radio-red: color-mix(in srgb, var(--btn-radio-red-highlight) 10%, var(--white-color));
--btn-radio-red-highlight: #ef3121;
// header
--header-bg: var(--bg-light);
--header-textcolor: var(--textcolor);
--header-icon-bg: var(--gray-100);
--header-icon-success-color: #85b773;
--header-bar-bg: var(--bg-light);
--header-bar-bg-selected: var(--btn-secondary-color);
--header-bar-textcolor: var(--textcolor);
--header-bar-textcolor-selected: var(--textcolor);
--header-bar-bordercolor: var(--header-bar-bg-selected);
--header-search-bg: var(--gray-200);
--listitems-bg: var(--bg-light);
--listitems-bg-secondary: var(--gray-150);
--listitems-unselected-icon-color: var(--gray-200);
--listitems-addbutton-bg: var(--btn-secondary-color);
--featureitems-bg: var(--bg-light);
--featureitems-bg-secondary: var(--tab-content-bg);
--featureitems-color: var(--textcolor);
--featureitems-info-icons-bg: var(--gray-200);
--dialog-bg: var(--bg-light);
--tab-content-bg: var(--bg-light);
--tab-content-border: none;
--tab-bg: var(--tab-content-bg);
--tab-bg-inactive: var(--formpage-bg-body);
--tab-list-active-borderbottom: none;
--tab-list-color-active: var(--textcolor);
--tab-list-color-inactive: var(--gray-550);
--tab-nav-bg: var(--gray-200);
--tab-nav-bg-active: var(--gray-300);
--tab-anchor-bg: var(--gray-200);
--tabmenu-border-color: var(--color-light);
--splitview-bg: var(--bg-light);
--splitview-textcolor: var(--color-dark);
--splitview-textcolor-accent: var(--textcolor-inverted);
--splitview-btn-inactive: var(--bg-light);
--splitview-btn-active: var(--formpage-bg-body);
--splitview-btn-border: var(--formpage-bg-body);
--splitview-features-bg: var(--formpage-bg-body);
--splitview-btn-border-features: var(--formpage-bg-body);
--splitview-btn-border-features-active: var(--splitview-btn-border-features);
--splitview-icon-color: var(--formpage-color-primary);
--splitview-icon-completed-color: var(--gray-550);
--splitview-icon-textcolor: var(--color-light);
--splitview-feature-icon-color: var(--gray-550);
--toolbar-bg: var(--bg-light);
--toolbar-btn-hover: var(--bg-light);
--toolbar-btn-selected: var(--color-secondary);
--toolbar-btn-selected-textcolor: var(--btn-secondary-textcolor-dark);
--toolbar-bordercolor: var(--gray-250);
--toolbar-inline-bg: var(--gray-200);
--view-bg: var(--bg-light);
--border-radius-xs: calc(var(--border-radius) - 4px);
--border-radius-sm: calc(var(--border-radius) - 2px);
--border-radius: 6px;
--border-radius-lg: calc(var(--border-radius) + 2px);
// CheckBox, RadioButton sizes
--radio-button-size: 20px;
--radio-checked-multiplier: 0.5;
--check-button-size: 20px;
--check-checked-multiplier: 0.5;
// maps
--map-btn-bg: var(--bg-light);
--map-ml-btn-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
--ol-background-color: white;
--ol-accent-background-color: #f5f5f5;
--ol-subtle-background-color: rgba(128, 128, 128, 0.25);
--ol-partial-background-color: rgba(255, 255, 255, 0.75);
--ol-foreground-color: #333333;
--ol-subtle-foreground-color: #666666;
--ol-brand-color: #00aaff;
// Opacity disabled
--opacity-disabled: 1;
--btn-bg-disabled: var(--bg-disabled);
--ease-transition-all: all 0.25s cubic-bezier(0, 0, 0.2, 1), outline 0s, outline-offset 0s;
}
:where([data-theme-mode='dark']) {
--color-dark: var(--gray-999);
--theme: dark;
--bg-body: var(--color-dark);
--bg-body-sec: var(--gray-990);
--bg-disabled: repeating-linear-gradient(
145deg,
var(--gray-950),
var(--gray-950) 3px,
var(--gray-800) 3px,
var(--gray-800) 6px
);
--progress-splash: var(--white-color);
--color-danger: #c12828;
--color-danger-light: var(--yellorange-900);
--color-error: #c12828;
--color-primary: var(--blue-500);
--color-primary-light: color-mix(in srgb, var(--color-primary) 50%, var(--black-color));
--color-primary-dark: color-mix(in srgb, var(--color-primary) 50%, var(--white-color));
--color-secondary-light: var(--mint-green-dark-500);
--color-secondary: var(--mint-green-dark-700);
--color-tertiary: var(--color-warning);
--color-tertiary-light: var(--color-warning-light);
--color-tertiary-dark: var(--color-warning-dark);
--formpage-color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--black-color));
--formpage-color-primary-dark: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--white-color));
--color-warning: #ca9c45;
--color-warning-light: #4e3e31;
--color-warning-dark: #573f12;
--color-radio-checkbox-bg: var(--gray-900);
--color-radio-checkbox-bg-disabled: var(--gray-950);
--color-radio-checkbox: var(--color-light);
--color-radio-checkbox-checked: var(--color-light);
--color-highlight: var(--yellorange-200);
--color-light-inverted: var(--color-dark);
--color-dark-inverted: var(--white-color);
--textcolor: var(--gray-101);
--textcolor-hover: var(--gray-300);
--textcolor-sec: var(--gray-300);
--textcolor-inverted: var(--color-dark);
--textcolor-invalid: var(--gray-100);
--textcolor-placeholder: var(--gray-500);
--header-bg: var(--gray-950); //* hsi --gray-950
--header-icon-bg: var(--gray-701);
--header-icon-color: var(--gray-100);
--header-icon-success-color: #608c42;
--header-bar-bg: var(--gray-850);
--header-bar-bg-selected: var(--gray-101);
--header-bar-textcolor: var(--textcolor);
--header-bar-textcolor-selected: var(--textcolor-inverted);
--header-bar-bordercolor: var(--gray-101);
--header-button: var(--gray-800);
--header-search-bg: var(--gray-800);
--listitems-bg: var(--gray-850); //* hsi --gray-950
--listitems-bg-secondary: var(--gray-990);
--listitems-unselected-icon-color: var(--gray-900);
--listitems-addbutton-bg: transparent;
--featureitems-color: var(--color-light);
--toolbar-bg: var(--gray-950);
--toolbar-btn-hover: var(--gray-950);
--toolbar-bordercolor: var(--gray-800);
--toolbar-inline-bg: var(--gray-800);
--dialog-bg: var(--gray-950);
--splitview-bg: var(--gray-950);
--splitview-page-icon-color-required: var(--formpage-color-primary);
--splitview-textcolor: var(--textcolor);
--splitview-textcolor-accent: var(--textcolor);
--splitview-btn-inactive: var(--gray-600);
--splitview-page-icon-color: var(--gray-600);
--splitview-btn-border: var(--gray-800);
--splitview-features-bg: var(--formpage-bg-body);
--splitview-btn-border-features: var(--gray-800);
--splitview-btn-border-features-active: var(--formpage-bg-body);
--splitview-icon-completed-color: var(--gray-701);
--splitview-feature-icon-color: var(--gray-300);
--tab-content-bg: var(--gray-950);
--tab-list-active-borderbottom: 1px solid var(--gray-990);
--tab-list-color-inactive: var(--textcolor-sec);
--tab-nav-bg: var(--gray-990);
--tab-nav-bg-active: var(--gray-970);
--tab-anchor-bg: var(--gray-900);
--tabmenu-border-color: var(--gray-800);
--control-bg: var(--gray-990);
--control-bg-req: var(--formpage-color-primary-darker);
--control-bg-filled: var(--gray-990); // only modern
--control-textcolor: var(--gray-75);
--control-textcolor-placeholder: var(--textcolor-placeholder);
--control-border-color-feature: var(--gray-701);
--control-bordercolor: var(--gray-701);
--control-bordercolor-view: var(--gray-250);
--control-bordercolor-disabled: var(--gray-950);
--control-bordercolor-hover: var(--gray-700);
--control-checkbox-bg-filled: var(--white-color);
--control-check-radiobox-border: var(--gray-700);
--control-radioCheck-highlight-inactive: var(--textcolor);
--control-radioCheck-highlight-active: var(--textcolor);
--control-toggle-btn-bg: var(--gray-950);
--control-toggle-btn-border: var(--gray-950);
--control-toggle-btn-text: var(--gray-75);
--control-icon-color: var(--gray-200);
--control-icon-color-disabled: var(--gray-800);
--tooltip-textcolor: var(--label-textcolor);
--tooltip-textcolor-req: var(--tooltip-textcolor);
--label-bg: var(--gray-701);
--feature-label-bg: var(--gray-701);
--label-textcolor: var(--textcolor);
--label-checkbox-textcolor: var(--textcolor);
--tooltip-flyout-bg: var(--gray-990);
// formpage block content
--highlight-border-color: var(--brownish-500);
--highlight-area-bg: var(--brownish-700);
// badge-new
--badge-new-textcolor: var(--textcolor-inverted);
// kendo
--kendo-popup-bg: var(--gray-800);
--kendo-popup-textcolor: var(--gray-200);
--kendo-popup-textcolor-dim: var(--gray-400);
--kendo-link-color-hover: var(--formpage-color-primary);
--kendo-chip-bg: var(--gray-700);
--kendo-chip-bg-hover: var(--gray-600);
--kendo-chip-border-color: var(--gray-600);
--kendo-item-bg-hover: var(--gray-600);
// SelectControls
--kendo-list-item-bg-odd: var(--gray-900);
// DatePicker
--kendo-calendar-header-bg: var(--gray-900);
// TimePicker
--kendo-time-highlight-bordercolor: rgba(255, 255, 255, 0.26);
// NumericField
--kendo-input-button-bg: var(--gray-970);
--kendo-input-button-bg-hover: var(--gray-900);
// --btn-bg: var(--gray-950);
--btn-bg: var(--gray-990);
--btn-gray-color: var(--gray-700);
--btn-gray-color-light: var(--gray-600);
--btn-gray-color-dark: var(--gray-800);
--btn-gray-textcolor: var(--textcolor);
--btn-gray-textcolor-light: var(--textcolor);
--btn-gray-color-disabled: var(--gray-500);
--btn-gray-color-dark-disabled: var(--gray-700);
--btn-gray-textcolor-disabled: var(--textcolor-sec);
--btn-secondary-textcolor: var(--white-color);
--btn-secondary-textcolor-disabled: var(--white-color);
--btn-accent-bordercolor: var(--gray-600);
--btn-radio-gray: #373737;
--btn-radio-gray-highlight: #7a7a7a;
--btn-radio-green: color-mix(in srgb, var(--btn-radio-green-highlight) 20%, var(--black-color));
--btn-radio-green-highlight: #246e3b;
--btn-radio-lightGreen: color-mix(in srgb, var(--btn-radio-lightGreen-highlight) 20%, var(--black-color));
--btn-radio-lightGreen-highlight: #5ca023;
--btn-radio-yellow: color-mix(in srgb, var(--btn-radio-yellow-highlight) 20%, var(--black-color));
--btn-radio-yellow-highlight: #c99f04;
--btn-radio-orange: color-mix(in srgb, var(--btn-radio-orange-highlight) 20%, var(--black-color));
--btn-radio-orange-highlight: #c35b10;
--btn-radio-red: color-mix(in srgb, var(--btn-radio-red-highlight) 20%, var(--black-color));
--btn-radio-red-highlight: #bf271a;
}
:where([data-theme-type^='modern']) {
--blocktitle-padding-left: 5px;
// tooltip
// default
--tooltip-textcolor: var(--label-bg);
}
:where([data-theme-type^='modern'][data-theme-mode='light']) {
--theme: light;
// label
--label-bg: var(--gray-500);
--feature-label-bg: var(--gray-500);
--label-textcolor: var(--gray-600);
--label-textcolor-req: var(--formpage-color-primary-dark);
}
:where([data-theme-type^='modern'][data-theme-mode='dark']) {
--label-bg: var(--gray-600);
--feature-label-bg: var(--gray-600);
--label-textcolor: var(--gray-200);
--label-textcolor-req: var(--formpage-color-primary-dark);
// tooltip
// default
--tooltip-textcolor: var(--label-textcolor);
--control-bg: var(--gray-925);
--control-bordercolor: var(--gray-700);
--color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--black-color));
}
[data-theme-type='pdf'] {
--bg-body: var(--bg-light);
--control-bordercolor-required-not-filled: var(--gray-450);
}
```
---
### ButtonControl
The ButtonControl invokes a predefined custom callback.
```html
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
##### buttonType - required[โ](#buttonType "Direct link to buttonType")
Define the size of the Button.
**How to use:**
`buttonType: 'medium'`
**Type:** `'small' | 'medium' | 'large'`
***
##### callback - required[โ](#callback "Direct link to callback")
Call a pre-defined JS-method to do something when the Button is invoked.
**How to use:**
`callback: HFFormdefinition.Namespace.Method`
**Type:** `function`
**Signature:** `function() => Promise`
***
##### audioFeedback[โ](#audioFeedback "Direct link to audioFeedback")
Enable/Disable audio feedback on click.
**How to use:**
`audioFeedback: true`
**Type:** `boolean`
**Default:** `true`
***
##### buttonHeading[โ](#buttonHeading "Direct link to buttonHeading")
Define a label for the control element.
**How to use:**
`buttonHeading: 'Test'`
**Type:** `string`
***
##### buttonLabel[โ](#buttonLabel "Direct link to buttonLabel")
Define the Button caption.
Only visible by choosing buttonType 'medium' or 'large'.
**How to use:**
`buttonType: 'medium'`
**Type:** `string`
***
##### buttonStyle[โ](#buttonStyle "Direct link to buttonStyle")
Define the style of the Button.
**How to use:**
`buttonStyle: 'primary'`
**Type:** `'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning'`
***
##### callbackFeedback[โ](#callbackFeedback "Direct link to callbackFeedback")
Enable/Disable callback feedback on callback funtion return.
**How to use:**
`callbackFeedback: true`
**Type:** `boolean`
**Default:** `true`
***
##### disableOnClick[โ](#disableOnClick "Direct link to disableOnClick")
Disable Button while callback function is executed.
**How to use:**
`disableOnClick: false`
**Type:** `boolean`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### icon[โ](#icon "Direct link to icon")
Sets the icon of the Button. Can be FontAwesome Icon or SVG Image.
**How to use:**
`icon: 'fa-barcode-scan'`
**Type:** `string`
***
##### nextToField[โ](#nextToField "Direct link to nextToField")
Define the Form Control the Button should be placed next to. Looks like [this](https://manuals.hybridforms.net/docs/10.0/custom-styling-guide/hf-utility-classes/button.md#button-inline-with-validator)
**How to use:**
`nextToField: 'address_city'`
**Type:** `string`
***
##### vibrationFeedback[โ](#vibrationFeedback "Direct link to vibrationFeedback")
Enable/Disable vibration feedback on click.
**How to use:**
`vibrationFeedback: true`
**Type:** `Boolean`
**Default:** `true`
---
### CheckBox
An HTML CheckBox to be used in Forms.
```html
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
##### defaultValue[โ](#defaultValue "Direct link to defaultValue")
Set the defaultValue to "true" to display the CheckBox as checked by default. A Custom Code function can be used to set defaultValue.
**How to use:**
`defaultValue: true`
**Type:** `boolean | function`
**Signature:** `function() => boolean`
***
##### disabled[โ](#disabled "Direct link to disabled")
Set "true" whenever the CheckBox should be disabled.
**How to use:**
`disabled: true`
**Type:** `boolean`
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### htmlLabel[โ](#htmlLabel "Direct link to htmlLabel")
Define a label that allows HTML tags inside the text set next to the CheckBox. If a label and a htmlLabel is set, the htmlLabel overwrites the label.
**How to use:**
`htmlLabel: 'Cover glass broken'`
**Type:** `string`
***
##### label[โ](#label "Direct link to label")
Define a label set next to the CheckBox (optional)
**How to use:**
`label: 'Cover glass broken'`
**Type:** `string`
***
##### list[โ](#list "Direct link to list")
Set this property to "true", if data connected with this control should be used as a sorting/filtering/grouping option on the ListPage, in template objects (eg. the [listTemplate](https://manuals.hybridforms.net/docs/10.0/form-templates/html-template-file/titletemplates.md#list-template-list-entry)) and in Admin UI listings.
**How to use:**
`list: true`
**Type:** `boolean`
***
##### listOptions[โ](#listOptions "Direct link to listOptions")
Define additional options for controls where list equals true. E.g. set custom label for filter/sort/group dialogs or hide them completely.
**How to use:**
`listOptions: {...}`
**Type:** `{ dialogText: string, dialogHide: boolean }`
***
##### onChanged[โ](#onChanged "Direct link to 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(data: { value: boolean, hfValue: string }) => void`
***
##### persistent[โ](#persistent "Direct link to persistent")
It is the value where the "user" sets the initial value of the CheckBox to the value of the previous Form Item of the current user and overwrites any defaultValue.
**How to use:**
`persistent: 'user'`
**Type:** `'user'`
***
##### required[โ](#required "Direct link to required")
Set "true" if the control has to be filled in.
**How to use:**
`required: true`
**Type:** `Boolean`
***
##### style[โ](#style "Direct link to style")
Define the display behaviour of the RadioBox and its label depending on its status (checked/unchecked). Default is the previously familiar behavior, highlightChecked softens the unchecked input ctrl and its label and emphasizes the checked control by bold font and dark font color.
**How to use:**
`style: 'default'`
**Type:** `'default' | 'highlightChecked' | 'toggleButton' | 'backgroundHighlight'`
***
##### toggle[โ](#toggle "Direct link to toggle")
Define up to two CSS classes applied to the container-div of the CheckBox to emphasize the toggle-effect of the Form Control. At least the "defaultClass" has to be defined. **Note**: Use in case of style: 'toggleButton' to assign the background color, this option is ignored in case of the other two possibilities.
**How to use:**
`toggle: {defaultClass: 'hf-radio-orange', checkedClass: 'highlight'}`
**Type:** `string`
***
##### visiting[โ](#visiting "Direct link to visiting")
Set "true" whenever the Form element should be marked as "visited" when the user has clicked or tapped at the Form field.
**How to use:**
`visiting: true`
**Type:** `boolean`
#### listOptions Object[โ](#listoptions-object "Direct link to listOptions Object")
***
##### dialogHide[โ](#dialogHide "Direct link to dialogHide")
Hide field from filter/sort/group dialogs.
**How to use:**
`dialogHide: true`
**Type:** `boolean`
***
##### dialogText[โ](#dialogText "Direct link to dialogText")
Set custom label for filter/sort/group dialogs.
**How to use:**
`dialogText: 'Display Text'`
**Type:** `string`
#### copyValueFrom[โ](#copyvaluefrom "Direct link to 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".
```html
```
Option interface
```typescript
interface ICopyValueFromObject {
sourceId: string;
mode: 'overwrite' | null;
callback: (value: string) => string;
}
type CopyValueFromType = string | ICopyValueFromObject;
```
##### callback[โ](#callback "Direct link to callback")
Specify a function to process value before copy.
**How to use:**
`callback: HFFormDefinition.Namespace.processValue`
**Type:** `function`
**Signature:** `function(value: string) => string`
***
##### mode[โ](#mode "Direct link to mode")
Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
**How to use:**
`mode: 'overwrite'`
**Type:** `string`
***
##### sourceId[โ](#sourceId "Direct link to sourceId")
Specify source id
**How to use:**
`sourceId: 'target_id'`
**Type:** `string`
#### Stored data[โ](#stored-data "Direct link to stored-data")
```html
```
For each checked CheckBox inside your Forms there are two value pairs of stored data:
First the information if the Checkbox is checked
```json
{
"id": "repair_cover_glass_broken",
"value": true
}
```
and for the defined value:
```json
{
"id": "repair_cover_glass_broken_HFValue",
"value": "Cover glass broken"
}
```
---
### ComboBox
The values of the control "ComboBox" can be provided as static datasource (data formatted like a Json Array inside your template) or in case of a external datasource e.g. by referencing a SharePoint list by linking to the URL or by providing a oData source.
**static datasource:**
```html
```
**external datasource (URL):**
```html
```
**multilingual external datasource (URL):**
```html
```
**external datasource (oData):**
```html
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
Options of the kendo component are also available. [read more](https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
##### dataTextField - required[โ](#dataTextField "Direct link to dataTextField")
Define the text of the key-value pair.
**How to use:**
`dataTextField: 'name'`
**Type:** `string`
***
##### dataValueField - required[โ](#dataValueField "Direct link to dataValueField")
Define the value of the key-value pair.
**How to use:**
`dataValueField: 'code'`
**Type:** `string`
***
##### anytext[โ](#anytext "Direct link to anytext")
Set "false" whenever free text input should be prevented.
**How to use:**
`anytext: false`
**Type:** `boolean`
**Default:** `true`
***
##### checkValueInitially[โ](#checkValueInitially "Direct link to checkValueInitially")
Stored values gets initially checked if they are contained in the data source that is defined on the control. In certain scenarios this is not desireable.
**How to use:**
`checkValueInitially: true`
**Type:** `boolean`
**Default:** `true`
***
##### dataSource[โ](#dataSource "Direct link to dataSource")
Provide the data for the drop down selection formatted like a Json Array inside your template.
**How to use:**
`dataSource: [{name: 'Bauer, F', code: 'Bauer, F'}, {name: 'Gruber, P', code: 'Gruber,P'}]`
**Type:** `json pseudo array`
***
##### defaultValue[โ](#defaultValue "Direct link to defaultValue")
Define the value selected in newly created Forms. **Note:** This must be the appropiate dataValueField value. A Custom Code function can be used to set defaultValue.
**How to use:**
`defaultValue: 'Title1',`
**Type:** `string | function`
**Signature:** `function() => string`
***
##### disabled[โ](#disabled "Direct link to disabled")
Set "true" whenever the ComboBox should be disabled.
**How to use:**
`disabled: true`
**Type:** `boolean`
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### filterItems[โ](#filterItems "Direct link to filterItems")
Define the filtering options for the DropDownList. Can be used to search the list in more than one datasource column. A field entry is required. The operator's default entry is `contains`. [More infos](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/filter)
**How to use:**
`[{ field: 'name', operator: 'contains' }, { field: 'address' }]`
**Type:** `{ field: string; operator?: string; }[]`
***
##### formControlMapping[โ](#formControlMapping "Direct link to formControlMapping")
Define a mapping object to copy fields from the selected dataItem to given Form Controls. [More infos](#formcontrolmapping)
**How to use:**
`{ example_id: 'example_key' }`
**Type:** `IFormControlMapping`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### highlightTemplate[โ](#highlightTemplate "Direct link to highlightTemplate")
Define the highlight format for filtered results of the ComboBox popup. Accepts a [Kendo Template](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/template). **Important:** Kendo Templates use `highlight` as default placeholder for the highlighted text.
**How to use:**
`highlightTemplate: '#: highlight #'`
**Type:** `string`
***
##### i18nDataTextField[โ](#i18nDataTextField "Direct link to i18nDataTextField")
Use the i18nDataTextfield instead of the dataTextfield to use multilingual catalogs in addition to the translation.json file.
**How to use:**
`{ en: 'Streetname', de: 'PLZ', default: โStreetname' }`
**Type:** `{ default: string, [langCode: string]: string }`
***
##### itemTemplate[โ](#itemTemplate "Direct link to itemTemplate")
Define the formatting of the ComboBox values for display e.g. combining one or more columns of the datasource for single selection. Accepts a [Kendo Template](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/template) or a function returning a string. **Important:** Have to return string inside a wrapping element. Unless `template` option, `itemTemplate` keeps the original filter highlighting.
**How to use:**
`itemTemplate: '#: entry1 # - #: entry2 #'`
**Type:** `string | function`
**Signature:** `function(item: any) => string`
***
##### label[โ](#label "Direct link to label")
Define a label for your control element.
**How to use:**
`label: 'Technician'`
**Type:** `string`
***
##### list[โ](#list "Direct link to list")
Set this property to "true" if data connected with this control should be a sorting/filtering/grouping option on the ListPage, is used in template objects (eg. the [listTemplate](https://manuals.hybridforms.net/docs/10.0/form-templates/html-template-file/titletemplates.md#list-template-list-entry)) or it should show up in Admin UI listings.
**How to use:**
`list: true`
**Type:** `boolean`
***
##### listOptions[โ](#listOptions "Direct link to listOptions")
Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them completely.
**How to use:**
`listOptions: {...}`
**Type:** `{ dialogText: string, dialogHide: boolean }`
***
##### minLength[โ](#minLength "Direct link to minLength")
The minimum number of characters the user needs to type before a search is performed. Set a higher value than 1 whenever the search could match a lot of items.
**How to use:**
`minLength: 3`
**Type:** `number`
***
##### onChanged[โ](#onChanged "Direct link to 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(data: { value: string, text: string }) => void`
***
##### persistent[โ](#persistent "Direct link to persistent")
It is the value where the "user" sets the initial selected value of the ComboBox to the value of the previous Form Item of the current user and overwrites any defaultValue.
**How to use:**
`persistent: 'user'`
**Type:** `'user'`
***
##### placeholder[โ](#placeholder "Direct link to placeholder")
Define a placeholder text for the ComboBox.
**How to use:**
`placeholder: 'Please select ...'`
**Type:** `string`
***
##### required[โ](#required "Direct link to required")
Set "true" if the control has to be filled in.
**How to use:**
`required: true`
**Type:** `boolean`
***
##### tooltip[โ](#tooltip "Direct link to 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: 'Please indicate at least one cause of damage.'`
**Type:** `string`
***
##### tooltipTemplate[โ](#tooltipTemplate "Direct link to 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`
***
##### url[โ](#url "Direct link to url")
The URL must be a server relative SharePoint URL. For instance, the oData link to a SharePoint list.
**How to use:**
`url: '/_api/web/lists/getbytitle('SP')/Items?$select=Title&$orderby=Title'`
**Type:** `string`
***
##### valueMapperDelay[โ](#valueMapperDelay "Direct link to valueMapperDelay")
Add a delay to the Kendo ValueMapper. Useful for very large catalogs.
**How to use:**
`valueMapperDelay: true`
**Type:** `boolean`
***
##### visiting[โ](#visiting "Direct link to visiting")
Set "true" whenever the Form element should be marked as "visited" when the user has clicked or tapped at the Form field.
**How to use:**
`visiting: true`
**Type:** `boolean`
#### listOptions Object[โ](#listoptions-object "Direct link to listOptions Object")
***
##### dialogHide[โ](#dialogHide "Direct link to dialogHide")
Hide field from filter/sort/group dialogs.
**How to use:**
`dialogHide: true`
**Type:** `boolean`
***
##### dialogText[โ](#dialogText "Direct link to dialogText")
Set custom label for filter/sort/group dialogs.
**How to use:**
`dialogText: 'Display Text'`
**Type:** `string`
Note
Please follow the conventions to build an OData Source Link by considering the following documentations:
* [Working with lists and list items with REST](https://msdn.microsoft.com/EN-US/library/dn292552.aspx)
* [Use oData query operations in SharePoint REST requests](https://msdn.microsoft.com/EN-US/library/fp142385.aspx)
* [oData - the best way to REST](http://www.odata.org/)
#### formControlMapping[โ](#formcontrolmapping "Direct link to formcontrolmapping")
The mapping objects consist of keys which are the Form Control IDs to copy to and the value which can be a data source key or an object with the data source key and a format function.
By every value change the specified data source entries are copied to the given Form Controls.
```html
```
```typescript
type FormControlMappingType = {
key: string;
callback: (dataItem: any, dataKey: string) => any;
};
interface IFormControlMapping {
[id: string]: string | FormControlMappingType;
}
```
#### Stored data[โ](#stored-data "Direct link to stored-data")
```html
```
For each ComboBox inside your Forms there are two value pairs of stored data:
First the information for the ComboBox itself
```json
{
"id": "technician",
"value": "3521"
}
```
and second for the selected value:
```json
{
"id": "technician_HFComboText",
"value": "Simon, R"
}
```
---
### Condition
Conditions can be set to HTML areas using the `` tag and the control `Condition` within a block.
Info
For detailed information visit [Conditions](https://manuals.hybridforms.net/docs/10.0/form-templates/features/conditions.md)
```html
```
---
### DataControl
Example
```html
```
Note
The DataControl is a hidden control that can be used to store data in the Form. The data is stored in the Form as a JSON string.
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
##### defaultValue[โ](#defaultValue "Direct link to defaultValue")
Provide a default object for the control. A Custom Code function can be used to set defaultValue.
**How to use:**
`defaultValue: { testEntry: 'testValue' }`
**Type:** `object | function`
**Signature:** `function() => object`
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### onChanged[โ](#onChanged "Direct link to 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: object) => void`
***
##### persistent[โ](#persistent "Direct link to persistent")
It is the value where the "user" sets the initial value of the DataControl to the value of the previous Form item of the current user and overwrites any defaultValue.
**How to use:**
`persistent: 'user'`
**Type:** `'user'`
#### copyValueFrom[โ](#copyvaluefrom "Direct link to 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".
```html
```
Option interface
```typescript
interface ICopyValueFromObject {
sourceId: string;
mode: 'overwrite' | null;
callback: (value: string) => string;
}
type CopyValueFromType = string | ICopyValueFromObject;
```
##### callback[โ](#callback "Direct link to callback")
Specify a function to process value before copy.
**How to use:**
`callback: HFFormDefinition.Namespace.processValue`
**Type:** `function`
**Signature:** `function(value: string) => string`
***
##### mode[โ](#mode "Direct link to mode")
Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
**How to use:**
`mode: 'overwrite'`
**Type:** `string`
***
##### sourceId[โ](#sourceId "Direct link to sourceId")
Specify source id
**How to use:**
`sourceId: 'target_id'`
**Type:** `string`
#### Stored data[โ](#stored-data "Direct link to stored-data")
The simplest storage โ ID and the filled-in stringified value:
```json
{
"id": "data_control_test",
"value": "{\"testEntry\":\"test\"}"
}
```
---
### DatePicker
A DatePicker is a control element that allows the user to select a date from a calendar. It is based on the Kendo UI DatePicker. The date can be entered manually or selected from a calendar.
```html
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
Options of the kendo component are also available. [read more](https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker)
##### convertToLocalDate[โ](#convertToLocalDate "Direct link to convertToLocalDate")
If set to true, the selected date is converted to the local date of the device.
**How to use:**
`convertToLocalDate: true`
**Type:** `boolean`
***
##### copyValueTo[โ](#copyValueTo "Direct link to copyValueTo")
Copy value to specified FormControls.
**How to use:**
`copyValueTo: ...`
**Type:** `CopyValueToType`
***
##### defaultValue[โ](#defaultValue "Direct link to defaultValue")
Use the value "now" to offer the current ('local') date. A Custom Code function can be used to set defaultValue.
**How to use:**
`defaultValue: 'now'`
**Type:** `string | function`
**Signature:** `function() => string | Date`
***
##### disableCalendar[โ](#disableCalendar "Direct link to disableCalendar")
Set "true" whenever the DatePicker control calendar flyout should be disabled.
**How to use:**
`disableCalendar: true`
**Type:** `boolean`
***
##### disabled[โ](#disabled "Direct link to disabled")
Set "true" whenever the DatePicker should be disabled.
**How to use:**
`disabled: true`
**Type:** `boolean`
***
##### displayValueFormat[โ](#displayValueFormat "Direct link to displayValueFormat")
To change the format of the displayed date. For more information visit: .
**How to use:**
`displayValueFormat: 'dd.MM.yyyy'`
**Type:** `string`
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### emptyContent[โ](#emptyContent "Direct link to emptyContent")
Write a short word to indicate that the appropriate date can/must be chosen.
**How to use:**
`emptyContent: 'Select ...'`
**Type:** `string`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### label[โ](#label "Direct link to label")
Define a label for your control element.
**How to use:**
`label: 'Date'`
**Type:** `string`
***
##### list[โ](#list "Direct link to list")
Set this property to "true" if data connected with this control should be a sorting/filtering/grouping option on the ListPage, is used in template objects (eg. the [listTemplate](https://manuals.hybridforms.net/docs/10.0/form-templates/html-template-file/titletemplates.md#list-template-list-entry)) or it should show up in Admin UI listings.
**How to use:**
`list: true`
**Type:** `boolean`
***
##### listOptions[โ](#listOptions "Direct link to listOptions")
Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them completely.
**How to use:**
`listOptions: {...}`
**Type:** `{ dialogText: string, dialogHide: boolean }`
***
##### max[โ](#max "Direct link to max")
Set to allow entries up to until this date. With "now" the newest possible entry is the current day. Format for fixed dates is *yyyy-MM-dd*.
**How to use:**
`max: 'now'`
**Type:** `string`
***
##### min[โ](#min "Direct link to min")
Set to allow entries from that date on. Format is *yyyy-MM-dd*.
**How to use:**
`min: '1965-05-14'`
**Type:** `string`
**Default:** `1900-01-01`
***
##### mobilePicker[โ](#mobilePicker "Direct link to mobilePicker")
Use native date picker on mobile devices. There are settings restrictions e.g. formatting or start interval.
**How to use:**
`mobilePicker: true`
**Type:** `boolean`
***
##### onChanged[โ](#onChanged "Direct link to 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: Date) => void`
***
##### parseFormats[โ](#parseFormats "Direct link to parseFormats")
Used to give the user several format options to type in the date. "Converts" the date to format which is set with displayValueFormat.
**How to use:**
`parseFormats: ['ddMMyyyy', 'dd/MM/yyyy', 'dd-MM-yyyy']`
**Type:** `string[]`
***
##### persistent[โ](#persistent "Direct link to persistent")
It is the value where the "user" sets the initial value of the DatePicker to the value of the previous Form item of the current user and overwrites any defaultValue.
**How to use:**
`persistent: 'user'`
**Type:** `'user'`
***
##### required[โ](#required "Direct link to required")
Set "true" if the control has to be filled in.
**How to use:**
`required: true`
**Type:** `boolean`
***
##### start[โ](#start "Direct link to start")
Used to control which area the DatePicker view starts when opened. Allowed values: month / year / decade / century.
**How to use:**
`start: 'decade'`
**Type:** `month | year | decade | century`
**Default:** `month`
***
##### tooltip[โ](#tooltip "Direct link to 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: 'Please indicate at least one cause of damage.'`
**Type:** `string`
***
##### tooltipTemplate[โ](#tooltipTemplate "Direct link to 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`
***
##### visiting[โ](#visiting "Direct link to visiting")
Set "true" whenever the Form element should be marked as "visited" when the user has clicked or tapped at the Form field.
**How to use:**
`visiting: true`
**Type:** `boolean`
#### listOptions Object[โ](#listoptions-object "Direct link to listOptions Object")
***
##### dialogHide[โ](#dialogHide "Direct link to dialogHide")
Hide field from filter/sort/group dialogs.
**How to use:**
`dialogHide: true`
**Type:** `boolean`
***
##### dialogText[โ](#dialogText "Direct link to dialogText")
Set custom label for filter/sort/group dialogs.
**How to use:**
`dialogText: 'Display Text'`
**Type:** `string`
#### copyValueTo[โ](#copyvalueto "Direct link to copyValueTo")
***
Define FormControls in which the entered value should be copied.
Example
```html
```
Option interface
```typescript
interface ICopyValueToObject {
targetId: string;
mode: 'overwrite' | null;
shadowPostfix: string;
callback: (value: string) => string;
}
type CopyValueToType = string | ICopyValueToObject | Array;
```
##### callback[โ](#callback "Direct link to callback")
Specify a function to process value before copy.
**How to use:**
`callback: HFFormDefinition.Namespace.processValue`
**Type:** `function`
**Signature:** `function(value: string) => string`
***
##### mode[โ](#mode "Direct link to mode")
Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
**How to use:**
`mode: 'overwrite'`
**Type:** `string`
***
##### shadowPostfix[โ](#shadowPostfix "Direct link to shadowPostfix")
Specify which shadow field is copied.
**How to use:**
`shadowPostfix: '_HFNumericField'`
**Type:** `string`
***
##### targetId[โ](#targetId "Direct link to targetId")
Specify target id
**How to use:**
`targetId: 'target_id'`
**Type:** `string`
#### copyValueFrom[โ](#copyvaluefrom "Direct link to 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".
```html
```
Option interface
```typescript
interface ICopyValueFromObject {
sourceId: string;
mode: 'overwrite' | null;
callback: (value: string) => string;
}
type CopyValueFromType = string | ICopyValueFromObject;
```
##### callback[โ](#callback "Direct link to callback")
Specify a function to process value before copy.
**How to use:**
`callback: HFFormDefinition.Namespace.processValue`
**Type:** `function`
**Signature:** `function(value: string) => string`
***
##### mode[โ](#mode "Direct link to mode")
Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
**How to use:**
`mode: 'overwrite'`
**Type:** `string`
***
##### sourceId[โ](#sourceId "Direct link to sourceId")
Specify source id
**How to use:**
`sourceId: 'target_id'`
**Type:** `string`
#### Stored data[โ](#stored-data "Direct link to stored-data")
```html
```
For each DatePicker inside your Forms there is one value pair of stored data. Date format according [ISO 8601](http://en.wikipedia.org/wiki/ISO_8601)
```json
{
"id": "pg_date",
"value": "2021-07-15T22:00:00.000Z"
}
```
```json
{
"id": "pg_date_HFDate",
"value": "16. Jul. 2021"
}
```
```json
{
"id": "pg_date_HFLocal",
"value": "2021-07-16T00:00:00.000+02:00"
}
```
---
### DateTimePicker
A DateTimePicker is a control element that allows the user to select date and time from a calendar. It is based on the Kendo UI DateTimePicker. The date can be entered manually or selected from a calendar.
```html
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
Options of the kendo component are also available. [read more](https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker)
##### convertToLocalDate[โ](#convertToLocalDate "Direct link to convertToLocalDate")
If set to true, the selected date is converted to the local date of the device.
**How to use:**
`convertToLocalDate: true`
**Type:** `boolean`
***
##### copyValueTo[โ](#copyValueTo "Direct link to copyValueTo")
Copy value to specified FormControls.
**How to use:**
`copyValueTo: ...`
**Type:** `CopyValueToType`
***
##### defaultValue[โ](#defaultValue "Direct link to defaultValue")
Use the value "now" to offer the current ('local') date. A Custom Code function can be used to set defaultValue.
**How to use:**
`defaultValue: 'now'`
**Type:** `string | function`
**Signature:** `function() => string | Date`
***
##### disabled[โ](#disabled "Direct link to disabled")
Set "true" whenever the DateTimePicker should be disabled.
**How to use:**
`disabled: true`
**Type:** `boolean`
***
##### displayValueFormat[โ](#displayValueFormat "Direct link to displayValueFormat")
Use to change the format of the displayed date. For more information visit: .
**How to use:**
`displayValueFormat: 'dd.MM.yyyy HH:mm'`
**Type:** `string`
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### emptyContent[โ](#emptyContent "Direct link to emptyContent")
Write a short word to indicate that the appropriate date can/must be chosen.
**How to use:**
`emptyContent: 'Select ...'`
**Type:** `string`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### label[โ](#label "Direct link to label")
Define a label for your control element.
**How to use:**
`label: 'Date'`
**Type:** `string`
***
##### list[โ](#list "Direct link to list")
Set this property to "true" if data connected with this control should be a sorting/filtering/grouping option on the ListPage, is used in template objects (eg. the [listTemplate](https://manuals.hybridforms.net/docs/10.0/form-templates/html-template-file/titletemplates.md#list-template-list-entry)) or it should show up in Admin UI listings.
**How to use:**
`list: true`
**Type:** `boolean`
***
##### listOptions[โ](#listOptions "Direct link to listOptions")
Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them completely.
**How to use:**
`listOptions: {...}`
**Type:** `{ dialogText: string, dialogHide: boolean }`
***
##### max[โ](#max "Direct link to max")
Set to allow entries up to until this date. With "now" the newest possible entry is the current day. Format for fixed dates is *yyyy-MM-dd*.
**How to use:**
`max: 'now'`
**Type:** `string`
***
##### min[โ](#min "Direct link to min")
Set to allow entries from that date on. Format is *yyyy-MM-dd*.
**How to use:**
`min: '1965-05-14'`
**Type:** `string`
**Default:** `1900-01-01`
***
##### onChanged[โ](#onChanged "Direct link to 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: Date) => void`
***
##### parseFormats[โ](#parseFormats "Direct link to parseFormats")
Used to give the user several format options to type in the date. "Converts" the date to format which is set with displayValueFormat.
**How to use:**
`parseFormats: ['ddMMyyyy', 'dd/MM/yyyy', 'dd-MM-yyyy']`
**Type:** `string[]`
***
##### persistent[โ](#persistent "Direct link to persistent")
It is the value where the "user" sets the initial value of the DateTimePicker to the value of the previous Form Item of the current user and overwrites any defaultValue.
**How to use:**
`persistent: 'user'`
**Type:** `'user'`
***
##### required[โ](#required "Direct link to required")
Set "true" if the control has to be filled in.
**How to use:**
`required: true`
**Type:** `boolean`
***
##### start[โ](#start "Direct link to start")
Used to control which area the DateTimePicker view starts when opened. Allowed values: month / year / decade / century.
**How to use:**
`start: 'decade'`
**Type:** `month | year | decade | century`
**Default:** `month`
***
##### tooltip[โ](#tooltip "Direct link to 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: 'Please indicate at least one cause of damage.'`
**Type:** `string`
***
##### tooltipTemplate[โ](#tooltipTemplate "Direct link to 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`
***
##### visiting[โ](#visiting "Direct link to visiting")
Set "true" whenever the Form element should be marked as "visited" when the user has clicked or tapped at the Form field.
**How to use:**
`visiting: true`
**Type:** `boolean`
#### listOptions Object[โ](#listoptions-object "Direct link to listOptions Object")
***
##### dialogHide[โ](#dialogHide "Direct link to dialogHide")
Hide field from filter/sort/group dialogs.
**How to use:**
`dialogHide: true`
**Type:** `boolean`
***
##### dialogText[โ](#dialogText "Direct link to dialogText")
Set custom label for filter/sort/group dialogs.
**How to use:**
`dialogText: 'Display Text'`
**Type:** `string`
#### copyValueTo[โ](#copyvalueto "Direct link to copyValueTo")
***
Define FormControls in which the entered value should be copied.
Example
```html
```
Option interface
```typescript
interface ICopyValueToObject {
targetId: string;
mode: 'overwrite' | null;
shadowPostfix: string;
callback: (value: string) => string;
}
type CopyValueToType = string | ICopyValueToObject | Array;
```
##### callback[โ](#callback "Direct link to callback")
Specify a function to process value before copy.
**How to use:**
`callback: HFFormDefinition.Namespace.processValue`
**Type:** `function`
**Signature:** `function(value: string) => string`
***
##### mode[โ](#mode "Direct link to mode")
Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
**How to use:**
`mode: 'overwrite'`
**Type:** `string`
***
##### shadowPostfix[โ](#shadowPostfix "Direct link to shadowPostfix")
Specify which shadow field is copied.
**How to use:**
`shadowPostfix: '_HFNumericField'`
**Type:** `string`
***
##### targetId[โ](#targetId "Direct link to targetId")
Specify target id
**How to use:**
`targetId: 'target_id'`
**Type:** `string`
#### copyValueFrom[โ](#copyvaluefrom "Direct link to 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".
```html
```
Option interface
```typescript
interface ICopyValueFromObject {
sourceId: string;
mode: 'overwrite' | null;
callback: (value: string) => string;
}
type CopyValueFromType = string | ICopyValueFromObject;
```
##### callback[โ](#callback "Direct link to callback")
Specify a function to process value before copy.
**How to use:**
`callback: HFFormDefinition.Namespace.processValue`
**Type:** `function`
**Signature:** `function(value: string) => string`
***
##### mode[โ](#mode "Direct link to mode")
Specify if target field gets overwritten. Default behaviour is to only copy to empty fields.
**How to use:**
`mode: 'overwrite'`
**Type:** `string`
***
##### sourceId[โ](#sourceId "Direct link to sourceId")
Specify source id
**How to use:**
`sourceId: 'target_id'`
**Type:** `string`
#### Stored data[โ](#stored-data "Direct link to stored-data")
```html
```
For each DateTimePicker inside your Forms there is one value pair of stored data. Date format according [ISO 8601](http://en.wikipedia.org/wiki/ISO_8601)
```json
{
"id": "pg_datetime",
"value": "2021-07-15T7:30:00.000Z"
}
```
```json
{
"id": "pg_date_HFDateTime",
"value": "15. Jul. 2021 09:30"
}
```
```json
{
"id": "pg_date_HFLocal",
"value": "2021-07-15T09:30:00.000+02:00"
}
```
---
### DrawingControl
The DrawingControl is a control element that allows the user to draw on a given image. This can be used to mark damages on a picture.
```html
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
##### image - required[โ](#image "Direct link to image")
Write down the path to connect the field with your picture. The first part of the path represents a placeholder and will be changed at runtime.
**How to use:**
`image: '{{HFFormPath}}/watermeter.png'`
**Type:** `string`
***
##### disabled[โ](#disabled "Direct link to disabled")
Set "true" whenever the DrawingControl should be disabled.
**How to use:**
`disabled: true`
**Type:** `boolean`
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### height[โ](#height "Direct link to height")
Needs to be set for this control to define the height of the field. The value is defined in pixels.
**How to use:**
`height: 280`
**Type:** `number`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### label[โ](#label "Direct link to label")
Define a label for your control element.
**How to use:**
`label: 'Mark damage with pen'`
**Type:** `string`
***
##### onChanged[โ](#onChanged "Direct link to 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: boolean) => void`
***
##### required[โ](#required "Direct link to required")
Set "true" if the control has to be filled in.
**How to use:**
`required: true`
**Type:** `boolean`
***
##### responsive[โ](#responsive "Direct link to responsive")
Set "true" whenever the DrawingControl should be responsive. It overwrites given width and height values.
**How to use:**
`responsive: true`
**Type:** `boolean`
***
##### tooltip[โ](#tooltip "Direct link to 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: 'Please indicate at least one cause of damage.'`
**Type:** `string`
***
##### tooltipTemplate[โ](#tooltipTemplate "Direct link to 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`
***
##### width[โ](#width "Direct link to width")
Needs to be set for this control to define the width of the field. The value is in pixels. The maximum is always 460 px.
**How to use:**
`width: 226`
**Type:** `number`
#### Stored data[โ](#stored-data "Direct link to stored-data")
```html
```
For each DrawingControl inside your Forms there are several value pairs of stored data:
The first two value pairs are the default data to be stored โ the first pair indicates the DrawingControl has been used โฆ
```json
{
"id": "mark_damage",
"value": true
}
```
โฆ and the second pair stores the information on the created image:
```json
{
"id": "mark_damage_HFDrawingImageMerged",
"value": "mark_damage_merged.png"
}
```
Finally, the third pair stores the information of the strokes:
```json
{
"id": "mark_damage_HFDrawingStrokes",
"value": "fabric.Objects"
}
```
---
### DropDownList
The new control is an alternative to the Control "ComboBox". The values of the control "DropDownList" can be provided as static datasource (data formatted as JSON Array inside your Template) or by an external datasource e.g. by referencing a HFSqlServer list by linking to the URL or by providing an oData source as known of the ComboBox control.
**static datasource:**
```html
```
**external datasource (URL):**
```html
```
**multilingual external datasource (URL):**
```html
```
**external datasource (OData):**
```html
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
Options of the kendo component are also available. [read more](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist)
##### dataTextField - required[โ](#dataTextField "Direct link to dataTextField")
Define the key of the key-value pair.
**How to use:**
`dataTextField: 'name'`
**Type:** `string`
***
##### dataValueField - required[โ](#dataValueField "Direct link to dataValueField")
Define the value of the key-value pair.
**How to use:**
`dataValueField: 'code'`
**Type:** `string`
***
##### autoBind[โ](#autoBind "Direct link to autoBind")
Controls whether to bind the control to the data source on initialization. Use false if you use in multiple controls the same data source. This reduces server requests.
**How to use:**
`autoBind: false`
**Type:** `boolean`
**Default:** `true`
***
##### checkValueInitially[โ](#checkValueInitially "Direct link to checkValueInitially")
Stored values gets initially checked if they are contained in the data source that is defined on the control. In certain scenarios this is not desireable.
**How to use:**
`checkValueInitially: true`
**Type:** `boolean`
**Default:** `true`
***
##### dataSource[โ](#dataSource "Direct link to dataSource")
Provide the data for the drop down selection formatted like a JSON Array inside your template
**How to use:**
`dataSource: [{name: 'Bauer, F', code: 'Bauer, F'}, {name: 'Gruber, P', code: 'Gruber,P'}]`
**Type:** `json pseudo array`
***
##### defaultValue[โ](#defaultValue "Direct link to defaultValue")
Define the value selected in newly created Forms. **Note:** This must be the appropiate dataValueField value. A Custom Code function can be used to set defaultValue.
**How to use:**
`defaultValue: 'Title1',`
**Type:** `string | function`
**Signature:** `function() => string`
***
##### disabled[โ](#disabled "Direct link to disabled")
Set "true" whenever the DropDownList should be disabled.
**How to use:**
`disabled: true`
**Type:** `boolean`
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### filterItems[โ](#filterItems "Direct link to filterItems")
Define the filtering options for the DropDownList. Can be used to search the list in more than one datasource column. A field entry is required. The operator's default entry is `contains`. [More infos](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/filter)
**How to use:**
`[{ field: 'name', operator: 'contains' }, { field: 'address' }]`
**Type:** `{ field: string; operator?: string; }[]`
***
##### formControlMapping[โ](#formControlMapping "Direct link to formControlMapping")
Define a mapping object to copy fields from the selected dataItem to given Form controls. [More infos](#formcontrolmapping)
**How to use:**
`{ example_id: 'example_key' }`
**Type:** `IFormControlMapping`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### highlightTemplate[โ](#highlightTemplate "Direct link to highlightTemplate")
Define the highlight format for filtered results of the DropDownList popup. Accepts a [kendo template](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/template). **Important:** kendo templates use `highlight` as default placeholder for the highlighted text.
**How to use:**
`highlightTemplate: '#: highlight #'`
**Type:** `string`
***
##### i18nDataTextField[โ](#i18nDataTextField "Direct link to i18nDataTextField")
Use the i18nDataTextfield instead of the dataTextfield to use multilingual catalogs in addition to the translation.json file.
**How to use:**
`{ en: 'Streetname', de: 'Strassenname', default: โStreetname' }`
**Type:** `{ default: string, [langCode: string]: string }`
***
##### itemTemplate[โ](#itemTemplate "Direct link to itemTemplate")
Define the formatting of the DropDownList values for display e.g. combining one or more columns of the datasource for single selection. Accepts a [kendo template](https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/template) or a function returning a string. **Important:** Have to return string inside a wrapping element. Unless `template` option, `itemTemplate` keeps the original filter highlighting.
**How to use:**
`itemTemplate: '#: entry1 # - #: entry2 #'`
**Type:** `string | function`
**Signature:** `function(item: any) => string`
***
##### label[โ](#label "Direct link to label")
Define a label for your control element.
**How to use:**
`label: 'Technician'`
**Type:** `string`
***
##### list[โ](#list "Direct link to list")
Set this property to "true" if data connected with this control should be a sorting/filtering/grouping option on the ListPage, is used in template objects (eg. the [listTemplate](https://manuals.hybridforms.net/docs/10.0/form-templates/html-template-file/titletemplates.md#list-template-list-entry)) or it should show up in Admin UI listings.
**How to use:**
`list: true`
**Type:** `boolean`
***
##### listOptions[โ](#listOptions "Direct link to listOptions")
Set additional options for controls with list equals true. E.g. set custom label for filter/sort/group dialogs or hide them completely.
**How to use:**
`listOptions: {...}`
**Type:** `{ dialogText: string, dialogHide: boolean }`
***
##### minLength[โ](#minLength "Direct link to minLength")
The minimum number of characters the user needs to type before a search is performed. Set a higher value than 1 whenever the search could match a lot of items.
**How to use:**
`minLength: 3`
**Type:** `number`
***
##### onChanged[โ](#onChanged "Direct link to 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(data: { value: string, text: string }) => void`
***
##### optionLabel[โ](#optionLabel "Direct link to optionLabel")
Define a placeholder text for the DropDownList.
**How to use:**
`optionLabel: 'Please select ...'`
**Type:** `string`
***
##### optionTemplate[โ](#optionTemplate "Direct link to optionTemplate")
Define a placeholder template for the DropDownList.
**How to use:**
`optionTemplate: 'label'`
**Type:** `string`
***
##### persistent[โ](#persistent "Direct link to persistent")
It is the value where the "user" sets the initial selected value of the DropDownList to the value of the previous Form item of the current user and overwrites any defaultValue.
**How to use:**
`persistent: 'user'`
**Type:** `'user'`
***
##### required[โ](#required "Direct link to required")
Set "true" if the control has to be filled in.
**How to use:**
`required: true`
**Type:** `boolean`
***
##### tooltip[โ](#tooltip "Direct link to 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: 'Please indicate at least one cause of damage.'`
**Type:** `string`
***
##### tooltipTemplate[โ](#tooltipTemplate "Direct link to 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`
***
##### typeAhead[โ](#typeAhead "Direct link to typeAhead")
Enable/Disable filter for DropDownList.
**How to use:**
`typeAhead: false,`
**Type:** `boolean`
**Default:** `true`
***
##### url[โ](#url "Direct link to url")
The URL must be a HFSql server relative URL. For instance, the oData link to a HFSql server list.
**How to use:**
`url: '/api/catalogs/Items?$select=Title,KatalogText&$orderby=Title'`
**Type:** `string`
***
##### valueMapperDelay[โ](#valueMapperDelay "Direct link to valueMapperDelay")
Add a delay to the Kendo ValueMapper. Useful for very large catalogs.
**How to use:**
`valueMapperDelay: true`
**Type:** `boolean`
***
##### valueTemplate[โ](#valueTemplate "Direct link to valueTemplate")
Define the formatting of the DropDownList values for saved value e.g. combining one or more columns of the datasource for single selection.
**How to use:**
`valueTemplate: '#: Streetname # (#: PLZ # #: Postort #)'`
**Type:** `string`
***
##### visiting[โ](#visiting "Direct link to visiting")
Set "true" whenever the Form element should be marked as "visited" when the user has clicked or tapped at the Form element field.
**How to use:**
`visiting: true`
**Type:** `boolean`
#### listOptions Object[โ](#listoptions-object "Direct link to listOptions Object")
***
##### dialogHide[โ](#dialogHide "Direct link to dialogHide")
Hide field from filter/sort/group dialogs.
**How to use:**
`dialogHide: true`
**Type:** `boolean`
***
##### dialogText[โ](#dialogText "Direct link to dialogText")
Set custom label for filter/sort/group dialogs.
**How to use:**
`dialogText: 'Display Text'`
**Type:** `string`
Note
Please follow the conventions to build an oData Source Link by considering the following documentations:
* [Working with lists and list items with REST](https://msdn.microsoft.com/EN-US/library/dn292552.aspx)
* [Use oData query operations in SharePoint REST requests](https://msdn.microsoft.com/EN-US/library/fp142385.aspx)
* [oData - the best way to REST](http://www.odata.org/)
#### formControlMapping[โ](#formcontrolmapping "Direct link to formcontrolmapping")
The mapping objects consists of keys which are the Form control ID's to copy to and the value which can be a data source key or an object with the data source key and a format function.
By every value change the specified data source entries are copied to the given Form controls.
```html
```
```typescript
type FormControlMappingType = {
key: string;
callback: (dataItem: any, dataKey: string) => any;
};
interface IFormControlMapping {
[id: string]: string | FormControlMappingType;
}
```
#### Stored data[โ](#stored-data "Direct link to stored-data")
```html
```
For each DropDownList inside your Forms there are two value pairs of stored data:
First the information for the DropDownList itself...
```json
{
"id": "technician",
"value": "3521"
}
```
...and second for the selected value:
```json
{
"id": "technician_HFDropDownListText",
"value": "Simon, R"
}
```
---
### FileUploader
The FileUploader ctrl enables the user to upload files inside the Form.
```html
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
##### allowedCharacters[โ](#allowedCharacters "Direct link to allowedCharacters")
Set the allowed characters for the filename. If not set, the media settings whitelist property or the Form settings whitelist property is used (in this order). If none of these properties is set, all characters are allowed.
**How to use:**
`allowedCharacters: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`
**Type:** `string`
***
##### allowedCharactersRegExp[โ](#allowedCharactersRegExp "Direct link to allowedCharactersRegExp")
Set the allowed characters for the filename in RegExp-format. If not set, the media settings whitelist property or the Form settings whitelist property is used (in this order). If none of these properties is set, all characters are allowed.
**How to use:**
`allowedCharactersRegExp: [a-zA-Z0-9]`
**Type:** `string`
***
##### allowedFormats[โ](#allowedFormats "Direct link to allowedFormats")
Define the allowed file formats by listing the file extensions.
**How to use:**
`allowedFormats: ['pdf', 'jpeg', 'jpg', 'png']`
**Type:** `string[]`
***
##### buttonLabel[โ](#buttonLabel "Direct link to buttonLabel")
Provide an individual button label string.
**How to use:**
`buttonLabel: 'Add file'`
**Type:** `string`
***
##### deleteOnNotFullfilledCondition[โ](#deleteOnNotFullfilledCondition "Direct link to deleteOnNotFullfilledCondition")
De/activate deletion of attachments on not fullfilled conditions.
**How to use:**
`deleteOnNotFullfilledCondition: false`
**Type:** `boolean`
**Default:** `true`
***
##### descriptionEnd[โ](#descriptionEnd "Direct link to descriptionEnd")
Provide an additional information placed beyond the "file list". (Plain text or restricted HTML text)
**How to use:**
`descriptionEnd: '
Only PDF, JPEG and PNG Dateien allowed. (Minimum file size: 5 KB, maximum file size: 5 MB, at most 7 files).
'`
**Type:** `string`
***
##### descriptionStart[โ](#descriptionStart "Direct link to descriptionStart")
Provide a short intro text. (Plain text or restricted HTML text)
**How to use:**
`descriptionStart: 'Hier kรถnnen Sie ihre Unterlagen hochladen.'`
**Type:** `string`
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### label[โ](#label "Direct link to label")
Define a label for your control element.
**How to use:**
`label: 'File Uploader'`
**Type:** `string`
***
##### maxDurationSec[โ](#maxDurationSec "Direct link to maxDurationSec")
Define the maximum duration of an audio or video file (other file types ignore this config).
**How to use:**
`maxDurationSec: 120`
**Type:** `number`
***
##### maxFilenameLength[โ](#maxFilenameLength "Direct link to maxFilenameLength")
Define the maximum length of a filename.
**How to use:**
`maxFilenameLength: 100`
**Type:** `number`
**Default:** `70`
***
##### maxFileSizeKb[โ](#maxFileSizeKb "Direct link to maxFileSizeKb")
Define the maximum file size of the uploaded file kB.
**How to use:**
`maxFileSizeKb: 5000`
**Type:** `number`
***
##### maxFileUploads[โ](#maxFileUploads "Direct link to maxFileUploads")
Set the limit of files the user can upload.
**How to use:**
`maxFileUploads: 10`
**Type:** `number`
***
##### maxImagePixel[โ](#maxImagePixel "Direct link to maxImagePixel")
Define the maximum pixel width of the uploaded image.
**How to use:**
`maxImagePixel: 5000`
**Type:** `number`
***
##### maxVideoPixel[โ](#maxVideoPixel "Direct link to maxVideoPixel")
Define the maximum pixel width of the uploaded video.
**How to use:**
`maxVideoPixel: 1920`
**Type:** `number`
**Default:** `1920`
***
##### minDurationSec[โ](#minDurationSec "Direct link to minDurationSec")
Define the minimum duration of an audio or video file (other file types ignore this config).
**How to use:**
`minDurationSec: 3`
**Type:** `number`
***
##### minFileSizeKb[โ](#minFileSizeKb "Direct link to minFileSizeKb")
Define the minimum file size of the uploaded file in kB.
**How to use:**
`minFileSizeKb: 100`
**Type:** `number`
***
##### minImagePixel[โ](#minImagePixel "Direct link to minImagePixel")
Define the minimum pixel width of the uploaded image.
**How to use:**
`minImagePixel: 10`
**Type:** `number`
***
##### minVideoPixel[โ](#minVideoPixel "Direct link to minVideoPixel")
Define the minimum pixel width of the uploaded video.
**How to use:**
`minVideoPixel: 100`
**Type:** `number`
**Default:** `100`
***
##### onChanged[โ](#onChanged "Direct link to 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: IFileUploaderItem[]) => void`
***
##### renameFileIfExists[โ](#renameFileIfExists "Direct link to renameFileIfExists")
Set "true" for renaming the uploaded file if another one with the same name already exists.
**How to use:**
`renameFileIfExists: true`
**Type:** `boolean`
**Default:**\`\`
***
##### required[โ](#required "Direct link to required")
Set "true" if the control has to be filled in i.e. at least one file has to be uploaded.
**How to use:**
`required: true`
**Type:** `boolean`
Info
A FileUploader is used to dynamically add files to a Form.
```typescript
interface IFileUploaderItem {
name: string;
size: number;
mimeType: string;
width?: number;
height?: number;
}
```
#### Stored data[โ](#stored-data "Direct link to stored-data")
For each uploaded file inside your Forms there are two ways of stored data:
The information contained by the upload control as JSON object...
```json
{
"id": "repair_cover_glass_brokenfileuploader-ctrl",
"value": "[{\"name\":\"standgeraet.png\",\"size\":355283,\"mimeType\":\"image/png\",\"width\":1369,\"height\":1058}]"
}
```
...and the information of the files attached to the Form item (they are also listed by the feature "documents"):
```json
"files": [
{
"filename": "standgeraet.png",
"size": 355283,
"contentType": "image/png",
"modified": "2021-04-30T07:07:41.3235667Z",
"version": 637553632613235700,
"fileID": 104115
}
]
```
---
### 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.
```html
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
hendrerit torquent ullamcorper
elementum consequat eu amet velit consequat condimentum.
Item 1
Item 2
Item 3
```
#### FormControl Options[โ](#formcontrol-options "Direct link to FormControl Options")
***
##### doNotCopy[โ](#doNotCopy "Direct link to doNotCopy")
Set "true" whenever the field should get deleted if the Form is copied.
**How to use:**
`doNotCopy: true`
**Type:** `boolean`
***
##### hidden[โ](#hidden "Direct link to hidden")
Hide FormControl in Form.
**How to use:**
`hidden: true`
**Type:** `boolean`
***
##### label[โ](#label "Direct link to label")
Define a label for your control element.
**How to use:**
`label: 'HTML Container'`
**Type:** `string`
***
##### mark[โ](#mark "Direct link to mark")
Set the mark type for the highlighter.
**How to use:**
`mark: 'highlight'`
**Type:** `'highlight' | 'bold' | 'strikethrough'`
**Default:** `highlight`
***
##### onChanged[โ](#onChanged "Direct link to 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[โ](#required "Direct link to required")
Set "true" if the control has to be filled in.
**How to use:**
`required: true`
**Type:** `boolean`
***
##### tooltip[โ](#tooltip "Direct link to 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[โ](#tooltipTemplate "Direct link to 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[โ](#usage "Direct link to usage")
The following describes which tags are allowed and how the control is used.
##### DefaultValue[โ](#value "Direct link to value")
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 `` tag with the class `highlight` and a data attribute `data-highlighted="true"`.
```html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eleifend porttitor vehicula facilisi
```
##### Allowed tags[โ](#allowed-tags "Direct link to allowed-tags")
1. **Container:** `