Make a View Available Anywhere in Your Templates

The registerView() method allows you to register a view to a component, making the view available anywhere that component is available. This functionality makes it easier to use simple views in any template in your theme. You should not use the registerView() method for every view, but instead use it:

  • For views that are self contained and do not rely on context or model data.
  • With designers in mind so that after you create a view, a designer is free to use it in any template they need.

The registerView() method is used in SuiteCommerce and SuiteCommerce Advanced (SCA) to allow the site search elements, the search button, and the keyword input box, to be used in more than one template. This is implemented in the source code for SCA, for example, by using registerView() to register the views for the site search elements with the layout component. Because the layout component is available globally, you can include the site search elements in your templates by adding data-view="SiteSearch" and data-view="SiteSearch.Button" where you want those elements to appear. This is one example of the flexibility that the registerView() method provides. If you want to learn more about the search elements

How to Use registerView()

You can add simple views using an entry point file in an extension. For example, if you want a “Hello World!” message to be available anywhere, include the following code in your entry point file:

        define('HelloWorld'

, [
‘HelloWorld.View.js’
]
, function
(
HelloWorldView
)
{
‘use strict’;

return {
mountToApp: function mountToApp (container)
{
var Layout = container.getComponent(‘Layout’);

  if (Layout)
  {
    Layout.registerView('HelloWorld', function HelloWorld ()
    {
      return new HelloWorldView
    });
  }
}

}
})

Create a view that includes the following code:

        define('HelloWorld.View'

, [
‘helloworld.tpl’
]
, function
(
helloworld_tpl
)
{
‘use strict’

return Backbone.View.extend({
template: helloworld_tpl
})
});

Create a template that contains the following HTML

        <p>Hello World!<p> 

Now you can edit any template to include the message:

        <div data-view="HelloWorld"></div> 

Reference : https://docs.oracle.com/en/cloud/saas/netsuite/ns-online-help/section_0602032721.html

Leave a comment

Your email address will not be published. Required fields are marked *