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

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

TypeScript

namespace HFFormdefinition.SomeNamespace {
    export function doSomethingOnChange(value) {
        console.log('value: ', value);
        console.log('ctrl: ', this);
    }
}

HTML

<div
    id="tab1_timepicker1"
    data-hf-control="TimePicker"
    data-hf-options="{
        label: 'Start time',
        defaultValue: 'now',
        emptyContent: 'hh:mm',
        tooltip: 'Start time',
        onChanged: HFFormdefinition.SomeNamespace.doSomethingOnChange,
        calcDurationOptions:'tab1_timepicker1,tab1_timepicker2,tab1_time_duration'
    }"
></div>