Skip to main content
Version: Upcoming 🦄

Integration

There are two possible ways to implement JS functionality:

  1. Directly within the HTML Form Definition in the head section or within HybridForms blocks:

    <script></script>

  2. Via an external file and linked scriptTag within the Form Definition's header:

    <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 JavaScript (file)​

  1. Pack JS within an IIFE (Immediately Invoked Function Expression)

    (function () {
        'use strict'; // forcing browser to strict mode Javascript

        // code here
    })();

  2. Define your WinJS namespace

    WinJS.Namespace.define('HFFormdefinition.NamespaceChild', {
        // variables, functions and classes
    });

  3. For browser (e.g. chrome) debbugging purposes, add the following at the end of the file

    //# sourceURL=[Name of the js file].js

  4. If you are using ESLint and the no-undef-rule, add globals at the beginning of the file to prevent ESLint errors

    /* global $ WinJS Icomedias HybridForms [...] */

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 JavaScript example​

/* ESLint no-undef-rule: define globals to prevent ESLint errors */
/* global $ WinJS IcoWinJS kendo HFWinJS HybridForms Icomedias HFFormdefinition */

(function () {
    'use strict'; // forcing browser to strict mode JavaScript

    WinJS.Namespace.define('HFFormdefinition.BaseHelpers', {
        // variables, functions and classes
    });
})();
//# sourceURL=[Name of the js file].js