Views in an Extension

Views in an extension tell the application which template to render, pass context data to the template, and listen for user inferface events. In addition, views often contain much of the business logic of an extension. You can pass data, such as a component of the extensibility API, to a view at instantiation. Use the SCView class of the SCView component to define a view in an extension. SCView is part of the extensibility API since SuiteCommerce 2020.2.

Note:

If you want to create an extension on a version of SuiteCommerce Advanced prior to the 2020.2 release, you must extend the View module of Backbone.

SCView is an abstract class, which means that instead of instantiating it as you would with other components in the extensibility API, you include it as a dependency when defining your view. You must override the getContext() method in your view subclass. getContext() is used to set contextual data, which can then be accessed in a template. You can also override the getEvents() method if you need to specify event listeners and handlers.

The following example shows the anatomy of a basic view that uses the SCView class.

NetSuite.MyExtension.MainView.js

          define(
  'NetSuite.MyExtension.MainView',
  [
    'SCView',
    'netsuite_myextension_mainview.tpl'
  ],
  function(SCViewComponent, netsuite_myextension_mainview_tpl) {
    'use strict';

    var SCView = SCViewComponent.SCView;

    function MyExtensionMainView() {
      SCView.call(this);

      this.template = netsuite_myextension_mainview_tpl;
    }

    MyExtensionMainView.prototype.getContext() {
      return {
        quantityintransit: '10',
        quantityonhand: '25'
      };
    }

    MyExtensionMainView.prototype.getEvents() {
      'click #getExtendedStockInfo': 'getExtendedStockInfo'
    }

    // A pseudo function to get additional stock information from another  
    // data source. 
    MyExtensionMainView.prototype.getExtendedStockInfo() = function() {
      // code 
      // goes
      // here
    }

    return MyExtensionMainView;
  }
);

To create a view, include the SCView class as a dependency in the module definition, which should conform to the asynchronous module definition (AMD) specification. In the define() statement, specify the module's name, any dependencies, and a callback function. In a basic view, the minimm dependencies are typically the SCView class and a template file that contains the HTML output.

In the callback function, create a variable named SCView to hold the SCView class. You can refer to this variable later in the module.

Next create a constructor function to define how the view works. Views usually require a template, so set the value of this.template to the template name you passed in to the callback function. If you want to define any other initialization tasks, you can add them within the constructor function.

Because getContext() is an abstract method, you must define it and return an object. If your extension does not have context data, return an empty object with return {}. You can then access the context data in the template with Handlebars placeholders. For example, to access the value of the quanityintransit property, use a placeholder in the following format in the template file:

          <div>{{quantityintransit}}</div>

If you want to register event listeners in the view, override the getEvents() method. getEvents() must return an object containing the event listeners as properties and the event handlers as the value of those properties. See SCView in the extensibility API reference for more information.

Define any other methods or properties your view requires on the subclass’ prototype property. The preceding example includes a pseudo function to get third-party stock information. You can call this function with this.getExtendedStockInfo() elsewhere in the main callback function. If you need to call the function in another scope, for example in the callback function of a promise, call it with MyExtensionMainView.prototype.getExtendedStockInfo().

Return the AMD constructor function at the end of the callback function with return MyExtensionMainView.

Related Topics