Skip to main content
Version: 9.6

Integration of JS functionality

There are two possibilities 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 have a look at the forms provided within the formdefinitions folder of the "formDev".

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 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 on the beginning of the file to prevent ESLint errors.

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

Naming convention for namespacing:

  • HFFormdefinition.[FORMDEFINITION-TITLE] or

  • HFFormdefinition.[EXTERNAL-JS-FILENAME]

Info

Define the namespace once within the html form definition, especially when using external files. These namespace have to unique for each form definition to avoid side effects.

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

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

})();
//# sourceURL=[Name of the js file].js

HTML form definition example​

<html>
    <head>
        [...]
        <script data-hf-src="HFCustomControls.js"></script>
        <script data-hf-src="BaseHelpers.js"></script>
</head>
<body>
    <script>
        WinJS.Namespace.define("HybridForms.Formdefinition.CustomControls", {});
        WinJS.Namespace.define("HFFormdefinition.BaseHelpers", {});
        WinJS.Namespace.define("HFFormdefinition.BaseTable", {});
    </script>

[…]
</body>
<html>