Manifest.json

This file is the main file of each framework project or package. All components and their dependencies are documented here.

Components

Possible components are:

• Package: This entry references a specific NuGet package as a dependency by its name in nugetId. If, for example, a TcHmiButton (from Beckhoff.TwinCAT.HMI.Controls) is used in its own package, Beckhoff.TwinCAT.HMI.Framework does not have to be referenced additionally, since this is already done in the controls package.
• Function: This registers a function from this package in the system. The function directory (basePath) is specified for this. The name of the function description file is specified as descriptionFile.
• Resource: Two resource types can be included, JavaScript files and CSS files. The embedding process is carried out in the correct order. A CSS resource, which is located between two controls in the manifest file, is therefore also included between the CSS files of these two controls.
  For CSS files, a theme name can also be specified (since version 1.12.752.0). In this case, the file will only be included if a theme with the corresponding name is active, similar to what is possible with control CSS files.
• Control: This registers a control from this package in the system. The control directory (basePath) is specified for this. The name of the control description file, Description.json, should not be changed.

Toolbar category

Furthermore, you can use the entry toolboxCategory to define where a control appears in the Visual Studio toolbar.

• Beckhoff.TwinCAT.HMI:200 is stored in the System category.
• Beckhoff.TwinCAT.HMI:201 is stored in the Beckhoff category.
• Beckhoff.TwinCAT.HMI:202 is stored in the 3rd party category.
• Beckhoff.TwinCAT.HMI:203 is stored in the Legacy (1.10) category.
• You can create your own entries via provideMetadata (also for multiple languages in Visual Studio). See example below.
• If no category is defined here, the name of the project itself is used as the category.

JavaScript Module Mapping

If JavaScript modules (ES modules) are used within this package, an import target can be defined via the entry esmoduleImports.

"esmoduleImports": [
    {
        "imports": {
            "marked": "Lib/marked.esm.js"
        }
    }
]

Such a definition can also be defined differently for a subfolder.

"esmoduleImports": [
    {
        "imports": {
            "marked": "Lib/marked.esm.js"
        }
    },
    {
        "moduleScope": "oldcontrolFolder",
        "imports": {
            "marked": "LibOld/marked.esm.js"
        }
    }
]

Example

{
   "apiVersion": 1,
   "modules": [
      {
         "type": "Package",
         "nugetId": "Beckhoff.TwinCAT.HMI.Framework"
      },
      {
         "type": "Function",
         "basePath": "myFunction/",
         "descriptionFile": "myFunction.function.json"
      },
      {
         "type": "Resource",
         "path": "customHelpers.js"
      },
      {
         "type": "Control",
         "basePath": "Control1/",
         "descriptionFile": "Description.json",
         "toolboxCategory": "MyIdentifier:200"
      },
      {
         "type": "Resource",
         "path": "PackageStyle.css"
      },
      {
         "type": "Resource",
         "path": "PackageBaseThemeStyle.css",
         "theme": "Base",
      },
      {
         "type": "Control",
         "basePath": "Control2/",
         "descriptionFile": "Description.json",
         "toolboxCategory": "MyIdentifier:201"
      }
   ],
   "provideMetadata": {
      "toolbox": {
         "MyIdentifier": {
            "200": "FrameworkPrj1",
            "201": {
               "default": "Bühnentechnik",
               "de-DE": "Bühnentechnik",
               "en-US": "Stagecraft",
               "it-IT": "Scenotecnica",
               "nl-NL": "Theatertechniek"
            }
         }
      }
   },
   "$schema": ".hmiframework/Schema/Manifest.Schema.json"
}