Create Custom View Files with SCView in SuiteCommerce

Creating view files is essential for developing custom extensions in SuiteCommerce. This guide focuses on utilizing the SCView module to enhance your extension's functionality.

Overview of SCView

When developing for SuiteCommerce, it's critical to leverage the correct modules to ensure compatibility and functionality. The transition to SCView from Backbone.View is recommended starting from SuiteCommerce Advanced 2020.2.0, providing enhanced methods for development.

Creating the View File

To create a new view file, navigate to the directory Workspace/CDRExample/Modules/CDRExample/JavaScript and create a new file named CDRExample.View.js. Here’s a sample JavaScript template to get started:

1"text-purple-400">define('CDRExample.View', [
2    'SCView',
3    'cdr_example.tpl'
4], "text-purple-400">function (
5    SCViewModule,
6    cdr_example_tpl
7) {
8    'use strict';
9 
10    "text-purple-400">var SCView = SCViewModule.SCView;
11 
12    "text-purple-400">function CDRExampleView (options) {
13        SCView.call("text-purple-400">this, options);
14 
15        "text-purple-400">this.template = cdr_example_tpl;
16        "text-purple-400">this.contextDataRequest = ['item'];
17        "text-purple-400">this.displayType = options.PLP.getDisplay().id;
18    }
19 
20    CDRExampleView.prototype = Object.create(SCView.prototype);
21    CDRExampleView.prototype.constructor = CDRExampleView;
22 
23    CDRExampleView.prototype.render = "text-purple-400">function () {
24        "text-purple-400">if ("text-purple-400">this.displayType == 'list') {
25            SCView.prototype.render.call("text-purple-400">this);
26        }
27    }
28 
29    CDRExampleView.prototype.getContext = "text-purple-400">function () {
30        "text-purple-400">return {
31            storedetaileddescription: "text-purple-400">this.contextData.item().storedetaileddescription
32        }
33    }
34 
35    "text-purple-400">return CDRExampleView;
36})

Key Components Explained

• contextDataRequest: This line requests item data that will be available in your context.
• displayType: This property makes use of the PLP component's getDisplay() method, enabling you to determine what type of display is currently active.
• Overriding Render: The render method is carefully overridden to ensure functionality only for specific display types (e.g., list). It’s crucial to adhere to API documentation to avoid overriding restricted properties accidentally.
• Getting Context: The getContext method provides the context for the template by accessing item data through the contextData object. This allows the template to dynamically reflect item-specific details.

Important Notes

Be aware that the render method on SCView is protected, and it's essential to verify before overriding. Only override properties if permitted by the API documentation to maintain compatibility with future updates.

By following this guide, you ensure that your SuiteCommerce extension is built efficiently using the latest recommended practices, improving maintainability and functionality.

Key Takeaways

• Utilize SCView in SuiteCommerce extensions for modern development practices.
• Ensure proper context data requests to ensure template accuracy.
• Carefully manage property overrides to maintain compatibility with the API.

Source: This article is based on Oracle's official NetSuite documentation.