Skip to main content
Version: 10.

Integration

We strongly advice for TypeScript over JavaScript when implementing Custom Code. TypeScript offers type safety and significantly improved support for autocompletion in code editors. However, if you prefer to use JavaScript, you can find the documentation here.

To incorporate TypeScript into your Form Development process, create a "tsconfig.json" file within the Form Definition folder. You can find a sample configuration file included in our "formDev" project.

Since TypeScript files cannot be directly included in the Form, they need to be transpiled into regular JavaScript files first. This transpilation process occurs automatically upon saving your files or can be triggered manually using the Template Exporter tool.

Once transpiled, link the JavaScript files in the script tag within the header of your Form Definition:

<script data-hf-src="[FILENAME].js"></script>

For detailed examples, explore the Forms provided within the FormDefinitions folder of the "formDev" project.

The basic structure of HybridForms TypeScript (file)​

Define your namespace

namespace HFFormdefinition.BaseHelpers {
    // variables, functions and classes
}

Naming Convention for Namespacing:

  • HFFormdefinition.[FORMDEFINITION-TITLE]
  • HFFormdefinition.[EXTERNAL-JS-FILENAME]
Note

Define the namespace once within the HTML Form Definition, especially when utilizing external files. Ensure that each Form Definition has a unique namespace to prevent any potential issues.

Full TypeScript example​

namespace HFFormdefinition.BaseHelpers {
    export function doSomethingOnChange(value) {
        console.log('value: ', value);
        console.log('ctrl: ', this);
    }
}