Create a View

This topic applies to

Applies to

Aconcagua | SuiteCommerce Web Stores

Views listen to the user interface events and coordinate with the data required by the associated module to handle the presentation layer of the application. A view also includes the getContext() method, which defines the variables available to templates using the view.

Extensions might require a new view for an existing page or create new experience altogether. This section explains how to build a view that declares a template and a context.

To create a view:

  1. Create a new JavaScript file within the JavaScript directory of your extension module.

  2. Define the view and its associated template.

    define('MyCoolView'
    ,    [
          'Backbone'
       ,    'my_cool.tpl'
       ]
    ,    function (
          Backbone
       ,    my_cool_tpl
       )
  3. Extend Backbone.View, declaring your template and your context.

    {
        return Backbone.View.extend({
    
            template: my_cool_tpl,
    
            getContext: function () {
                return {
                    name: 'John'
                };
            }
        });
    });
  4. Save your view.

  5. Open the entry point JavaScript file for the module containing your new view.

  6. Declare your view as a dependency.

    For example:

    define('MyCoolModule'
    ,   [
          'MyCoolView'
          ...
       ]
    ,    function (
          MyCoolView
          ...
       )
  7. Save your entry point file.

  8. Declare your new view file to the javascript object of the appropriate application entry points in the extension manifest. See Extension Manifest for details on this file.

  9. Build any associated templates following the best practices and instructions detailed in HTML Best Practices.