Baseline Extension Creation for SuiteCommerce Development

Creating a baseline extension in SuiteCommerce provides developers with a structured environment to build their custom extensions. By executing the gulp extension:create command, essential directories, files, and modules are automatically generated, streamlining the development process.

What Happens When You Create a Baseline Extension?

When you run the gulp extension:create command, the extension developer tools perform several key actions:

• Creates the Workspace directory in your top-level development directory, unless it already exists.
• Creates a subdirectory named after your extension, which contains all assets and the initial module.
• Generates a manifest.json file, holding all necessary information required to compile resources for your extension.

Example Directory Structure

For example, if you create an extension named MyCoolExtension with a vendor name of Acme and an initial module named MyCoolModule, your Workspace directory may look like this:

1Workspace/
2      MyCoolExtension/
3         assets/
4            fonts/
5            img/
6            services/
7         Modules/
8            MyCoolModule/
9               Configuration/
10               JavaScript/
11               Sass/
12               SuiteScript/
13               SuiteScript2/
14               Templates/
15         manifest.json

Starter Files

The developer tools also generate starter files in various categories, such as Configuration, JavaScript, Sass, and Templates. The aim is to create a fundamental 'Hello World' extension example. Adjustments may be needed based on SuiteCommerce versions you are utilizing:

• Model Files: The file Acme.MyCoolExension.MyCoolModule.Model.js serves as the frontend model. If your development targets SuiteCommerce or SuiteCommerce Advanced 2020.1 or later, you might need to update the getAbsoluteUrl method as specified in related guidelines.
• View Files: The file MyCoolModule.Model.View.js handles the user interface. When developing for SuiteCommerce Advanced versions prior to 2020.1.0, you'll refer to legacy documentation concerning views. For versions 2020.2.0 and later, the recommended practice is to utilize the SCView class instead of Backbone.View.

Using SuiteScript 2.0 Services

During the creation of your extension, the developer tools set up a frontend model that supports requests via backend services. The model utilizes the getAbsoluteUrl method to determine the correct service URL, essential for communication with the backend. When utilizing this method, you must specify:

• The relative service path.
• A boolean value indicating whether the URL is for a SuiteScript 2.0 service (set to true) or for a SuiteScript 1.0 backend service (set to false).

Note: You will need to create separate models for multiple services within your extension. Reusing the initially created model file and modifying it for other services is advisable.

Important Example Code for Service Models

• SuiteScript 1.0 service:

//@property {String} urlRoot
     urlRoot: Utils.getAbsoluteUrl(
       getExtensionAssetsPath("services/MyCoolModule.Service.ss")
     );

• SuiteScript 2.0 service:

1//@property {String} urlRoot
2     urlRoot: Utils.getAbsoluteUrl(
3       getExtensionAssetsPath(
4         "Modules/MyCoolModule/SuiteScript2/MyCoolModule.Service.ss"
5       ),
6       true
7     );

Understanding these structures and methods is crucial for successfully developing and deploying an effective SuiteCommerce extension.