onChanged event handler

Integration within the HTML

• Each HybridForms form control (TextField, ComboBox, DatePicker …) provides an onChanged event handler within the data-win-options.

• This can be used to react on user inputs or general changes within the value field of the control.

• The onChanged-function gets as first argument the value of the control. this is the current instance of the form control class.

• As a security feature, WinJS blocks referenced event handlers and functions in declarative html markup, to avoid malicious JavaScript from being run. Therefore, this function has to be marked as "safe" in the corresponding TypeScript file:

  WinJS.Utilities.markSupportedForProcessing(HFFormdefinition.SomeNamespace.doSomethingOnChange);

• HTML and JavaScript example:

<div id="tab1_timepicker1" 
    data-win-control="HFWinJSCtrl.TimePicker" 
    data-win-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>

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

for (let index in HFFormdefinition.SomeNamespace) {
    const exportedFunction = HFFormdefinition.SomeNamespace[index];
    if (typeof exportedFunction !== 'function') {
        continue;
    }
    WinJS.Utilities.markSupportedForProcessing(exportedFunction);
}

Coding examples

1. Example of combining two ComboBoxes

<!-- ComboBox: Begin - Field Dependence: When choosing a Value from the Main ComboBox, 
the content in the Sub ComboBox will change to the relevant content for the selection. -->
<div id="tab1_combobox_haupt"
    data-win-control="HFWinJSCtrl.ComboBox"
    data-win-options="{
        label: 'Main ComboBox',
        dataSource: [
        {
            kat:1,
            name:'Main selection 1'
        },
        {
            kat:2,
            name:'Main selection 2'
        },
        {
            kat:3,
            name:'Main selection 3'
        }],
        dataTextField: 'name',
        dataValueField: 'kat',
        onChanged: HFFormdefinition.SomeNamespace.filterData,
        subCtrlId: 'tab1_combobox_sub'
    }"></div>
<!-- Replace Namespace from added Script -->

<div id="tab1_combobox_sub"
    data-win-control="HFWinJSCtrl.ComboBox"
    data-win-options="{
        label: 'Sub ComboBox',
        dataSource: [
        {
            value:101,
            name:'Sub selection 1.1',
            kat:1
        },
        {
            value:102,
            name:'Sub selection 1.2',
            kat:1
        },
        {
            value:201,
            name:'Sub selection 2.1',
            kat:2
        },
        {
            value:202,
            name:'Sub selection 2.2',
            kat:2
        },
        {
            value:301,
            name:'Sub selection 3.1',
            kat:3
        },
        {
            value:302,
            name:'Sub selection 3.2',
            kat:3
        }],
        dataTextField: 'name',
        dataValueField: 'value'
    }"></div>
<!-- ComboBox: End - Field Dependence -->

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-win-options:
    *      subCtrlId[string](required): formcontrol-id of effected ComboBox
    */
    export function filterData() {
        var datengruppe = this.val(),
            comboBoxTargetCtrl,
            datenquelle,
            currentRU = '';
        
        if (HybridForms.API.RepeatingUnits.isRepeatingUnit(this.element)) {
            currentRU = HybridForms.API.RepeatingUnits.getPostfixFieldId(this.element);
        }

        comboBoxTargetCtrl = HybridForms.API.FormControls.getCtrl(this.subCtrlId + currentRU);
        
        if (typeof comboBoxTargetCtrl === 'undefined') {
            return;
        }

        datenquelle = comboBoxTargetCtrl.dataSource;
        if (!datengruppe || !datengruppe.value) {
            comboBoxTargetCtrl.setDataSource(datenquelle);
            return;
        }

        var filterByValue = datengruppe.value;
        var filtered = datenquelle.filter(function(item) {
            return filterByValue == item.kat;
        });
        comboBoxTargetCtrl.setDataSource(filtered);
    },        
}

for (let index in HFFormdefinition.SomeNamespace) {
    const exportedFunction = HFFormdefinition.SomeNamespace[index];
    if (typeof exportedFunction !== 'function') {
        continue;
    }
    WinJS.Utilities.markSupportedForProcessing(exportedFunction);
}