Skip to main content
Version: 10.0

Controls

Custom Controls in HybridForms are specialized TypeScript 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.

The 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 TypeScript 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​

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