Extension Manifest

This topic applies to

Applies to

Aconcagua | SuiteCommerce Web Stores

Your extension’s Workspace directory includes various manifest.json files. The manifests are JSON files that include all the information required to compile resources for an active theme or extension. Of these files, only one requires editing when you customize a theme. This is the manifest file included in your theme’s development directory:

../Workspace/<THEME_DIRECTORY>/manifest.json

This topic explains this file.

Workspace/<EXTENSION>/manifest.json

This file lists all JavaScript, JSON, SuiteScript, HTML templates, Sass, and assets related to your extension. This file is created when you run the gulp extension:create command. Both the gulp extension:local and gulp extension:deploy commands overwrite any manual changes you make to the manifest file. This happens to automate the creation of this file. However, you may need to update this file from time to time. To preserve any manual changes to your manifest.json file, run either of the two commands, adding the --preserve-manifest suffix (as required):

  • gulp extension:local --preserve-manifest

  • gulp extension:deploy --preserve-manifest

Note

The only time you should need to edit this file is to add Sass entry points for any newly introduced Sass files or make changes to CCT labels.


This topic explains the different areas of the Manifest.json file.

Extension Metadata

The first entries in the manifest file include metadata about the extension itself. These fields are automatically populated when you initially run the gulp extension:create command.

