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 “pdf-hide” 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>

export class CustomControl extends HybridForms.API.UIControls.BaseControl {
    // instance properties
    private onRendered: () => void;
    public publicProp1: string;

    // instance methods
    constructor(element, options) {
        super(element, options);
    }

    protected createControl(): Promise<void> { // will be called by base class
        console.log('createControl');

        // return a promise here, when all ui relevant work is done!
        return Promise.resolve();
    }

    protected createView() { // will be called by base class
        // get called on PDF creation
    }

    protected registerEvents() { // will be called by base class
        // registerEvents here
        console.log('registerEvents');
        
        this.onRendered = () => {
            console.log('form is rendered and ready');
        };
        HybridForms.API.Page.addEventListener('rendered', this.onRendered);
        HybridForms.API.Page.addEventListener('viewrendered', this.onRendered);
    }

    public dispose() {
        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;
    }

    public static staticMethod() {
        // static method
    }
}