Creating Custom Views in NetSuite Extensions

Creating a custom view in NetSuite allows developers to handle user interface events effectively and interact with the relevant data for a seamless application presentation. This guide explains the process of building a view, including declaration of templates and contexts within your extension modules.

What is a View?

A view serves as an interface component that listens to user actions and manipulates the display of data associated with a particular module. It comprises the getContext() method, which determines the variables accessible to templates specific to that view.

Important Note: For developers working on extensions for NetSuite releases from 2020.2 onwards, it is crucial to utilize SCView instead of Backbone.View as per the new extensibility standards.

Steps to Create a View

1. Create a New JavaScript File

Start by creating a new JavaScript file in your extension module's JavaScript directory.

2. Define the View and Template

Begin defining your view by declaring the associated template:

1define('MyCoolView', [
2    'Backbone',
3    'my_cool.tpl'
4], function (
5    Backbone,
6    my_cool_tpl
7) {

3. Extend Backbone.View

Extend Backbone.View to declare your template and set up the context:

1    return Backbone.View.extend({
2        template: my_cool_tpl,
3 
4        getContext: function () {
5            return {
6                name: 'John'
7            };
8        }
9    });
10});

4. Save the View

Don’t forget to save your newly created view.

5. Update the Module's Entry Point

Open the module's entry point JavaScript file that houses your new view.

6. Declare the View as a Dependency

Declare your view as a dependency in the entry point file:

1define('MyCoolModule', [
2    'MyCoolView',
3    ...
4], function (
5    MyCoolView,
6    ...
7) {

7. Save the Entry Point File

Ensure you save your entry point file after modifications.

8. Update the Extension Manifest

Add your new view file to the javascript object within the relevant application entry points in the extension manifest. For guidance, refer to the section on Editing the Extension Manifest.

9. Build Associated Templates

Lastly, follow best practices when constructing any related templates as outlined in HTML Best Practices for Themes.

Key Considerations

• Always adhere to the extensibility guidelines set forth by NetSuite, especially when using views.
• Be mindful that any manual edits to the manifest.json file may be overwritten during deployment unless preserved with specific commands.

Key Takeaways

• Views are essential for managing UI events and data presentation in NetSuite extensions.
• Use SCView for extensions from NetSuite release 2020.2 onward.
• Ensure proper declaration of templates and contexts in your custom views.
• Always test your extension changes to prevent data loss.
• Update the extension manifest appropriately to include new view files.