{
    "fantasyName": "My Cool Extension!",
          "name": "MyCoolExtension",
    "vendor": "Acme",
    "type": "extension",
    "target": "SuiteCommerce",
    "version": "1.0.0",
    "description": "My cool extension does magic!", 
//...
  • fantasyName (string) – identifies the label for the extension. This can include special characters.

  • name (string) – uniquely identifies the name of the extension. This field is required. This must be alphanumeric characters without spaces.

  • vendor (string) – identifies the vendor as a string. This field is required.

  • type (string) – indicates if the type as an extension. This field is required.

  • target (comma-separated string) – indicates the SuiteCommerce Applications supported by the theme. This field is required.

  • version (string) – indicates the version of the theme, such as 1.0.0. This field is required.

  • description (string) – provides a description of the extension as it appears in NetSuite. This field is optional.

Important

As a best practice, use semantic versioning (SemVer) notation. For more information, see https://semver.org/.


Assets

The assets object defines paths to the images and fonts located in the theme directory’s assets folder. This defines an array for each image and font used. These paths are relative to the theme’s assets folder path. Extensions treat services as assets. These are created on NetSuite servers when you activate/deploy your extension.

If the extension developer tools detect file name with the pattern XYZ.ServiceController.js, they create the service (.ss) file and add it to the manifest. Later, when you activate the extension, the declared .ss moves to the backend as an asset.

//...
"assets": {
    "img": {
        "files": []
    },
    "fonts": {
        "files": []
    },
    "services": {
        "files": [
            "services/MyCoolModule.Service.ss",
            "services/AdditionalCoolModule.Service.ss"
        ]
    }
},
//...

Configuration

The configuration object defines paths to the JSON files in your extension directory’s Configuration folder.

//...
"configuration": {
    "files": [
        "Modules/MyCoolModule/Configuration/MyCoolModule.json",
        "Modules/AdditionalCoolModule/Configuration/AdditionalCoolModule.json"
    ]
},
//...

Templates

The templates object lists all HTML template files included in the extension by application. The application object includes one object per application (shopping, myaccount, and checkout). Each application lists each file in the files array.

//...
"templates": {
    "application": {
        "shopping": {
            "files": [
                "Modules/MyCoolModule/Templates/acme_mycoolextension_mycoolmodule_list.tpl",
                "Modules/MyCoolModule/Templates/acme_mycoolextension_mycoolmodule_edit.tpl",
                "Modules/AdditionalCoolModule/Templates/acme_mycoolextension_additionalcoolmodule_list.tpl",
                "Modules/AdditionalCoolModule/Templates/acme_mycoolextension_additionalcoolmodule_edit.tpl"
            ]
        },
        "myaccount": {
            "files": [
                "Modules/MyCoolModule/Templates/acme_mycoolextension_mycoolmodule_list.tpl",
                "Modules/MyCoolModule/Templates/acme_mycoolextension_mycoolmodule_edit.tpl",
                "Modules/AdditionalCoolModule/Templates/acme_mycoolextension_additionalcoolmodule_list.tpl",
                "Modules/AdditionalCoolModule/Templates/acme_mycoolextension_additionalcoolmodule_edit.tpl"
            ]
        },
        "checkout": {
            "files": [
                "Modules/MyCoolModule/Templates/acme_mycoolextension_mycoolmodule_list.tpl",
                "Modules/MyCoolModule/Templates/acme_mycoolextension_mycoolmodule_edit.tpl",
                "Modules/AdditionalCoolModule/Templates/acme_mycoolextension_additionalcoolmodule_list.tpl",
                "Modules/AdditionalCoolModule/Templates/acme_mycoolextension_additionalcoolmodule_edit.tpl"
            ]
        }
    }
},
//...

Sass

The sass object declares the paths to each application entry point and all Sass files to be loaded when you deploy. If you introduce a new Sass file into your extension workspace, you must manually add it to the files array within the sass object.

Note

If manually listing Sass files, declare each file in an order that makes the most semantic sense within the Sass hierarchy. If the developer tools automatically added a sass file, the entry is always at the end of the files array. However, your dependencies may require that this order be changed. Check the order in which it was added. , because it will always we be added at last.


//...
"sass": {
    "entry_points": {
        "shopping": "Modules/MyCoolModule/Sass/_mycoolextension-mycoolmodule.scss",
        "myaccount": "Modules/MyCoolModule/Sass/_mycoolextension-mycoolmodule.scss",
        "checkout": "Modules/MyCoolModule/Sass/_mycoolextension-mycoolmodule.scss"
    },
    "files": [
        "Modules/MyCoolModule/Sass/_mycoolextension-mycoolmodule.scss",
        "Modules/MyCoolModule/Sass/_mycoolmodule.scss",
        "Modules/AdditionalCoolModule/Sass/_mycoolextension-additionalcoolmodule.scss",
        "Modules/AdditionalCoolModule/Sass/_additionalcoolmodule.scss"
                  "Modules/AdditionalCoolModule/Sass/sass-extension_myNewSassFile.scss"
    ]
},
//...

JavaScript

The javascript object declares the paths to each application entry point and all JavaScript files to be loaded when you deploy.

//...
"javascript": {
    "entry_points": {
        "shopping": "Modules/MyCoolModule/JavaScript/Acme.MyCoolExtension.MyCoolModule.js",
        "myaccount": "Modules/MyCoolModule/JavaScript/Acme.MyCoolExtension.MyCoolModule.js",
        "checkout": "Modules/MyCoolModule/JavaScript/Acme.MyCoolExtension.MyCoolModule.js"
    },
    "application": {
        "shopping": {
            "files": [
                "Modules/MyCoolModule/JavaScript/Acme.MyCoolExtension.MyCoolModule.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Router.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.List.View.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Edit.View.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Collection.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Model.js",
                "Modules/AdditionalCoolModule/JavaScript/Acme.MyCoolExtension.AdditionalCoolModule.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Router.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.List.View.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Edit.View.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Collection.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Model.js"
            ]
        },
        "myaccount": {
            "files": [
                "Modules/MyCoolModule/JavaScript/Acme.MyCoolExtension.MyCoolModule.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Router.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.List.View.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Edit.View.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Collection.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Model.js",
                "Modules/AdditionalCoolModule/JavaScript/Acme.MyCoolExtension.AdditionalCoolModule.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Router.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.List.View.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Edit.View.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Collection.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Model.js"
            ]
        },
        "checkout": {
            "files": [
                "Modules/MyCoolModule/JavaScript/Acme.MyCoolExtension.MyCoolModule.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Router.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.List.View.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Edit.View.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Collection.js",
                "Modules/MyCoolModule/JavaScript/MyCoolModule.Model.js",
                "Modules/AdditionalCoolModule/JavaScript/Acme.MyCoolExtension.AdditionalCoolModule.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Router.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.List.View.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Edit.View.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Collection.js",
                "Modules/AdditionalCoolModule/JavaScript/AdditionalCoolModule.Model.js"
            ]
        }
    }
},
//...

Ssp-libraries

The ssp-libraries object declares the paths to all SuiteScript files to be loaded when you deploy.

//...
"ssp-libraries": {
    "entry_point": "Modules/MyCoolModule/SuiteScript/Acme.MyCoolExtension.MyCoolModule.js",
    "files": [
        "Modules/MyCoolModule/SuiteScript/Acme.MyCoolExtension.MyCoolModule.js",
        "Modules/MyCoolModule/SuiteScript/MyCoolModule.ServiceController.js",
        "Modules/MyCoolModule/SuiteScript/MyCoolModule.Model.js",
        "Modules/AdditionalCoolModule/SuiteScript/Acme.MyCoolExtension.AdditionalCoolModule.js",
        "Modules/AdditionalCoolModule/SuiteScript/AdditionalCoolModule.ServiceController.js",
        "Modules/AdditionalCoolModule/SuiteScript/AdditionalCoolModule.Model.js"
    ]
}
//...

CCT

If your extension is set up to include a CCT, your manifest’s metadata includes specific information regarding your CCT.

The cct array declares the specific information required to build a CCT in NetSuite. This includes the following attributes:

  • label (required) – lists the name you gave your CCT.

  • icon – lists the path of the icon to be displayed in SMT for the CCT.

  • settings_record – lists the ID of the custom record you associate with this CCT.

  • registercct_id – lists the Name field of the CMS Content Type Record for your CCT. This is also the value of the id property within the registerCustomContentType() method of your CCT module’s entry point JavaScript file.

  • description – lists the description you gave your CCT.

//...
"cct": [
  {
    "label": "This is My CCT!",
    "icon": "img/cct_acme_mycct_icon.svg",
    "settings_record": "customrecord_cct_acme_mycct",
    "registercct_id": "cct_acme_mycct",
    "description": "My cool CCT does magic!"
  },
  {
    "label": "This is My Second CCT",
    "icon": "img/cct_acme_mycct2_icon.svg",
    "settings_record": "customrecord_cct_acme_mycct2",
    "registercct_id": "cct_acme_mycct2",
    "description": "My cool CCT does magic!"
  }
]
}