Create Custom Controls

Integration within the HTML

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

Note

The class “hide-in-pdf” is necessary to prevent the PDF parser from parsing this Custom Control, which would not work in that case. 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.

Coding examples

1. Example of a simple custom control that derives from BaseControl

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

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