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

<div
    id="custom_control_id"
    class="pdf-hide"
    data-hf-control="HFFormdefinition.SomeNamespace.CustomControlName"
    data-hf-options="{
        prop1: 'value1'
    }"
></div>

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

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

<div
    id="derived_custom_control"
    data-hf-control="HFFormdefinition.SomeNamespace.CustomControl"
    data-hf-options="{
        publicProp1: 'foo'
    }"
></div>