Use Global Functions in a Container

Global functions must be imported into a page (or any Visual Builder container) using the imports section of the container metadata (and its modules property) before the global functions can be used.

For example, a layout.json, defined in the same extension (ext-layout) where the functions metadata is defined, can specify the modules in its imports like this:

{
  "imports": {
    "modules": {
      "utils": {
        "path": "self:$functions/utils"
      },
      "dateUtils": {
        "path": "self:$functions/dateLocalUtils"
      },
      "commonUtils": {
        "path": "ext-common:$functions/utils"
      }
    }
  }
}

The path property uses a scheme for locating the JavaScript resource, particularly functions, using a convention with three elements:

{extId}:{resourceType}/{resourceAlias}

The path resolves to the actual require path to the JavaScript module loader.

Element	Description
{extId}	Refers to the extension the resource belongs to. 'self' means the current extension. Any other extension will be identified by its id. 'self: - a reserved word, is required to refer to extension level resources. Example: "self:$functions/dateLocalUtils" refers to the current extension functions. The namespace 'self:' is required to refer to extension resources. 'ext-common' - refers to the name of an upstream extension that the current extension depends on. 'utils' is the resource alias defined there
{resourceType}	Uses a special keyword for the /functions resources (for example, "$functions"). self:$functions resolves to an actual resource path ('ext-layout/ui/self/resources/functions') ext-common:$functions resolves to an actual resource path ('ext-common/ui/self/resources/functions')
{resourceAlias}	For global functions, resourceAlias is the alias of the JavaScript defined in functions.json. self:$functions/dateLocalUtils' resolves to ext-layout/ui/self/resources/functions/date/dateUtils.js', where 'dateLocalUtils' is the alias defined in functions.json. ext-common:$functions/commonUtils resolves to ext-common/ui/self/resources/functions/utils/common.js, where 'commonUtils' is the alias for the resource located under 'utils/common.js', that is defined in functions.json.

Here is an example of how functions.json, defined under ext-common/ui/self/resources/functions, might look:

{
  "commonUtils": {
    "path": "utils/common",

    "label": "Common Utility Functions",
    "referenceable": "extension",
    "functions": {
      "titleCase": {}
    }
  }
}

Note:

For "ext-layout" to import global functions from "ext-common", it must have a dependency on the "ext-common" (see below).