Implement the View File

This topic applies to

Applies to

Aconcagua | SuiteCommerce Web Stores

This view defines what the CCT loads when it is dragged into the application.

To implement a view file:

  1. Review the dependencies for the view.

    The view requires CustomContentType.Base.View extends Backbone.View, initializes the CCT settings, and includes the base CCT class from which all custom CCT modules extend.

    For example, your dependencies might look similar to the following:

    define('NetSuite.ImageViewer.ImageViewerCCT.View'
    ,  [
        'CustomContentType.Base.View'
      ,  'Utils'
    
      ,  'netsuite_imageviewer_imageviewercct.tpl'
    
      ,  'jQuery'
      ]
    ,  function (
        CustomContentTypeBaseView
      ,  Utils
    
      ,  netsuite_imageviewer_imageviewercct_tpl
    
      ,  jQuery
      )
  2. Note the template that includes the HTML required to render the data defined by the view:

    template: netsuite_imageviewer_imageviewercct_tpl

    For more information about the templates for the CCT module, see Implement the Template File.

  3. Define the initialize() function.

    This function is executed when the view is instantiated. The options variable is used to initialize the view constructor.

    ,  initialize: function initialize (options)
        {
          if (options)
          {
            this.container = options.container;
          }
    
          this._initialize();
        }
  4. Note the install() function.

    ,  install: function (settings, context_data)
        {
          this._install(settings, context_data);
    
          // call some ajax here
    
          var promise = jQuery.Deferred();
          return promise.resolve();
        }

    Note

    Until the promise resolves, you cannot edit the settings of this CCT.


  5. Define the contextDataRequest variable.

    The CCT might require access to the data, provided by the contextData objects. In this case, the ImageViewer CCT requires access to item data. These objects contain all the context data available by default, depending on where you dropped the CCT.

    ,  contextDataRequest: ['item']
  6. Define validateContextDataRequest.

    You must override validateContextDataRequest to return true in case the data does not exist in the area where you drop the CCT in the SMT admin.

    ,  validateContextDataRequest: function validateContextDataRequest()
        {
          return true;
        }
  7. Define the getContext() method.

    The templates receives a single object returned by the getContext() method. This can be a property defined in each associated Custom Record within a settings object. The settings object contains each Field ID for the custom record. You access the values for the fields in the getContext() function.

    The following table lists the fields in the custom record for the example ImageViewer CCT:

    Field

    Description

    custrecord_cct_ns_ivcct_valign

    Sets the vertical alignment of a text object.

    custrecord_cct_ns_ivcct_text

    Declares some text to display.

    custrecord_cct_ns_ivcct_imageurl

    Declares the URL to an image.

    // ...
          var texts = []
          ,  imageUrl = ''
          ,  valign = this.valign[this.settings.custrecord_cct_ns_ivcct_valign] || this.valign['3'];
    
          if (this.contextData.item)
          {
            var item = this.contextData.item();
    
            texts = [item.keyMapping_name];
    
            var thumbnail = item.keyMapping_thumbnail;
            imageUrl = (thumbnail && thumbnail.url) ? thumbnail.url : thumbnail;
          }
    
          var set_text = Utils.trim(this.settings.custrecord_cct_ns_ivcct_text)
          ,  set_texts = set_text ? set_text.split('\n') : []
          ,  set_imageUrl = Utils.trim(this.settings.custrecord_cct_ns_ivcct_imageurl);
    
          texts = set_texts.length ? set_texts : texts;
          imageUrl = set_imageUrl ? set_imageUrl : imageUrl;
          
         // ...

    For the example ImageViewer CCT, your view might look similar to the following:

    define('NetSuite.ImageViewer.ImageViewerCCT.View'
    ,  [
        'CustomContentType.Base.View'
      ,  'Utils'
    
      ,  'netsuite_imageviewer_imageviewercct.tpl'
    
      ,  'jQuery'
      ]
    ,  function (
        CustomContentTypeBaseView
      ,  Utils
    
      ,  netsuite_imageviewer_imageviewercct_tpl
    
      ,  jQuery
      )
    {
      'use strict';
    
      return CustomContentTypeBaseView.extend({
    
        template: netsuite_imageviewer_imageviewercct_tpl
    
      ,  initialize: function initialize (options)
        {
          if (options)
          {
            this.container = options.container;
          }
    
          this._initialize();
        }
    
      ,  install: function (settings, context_data)
        {
          this._install(settings, context_data);
    
          // call some ajax here
    
          var promise = jQuery.Deferred();
          return promise.resolve();
        }
    
      ,  contextDataRequest: ['item']
    
      ,  validateContextDataRequest: function validateContextDataRequest()
        {
          return true;
        }
    
      ,  valign: {
           '1': 'top'
        ,  '2': 'center'
        ,  '3': 'bottom'
        }
    
      ,  getContext: function getContext()
        {
          var texts = []
          ,  imageUrl = ''
          ,  valign = this.valign[this.settings.custrecord_cct_ns_ivcct_valign] || this.valign['3'];
    
          if (this.contextData.item)
          {
            var item = this.contextData.item();
    
            texts = [item.keyMapping_name];
    
            var thumbnail = item.keyMapping_thumbnail;
            imageUrl = (thumbnail && thumbnail.url) ? thumbnail.url : thumbnail;
          }
    
          var set_text = Utils.trim(this.settings.custrecord_cct_ns_ivcct_text)
          ,  set_texts = set_text ? set_text.split('\n') : []
          ,  set_imageUrl = Utils.trim(this.settings.custrecord_cct_ns_ivcct_imageurl);
    
          texts = set_texts.length ? set_texts : texts;
          imageUrl = set_imageUrl ? set_imageUrl : imageUrl;
         
          return {
            hasText: !!texts.length
          ,  texts: texts
          ,  hasImage: !!imageUrl
          ,  imageUrl: imageUrl
          ,  valign: valign
          };
    
        }
      });
    });
    
  8. Save the view file.

  9. To continue creating an extension for a CCT, go to Implement the Template File

Note

The above example uses the valign object to map the values of the customlist_cct_ns_ivcct_valign list in the custom record for the CCT.