Create a View

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.

Important:

If you are developing views for release 2020.2 or later, do not use Backbone.View as outlined in the following procedure. For release 2020.2 and later, you should use SCView as described in the extensibility API reference.

To create a view:

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

Define the view and its associated template.

                define('MyCoolView'
,    [
      'Backbone'
   ,    'my_cool.tpl'
   ]
,    function (
      Backbone
   ,    my_cool_tpl
   )

Extend Backbone.View, declaring your template and your context.

                {
    return Backbone.View.extend({

        template: my_cool_tpl,

        getContext: function () {
            return {
                name: 'John'
            };
        }
    });
});

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

Declare your view as a dependency.

For example:

                define('MyCoolModule'
,   [
      'MyCoolView'
      ...
   ]
,    function (
      MyCoolView
      ...
   )

Save your entry point file.
Declare your new view file to the javascript object of the appropriate application entry points in the extension manifest. See Edit the Extension Manifest for details on this file.
Build any associated templates following the best practices and instructions detailed in HTML Best Practices for Themes.

To create a view:

Related Topics