Skip to main content
Version: 10.

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.

Combining Two ComboBoxes​

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);
    }
}

Initializr Control​

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;
        }
    }
}

Data Source Handling​

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);
                }
            });
        });
    }
}

User Display Name Handling​

namespace HFFormdefinition.SomeNamespace {
    export function setUser() {
        return HybridForms.API.User.get().displayName || '';
    }
}

Repeating Inputs​

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> | 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<void> {
            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<void> {
            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;
        }
    }
}