Edit the Extension Manifest

Your extension’s Workspace directory includes a manifest.json file, which includes all the information required to compile resources for the extension.

../Workspace/<EXTENSION_DIRECTORY>/manifest.json

This file is auto-generated when you execute the gulp extension:create command and includes all JavaScript, JSON, SuiteScript, HTML templates, Sass, and assets required to compile and activate your extension.

Manual Edits

This file lists all JavaScript, JSON, SuiteScript, HTML templates, Sass, and assets related to your extension. Although this file is automatically generated, you may need to update it manually if adding Sass entry points for any newly introduced Sass files or changing CCT labels.

Warning:

Potential data loss. Besides compiling and deploying your extension to a local server, the gulp extension:local and gulp extension:deploy commands update the extension’s manifest.json file and overwrites any manual changes you made to this file.

To preserve manual changes to manifest.json use the following commands to test your extension locally or deploy to NetSuite:

gulp extension:local --preserve-manifest
gulp extension:deploy --preserve-manifest

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.

            {
    "name": "MyCoolExtension",
       "fantasyName": "My Cool Extension!",
       "vendor": "Acme",
    "type": "extension",
    "target": "SCA,SCS",
    "target_version": {
        "SCA": "19.2.0",
        "SCS": "19.2.0"
    },
    "version": "1.0.0",
    "description": "My cool extension does magic!",
   //...

name (string) – uniquely identifies the name of the extension. This field is required. This must be alphanumeric characters without spaces.
fantasyName (string) – identifies the label for the extension. This field can include special characters.
vendor (string) – identifies the vendor as a string. This field is required.
type (string) – indicates the type as an extension. This field is required.
target (comma-separated string) – indicates the SuiteCommerce or SCA applications supported by the extension. This field is required.
target_version ( array) – indicates the SuiteCommerce or SCA application versions supported by the extension. This field is required.
version (string) – indicates the version of the extension, 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:

To take advantage of extension update requirements, version numbers should follow this format, where d is a single digit: dd.dd.dd.

Assets

The assets object defines paths to the images and fonts located in the extension directory’s assets folder. This defines an array for each image and font used. These paths are relative to the extension’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 a file name with the pattern XYZ.ServiceController.js, they create the service (.ss) file and add a reference in the manifest. Later, when you activate the extension, the .ss file deploys 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 a file was added to the array because the developer tools always add a file to the end of the array.

            //...
"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"
    ]
}
//...

Suitescript 2

The suitescript2 object declares the paths to SuiteScript 2.0 services to be loaded when you deploy. This object defines an array that can include .js or .ss files.

            //...
"suitescript2": {
        "files": [
            "Modules/MyCoolModule/SuiteScript2/MyCoolModule.Service.ss"
        ]
}
//...

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 (required) – lists the ID of the custom record you associate with this CCT.
registercct_id (required) – 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!"
  }
]
}

Page

If your extension is set up to include a new CMS Page Type, you must manually add a page type definition within your extension’s manifest.json. When an Extension SuiteApp is installed into a NetSuite account, this entry ensures that the CMS Page Type record is created in NetSuite. This is required if creating a new Page Type for use with Site Management Tools (SMT).

The page object includes the types array, which introduces each new page type included in the extension. All fields correlate to the CMS Page Type record in NetSuite:

name (required) – Sets the name of the Page Type. This becomes the name of the CMS Page Type record. This must match the name attribute when registering your Page Type with PageTypeComponent.registerPageType() in your extension. See Register Page Types and Templates for SMT for details. This is required.
displayName (required) – This string sets the label displayed in SMT for the Page Type when creating a new page.
description – (optional) This string sets the description of the Page Type.
baseUrlPath (optional) – This string sets the base URL path for all the pages of this page type. For example, if you a have a page type called blog and a base URL path of blog, all blog pages are accessed by mysite.com/blog/[page url].
settingsRecord (optional) – This string sets the ID of any custom record you associate with this page type, inheriting the custom record settings when you add or edit the page type.

            //...
"page": {
   "types": [
       {
           "name": "blog",
           "displayName": "Blog",
           "description": "This is a blog page type",
           "baseUrlPath": "blog",
           "settingsRecord": "custrec_page_type_test"
       },
       {
           "name": "other-page-type",
           "displayName": "My other page type",
           "description": "This is another page type",
       }
   ]
}
//...