Import Modules Using requireJS Path Mapping

The example below shows how to import two modules in a page.json using requireJS path mapping.

{
  "imports": {
    "modules" : {
      "converterUtils": {
        "path": "ojs/ojconverterutils-i18n"
      },


      "arrayUtils": {
        "path": "faCommon/arrayUtils"
      }
    }
  }
}

• "converterUtils" specifies a path to a JET module using the implicit requireJS mapping ('ojs') that is set up for JET modules in VB.
• "arrayUtils", on the other hand, uses a requireJS path 'faCommon' that is a requireJS path mapping defined in the application metadata. See Declarative RequireJS Path Mapping.

Each module defined in the section is available through an un-scoped "$imports" built-in variable.

The built-in "$imports" context property is un-scoped and limited to the current container to avoid performance issues and module conflicts at different context (for example, $page, $flow, $application).

<div>
  <oj-bind-text
    value="[['Last Updated on - ' + $imports.converterUtils.IntlConverterUtils.dateToLocalIso(new Date())]]">

  </oj-bind-text>
</div>

In a page.json action chain, the assignVariablesAction uses the external module imported as "arrayUtils", to call a filter method, as shown here:

{
  "removeTab": {
    "module": "vb/action/builtin/assignVariablesAction",
    "parameters": {
      "$page.variables.switcherArray": {
        "module": "{{ $imports.arrayUtils }}",
        "functionName": "filter",
        "params": [
          {
            "array": "{{ $page.variables.switcherArray }}",
            "callback": "{{ function (p) { return p.id !== $variables.itemToRemove } }}"
          }
        ]
      }
    }
  }
}

where the arrayUtils method 'filter' might look like this:

class ArrayUtils {
  /**
   * Returns a new array with all elements that pass the test implemented by the provided function.
   * @param helper assignment helper
   * @param defaultValue the default value of the variable
   * @param {Object} params properties are
   * @param {Array} params.array - the array being filtered
   * @params {Function} params.callback - function used as callback to filter values.
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
   * @return {Array} filtered array or the array1 if args invalid
   */
  static filter(helper, defaultValue, params) {
    const array1 = params.array1;
    const callback = params.callback;
    if (Array.isArray(array1) && callback && typeof callback === 'function') {
      return array1.filter(callback);
    }

    console.warn('invalid params provided for the filter method', params);
    return array1;
  }
}