Create the Entry Point JavaScript Files

This topic applies to

Applies to

Aconcagua | SuiteCommerce Web Stores

Each module in an extension contains an entry point . This includes the initial module built with the baseline extension and any added CCT modules. The entry point is required to mount the extension to the application. The entry point provides the connection between the CCT and SMT. For more information on the architecture and purpose of this file, see Entry Point.

Each entry point includes a mountToApp() function. In an extension that implements a CCT, the mountToApp() function in the extensions entry point calls the mountToApp() function in the CCT module’s entry point.

In addition, the mountToApp() function in the CCT module entry point calls the getComponent(‘CMS’).registerCustomContentType() method. This method passes values for the id and view variables defined by the CCT module to the CMS Component.

The following diagram describes the file structure of the baseline extension and the CCT module files:

ImageViewer/                           [Extension]
   Modules/
      ImageViewer/                   [Extension Module]
         JavaScript/
            ImageViewerModule.js   [Extension Entry Point]
      ImageViewerCCT/                [CCT Module]
         JavaScript/
            ImageViewerCCT.js      [Extension Entry Point]

To define the entry points for the extension baseline module and the CCT module:

  1. In the extension baseline module, define the dependencies and implement the mountToApp() function. The mountToApp() function in the extension baseline module calls the mountToApp() function for the CCT module.

    For example, to define the entry point for ImageViewerModule in the example ImageViewer extension:

    1. Open the file Modules/ImageViewerModule/JavaScript/ImageViewerModule.js.

    2. Add the dependency on the CCT module.

      For example, the following code in the ImageViewerModule entry point defines a dependency on the ImageViewerCCT module:

      define(
        'Netsuite.ImageViewer.ImageViewerModule'
      ,   [
          'NetSuite.ImageViewer.ImageViewerCCT'
        ]
      ,   function (
          ImageViewerCCT
        )
    3. Define the mountToApp() function.

      For example, in the following code for the ImageViewerModule entry point, the mountToApp() function calls the mountToApp() function for the CCT module, ImageViewerCCT:

      {
        'use strict';
      
        return  {
          mountToApp: function mountToApp (container)
          {
            ImageViewerCCT.mountToApp(container);
          }
        };
      });
  2. Save the JavaScript file.

  3. Create the entry point for the CCT module by defining the dependencies and implementing the mountToApp() function.

    For example, to define the entry point for ImageViewerCCT module in the example extension:

    1. Open the file Modules/ImageViewerCCT/JavaScript/ImageViewerCCT.js.

    2. Add the dependency on ImageViewerCCT.View.

      define(
        'NetSuite.ImageViewer.ImageViewerCCT'
      ,   [
          'NetSuite.ImageViewer.ImageViewerCCT.View'
          ]
      ,   function (
          ImageViewerCCTView
        )
    3. Define the mountToApp() function.

      For example, for the ImageViewer CCT, the mountToApp() function may look similar to the following:

      {
        'use strict';
      
        return  {
          mountToApp: function mountToApp (container)
          {
            container.getComponent('CMS').registerCustomContentType({
              id: 'cct_netsuite_imageviewercct' 
            ,  view: ImageViewerCCTView
            ,  options: {
                container: container
              }
            });
          }
        };
      }

      The following table describes the values for the id, view, and options variables in the registerCustomContentType() method for the CCT module entry point:

      Variable

      Description

      id

      The id variable must be lowercase. It must match the Name field of the CMS Content Type record in NetSuite, that you create later.

      view

      The view ImageViewerCCTView is used to render the CCT.

      options

      The options are passed as the arguments when initializing the ImageViewCCTView view.

  4. Save the JavaScript file.

  5. To continue creating an extension for a CCT, see Implement the View File