Creating Custom Views in SuiteCommerce Extensions

Creating custom views in SuiteCommerce extensions is essential for enhancing the user interface and optimizing the presentation layer of your application. A view connects user interface events with the necessary data, allowing you to create dynamic experiences in your modules.

Important Note: Starting with SuiteCommerce release 2020.2, the preferred method for developing views is using SCView instead of Backbone.View. This update is vital for maintaining compatibility with the latest SuiteCommerce features.

How to Create a View

Follow these step-by-step instructions to create a new view in your SuiteCommerce extension:

1. Create a New JavaScript File
   Within the JavaScript directory of your extension module, create a new file for the view.

2. Define the View and Its Template
   Use the following structure to define your view and include the associated template file:

   javascriptCopy

   "text-purple-400">define('MyCoolView', [
       'Backbone',
       'my_cool.tpl'
   ], "text-purple-400">function (Backbone, my_cool_tpl) {

3. Extend Backbone.View
   In this step, extend Backbone.View to declare your template and context:

   javascriptCopy

   1{
   2    "text-purple-400">return Backbone.View.extend({
   3        template: my_cool_tpl,
   4        getContext: "text-purple-400">function () {
   5            "text-purple-400">return {
   6                name: 'John'
   7            };
   8        }
   9    });
   10});

4. Save Your View
   Ensure that your new view file is saved correctly in the module.

5. Update Entry Point JavaScript File
   Open the entry point JavaScript file for the module that will utilize your new view.

6. Declare Your View as a Dependency
   Add your view as a dependency in the entry point file:

   javascriptCopy

   "text-purple-400">define('MyCoolModule', [
       'MyCoolView',
       ...
   ], "text-purple-400">function (MyCoolView, ...) {

7. Save the Entry Point File After saving your updates, your new view will be ready to use in the module.

8. Declare the View File in the Extension Manifest
   Update the javascript object of the application entry points in the extension manifest to include your new view file. This ensures that the view is recognized by the extension.

9. Build Associated Templates
   Follow best practices for creating any associated templates as detailed in the HTML Best Practices for Themes documentation.

By building custom views, developers can effectively manage variables available in templates, enhancing the overall user experience in their SuiteCommerce extensions.

Key Takeaways

• Creating custom views enhances the user interface in SuiteCommerce extensions.
• Use SCView for extensions developed in SuiteCommerce release 2020.2 or later.
• Properly declare views and dependencies for modular JavaScript architecture.
• Follow best practices for template development to optimize performance.

Source: This article is based on Oracle's official NetSuite documentation.