Add a Child View to a Composite View

Adding a child view to a parent view is a common way of extending the functionality of SuiteCommerce Advanced (SCA). For example, you can easily add a message to a page by adding a GlobalViews.Message.View view as a child view. Adding a child view requires making two types of changes to the SCA source code:

• Extend the childViews object of a view. Because this requires a change to a JavaScript or TypeScript source file, you should create a custom module that uses prototyping to add the child view.

  The module source files for SCA 2019.1 and earlier are JavaScript files with .js filename extensions. The module source files for SCA 2019.2 and later are TypeScript files with .ts filename extensions. For more information about TypeScript, see TypeScript.

• Override the template file. In addition to adding the view to the childViews object, you must also edit the HTML template to implement the child view in a page.

Note:

Because a template file can only be overridden one time, you may want to define the override in a different custom module created specifically for template overrides when making your own customizations. See Override a Template File for more information.

To extend the childViews object of a view:

1. Create the directory structure for your custom module.

   1. Create a directory called extensions.

      • If implementing 2019.2 and later, create this directory in the Advanced directory. Examples: SC_20.1/Advanced/extensions, SC_19.2_Live/Advanced/extensions.

      • If implementing 2019.1 and earlier, create this directory in the Modules directory. For example: Modules/extensions

   2. In the extensions directory, create a subdirectory called HeaderExtension@1.0.0.

   3. In the HeaderExtension directory, create a subdirectory called JavaScript.

   4. Also in the HeaderExtension directory, create another subdirectory called Templates.

   When creating customizations, you should create a directory structure as described in Organize Source Code for Custom Modules.

2. Create a new file.

   • If implementing 2019.2 or later, name this file HeaderExtension.ts.

   • If implementing 2019.1 or earlier, name this file HeaderExtension.js.

3. Define your custom module and dependencies by adding the following code to this file.

   This code defines the dependencies required by your custom module. If implementing SuiteCommerce 2019.1 or earlier, see Asynchronous Module Definitions (AMD) and RequireJS for information about defining dependencies within a module. This module includes the following views as dependencies:

   • Header.View - is required to extend the childViews object.

   • GlobalViews.Message.View - is required to add a message view to the application header.

   JavaScript example:

   javascriptCopy

   1"text-purple-400">define('HeaderExtension'
   2,   [  
   3        'underscore'
   4    ,   'Header.View'
   5    ,   'GlobalViews.Message.View'
   6    ]
   7,   "text-purple-400">function (
   8        _
   9    ,   HeaderView
   10    ,   GlobalViewsMessageView
   11    )
   12{
   13   'use strict';
   14 
   15      //Additional code goes here.
   16 
   17});

   TypeScript example:

   javascriptCopy

   1///<amd-module name="HeaderExtension"/>
   2 
   3/// <reference path="../../../Commons/Utilities/JavaScript/GlobalDeclarations.d.ts" />
   4 
   5"text-purple-400">import * as _ "text-purple-400">from 'underscore';
   6"text-purple-400">import HeaderView = "text-purple-400">require('../../Header/JavaScript/Header.View');
   7"text-purple-400">import GlobalViewsMessagesView = "text-purple-400">require ('../../GlobalViews.Messages.View');
   8 
   9      //Additional code goes here.;

4. Add the mountToApp method to the Header.Extension.js file (or the Header.Extension.ts file) as shown in the following sample:

   javascriptCopy

   1"text-purple-400">return  {
   2 
   3      mountToApp: "text-purple-400">function (application)
   4  {
   5 
   6    HeaderView.prototype.childViews.HeaderExtension = "text-purple-400">function()
   7    {
   8       "text-purple-400">return "text-purple-400">new GlobalViewsMessageView({
   9          message: 'Hello World! - This is an Example of a GlobalMessageView!'
   10            ,   type: 'success'
   11                   ,   closable: true
   12              });            
   13    }
   14  }
   15}

   This code performs the following:

   • Specifies a return statement that returns the mountToApp method. This method is required to load a module into the application.

   • Extends the childViews object of the Header.View module using JavaScript prototyping.

5. Copy the original template file to your custom module.

   1. Copy the header.tpl file to the Templates directory of your custom module.

      • If implementing 2019.2 and later, copy