Create a View to Render a Registered Page Type

When you register a page type with the PageType Component, you must also create a view to render the data when a user navigates to an instance of that page type. When creating this view, follow these best practices:

Any view handling requests for a registered page type must extend PageTypeBase.View.js.
Any view handling requests for a registered page type must be declared in the registerPageType() method registering the associated page type
If you are creating a view to render a registered page type, you can use the beforeShowContent() to control when the page type is rendered. This is part of PageType.Base.View.js. When a route of this page type is changed, an instance of this class is created, waiting until the promise returns before resolving. This lets you get any required data while retrieving the CMS data at the same time.

See PageType for details on this method.

To set up a view to render a page type:

Open the view file or create a new one. This file should be located in the extension’s JavaScript directory.
Declare PageType.Base.View as a dependency and add it to the module definition function.
Declare the view’s template file and add it to the module definition function.

The following example adds My_New_Default_Template.tpl as a dependency:

Declare any third-party libraries as needed.

The following example declares MyPageType.View.js and My_New_Default_Template.tpl as dependencies:

                define('MyPageType.View'
,   [
      'PageType.Base.View'
   ,   'My_New_Default_Template.tpl'
   ]
,   function (
      PageType
   ,   My_New_Default_Template_tpl
   )
{
//...

Set up the view to extend PageType.Base.View.

                define('MyPageType.View'
,   [
      'PageType.Base.View'
   ,   'My_New_Default_Template.tpl'
   ]
,   function (
      PageType
   ,   My_New_Default_Template_tpl
   )
{
   'use strict';

   return PageType.PageTypeBaseView.extend({  
//...

Include the template that your associated page type is using as the default layout.

This template is the same file declared when you register your page type in the extension’s entry point JavaScript file (registerPageType() method). See Register a Page Type for details.

                define('MyPageType.View'
,   [
      'PageType.Base.View'
   ,   'My_New_Default_Template.tpl'
   ,   'jQuery'
   ]
,   function (
      PageType
   ,   My_New_Default_Template_tpl
   ,   jQuery
   )
{
   'use strict';

   return PageType.PageTypeBaseView.extend({  
   
      template: My_New_Default_Template_tpl

   ,   initialize: function (options) {
   //...

Complete the view file as necessary to meet your needs.

To set up a view to render a page type:

Related Topics