Page types allow the developer to provide some consistency to the website and to make additional layers or ways to provide content available.
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.
For the implementation, you require a Scrivito-based app, e.g., the Portal App. To begin, create a folder, “src/Objs/FaqPage/” for the new page type.
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.ts” and include the following code:
Next, we want to provide the component to React so that the app is able to render actual FAQ pages. Create the file “src/Objs/FaqPage/FaqPageComponent.tsx” and include:
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.
Click the page menu and select “Create page”. Pick the FaqPage, and you will see something like 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:
Now, a new FAQ page should look like this:
You may want to add this new page type to the Content Browser configuration file so that it’s displayed when filtering pages. To do this, you would add the FaqPage type to the FILTER_PRESENTATIONS and the PAGES constants in the “src/config/scrivitoContentBrowser.ts” 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!