Implement the View File
This view defines what the CCT loads when it is dragged into the application.
To implement a view file:
-
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 )
-
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.
-
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(); }
-
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.
-
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 toitem
data. These objects contain all the context data available by default, depending on where you dropped the CCT., contextDataRequest: ['item']
-
Define
validateContextDataRequest
.You must override
validateContextDataRequest
to returntrue
in case the data does not exist in the area where you drop the CCT in the SMT admin., validateContextDataRequest: function validateContextDataRequest() { return true; }
-
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 asettings
object. The settings object contains each Field ID for the custom record. You access the values for the fields in thegetContext()
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 }; } }); });
-
Save the view file.
-
To continue creating an extension for a CCT, go to Implement the Template File
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.