Implement the View File

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.

Related Topics

Create a Custom Content Type

Create Your CCT as an Extension

Create the Entry Point JavaScript Files

Implement the Template File

Implement the Sass Files

Test and Deploy the CCT Extension

Extensibility API Reference

General Notices