Custom pages
Contents
Content types are nice, but letting the editors compose their own pages is even better.
Intro
By defining a page, editors may drag’n drop cms components into the page, visually.
Set up page rendering
Content types are required before an editor can create content. Similarly, pages components must be defined before they can create pages.
-
Add the component files:
import {Regions,} from '@enonic/react-components';
import React from 'react'
export const Page = (props: any) => {
return (
<Regions {...props} />
);
};+ ./src/main/resources/react4xp/components/page/PageProcessor.ts
import {PageComponent} from "@enonic-types/core";
import type {ComponentProcessorFunction} from '@enonic-types/lib-react4xp/DataFetcher';
export const pageProcessor: ComponentProcessorFunction<'com.enonic.app.hmdb:main'> = (props) => {
const component = props.component as PageComponent;
const regions = component?.regions || {};
return {
regions,
name: "main"
};
};+ ./src/main/resources/react4xp/components/page/Page.module.css
.page {
padding-bottom: 0;
margin-bottom: 0;
display: flow-root;
}-
Register the processor and component:
/src/main/resources/react4xp/dataFetcher.tsimport {DataFetcher} from '/lib/enonic/react4xp'; import {commonProcessor} from '/react4xp/components/common/CommonProcessor'; //import {helloProcessor} from './components/hello/HelloProcessor'; import {personProcessor} from './components/content/PersonProcessor'; import {pageProcessor} from './components/page/PageProcessor'; export const dataFetcher = new DataFetcher(); //dataFetcher.addContentType('portal:site', {processor: helloProcessor}); dataFetcher.addCommon({processor: commonProcessor}); dataFetcher.addContentType('com.enonic.app.hmdb:person', {processor: personProcessor}); dataFetcher.addPage('com.enonic.app.hmdb:main', {processor: pageProcessor});/src/main/resources/componentRegistry.tsx//import {Hello} from './components/hello/Hello'; import {Factbox} from '/react4xp/components/macro/FactBox'; import {Page} from '/react4xp/components/page/Page'; import {ComponentRegistry} from '@enonic/react-components'; import {Person} from './components/content/Person'; export const componentRegistry = new ComponentRegistry(); //componentRegistry.addContentType('portal:site', {View: Hello}); componentRegistry.addContentType('com.enonic.app.hmdb:person', {View: Person}); componentRegistry.addMacro('factbox', {View: Factbox}); componentRegistry.addPage('com.enonic.app.hmdb:main', {View: Page});We also leave "Hello React4xp" behind, by commenting it out
Working with pages
As it turns out, HMDB already contains data for pages, and by reloading your front-page, you should immediately see this:
The text component
The reason why you can see the righ text content on the page, is that Content Studio ships with a Rich text component that can be placed on pages. React4XP also implements a default rendering of this.
Try editing the page, to see how this works.
