Creating a Custom Page Type 

While the Scrivito Example App has multiple page types already defined, the power of Scrivito is it's ingrained flexibility. Eventually, there will be a time when you want to provide a unique page type for your editors to work with. Page types allow the developer to provide some consistency to the website and to make additional layers or ways to provide content available.

The Example App comes with the following page types already built in: Author, Blog, BlogPost, Event, Homepage, Job, LandingPage and a basic Page. In this tutorial, we are going to create an FAQ page to showcase how to create your own custom page type. While an FAQ page could easily use an existing page type, this tutorial will develop a very plain page type to keep it simple. But do note that the fewer page types you have the better, as it makes your editors’ job a bit easier. 

To begin, create an empty folder, “src/Objs/FaqPage/”.

Create the object class (the model)

We are going to create an object class with the attributes we want to make available. In our case we want the editors to be able to just add widgets to input questions and answers. Create a file, "src/Objs/FaqPage/FaqPageObjClass.js" and include the following code: 

src/Objs/FaqPage/FaqPageClass.js
Copy
import * as Scrivito from 'scrivito';

Scrivito.provideObjClass('FaqPage', {
  attributes: {
    questions: 'widgetlist',
  },
});

Provide the component (the view)

Next, we want to provide the component to React so that the app is able to render actual FAQ pages. Create a file "src/Objs/FaqPage/FaqPageComponent.js" and include:

src/Objs/FaqPage/FaqPageComponent.js
Copy
import * as React from 'react';
import * as Scrivito from 'scrivito';

Scrivito.provideComponent('FaqPage', ({ page }) => 
  <div className='container'>
    <h1 className='text-center'>FAQ</h1>
    <Scrivito.ContentTag content={ page } attribute='questions' />
  </div>
);

You can add whatever you want to have rendered here, including markup, styling etc., but keep in mind that it must be wrapped in a single tag. For the parts we want the editors to be able to update, we provide a Scrivito.ContentTag. For this basic setup we just have a widgetlist, so an editor can add the widgets they choose for the questions and answers. Check out our FAQ widget tutorial for another option.

Check it out, add content!

Click the page menu and select "Create page". Pick the “FaqPage”, and you will see this:

As you can see, the questions widget list lets you add questions and answers using all the available widgets. Since we don’t have an FAQ widget yet, let’s at least try to have some initial content added automatically when a fresh FAQ page is created. For this, we’ll provide an editing configuration that adds a DividerWidget, a HeadlineWidget, a TextWidget, and another DividerWidget to the questions widget list:

src/Objs/FaqPage/FaqPageEditingConfig.js
Copy
import * as Scrivito from 'scrivito';
import DividerWidget from '../../Widgets/DividerWidget/DividerWidgetClass';
import HeadlineWidget from '../../Widgets/HeadlineWidget/HeadlineWidgetClass';
import TextWidget from '../../Widgets/TextWidget/TextWidgetClass';

Scrivito.provideEditingConfig("FaqPage", {
  initialContent: {
    questions: [
      new DividerWidget({ showLogo: 'no' }),
      new HeadlineWidget({ headline: "The question is?" }),
      new TextWidget({ text: "This is the eloquent answer to the question above." }),
      new DividerWidget({ showLogo: 'no' }),
    ],
  }
});

Now, a new FAQ page should look like this:

Lastly, you may want to add this new page type to the Content Browser config file so it is displayed when filtering pages. To do this you would add "FaqPage", to the Pages: { value: [ array and FaqPage: { title: "FAQ pages", icon: "question", }, to the options: property, in the "src/config/scrivito/ContentBrowser.js" file.

Finally, you might want to add some styling to the page. This can be achieved using inline styles or CSS classes, or both in the widget component above.

You’re done, you’ve created a custom page type – congratulations!