Custom pages

Task: Disable debug view

For every page you select, the debug view keeps appearing - even in Content Studio. You may disable this, simply by commenting out the CATCH_ALL content type view at the bottom of your mappings file - like this:

+ .src/components/_mappings.ts

...

/*
// Debug
ComponentRegistry.addContentType(CATCH_ALL, {
    view: PropsView
});
*/

Task: Setup page rendering

Content types need to exist in Enonic before an editor can create content. Similarly, page components must be defined before Content Studio can enable editors to create pages.

Add a page descriptor to the Enonic app

src/main/resources/site/pages/main/main.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<page xmlns="urn:enonic:xp:model:1.0">
  <display-name>Main page</display-name>
  <description>Will be rendered by front-end</description>
  <form/>
  <regions>
      <region name="main"/>
  </regions>
</page>

The definition of the region main, enable Content Studio editors to add components to the page, as you will see later.

Redploy the Enonic app to register the page component.

Configure page rendering in Next On the Next side of things, rendering a page is similar to rendering a content type. Add the following file to your Next project.

src/components/pages/Main.tsx

import React from "react"
import { PageProps } from "../../_enonicAdapter/views/BasePage";
import RegionsView from '../../_enonicAdapter/views/Region';

const MainPage = (props: PageProps) => {
    const page = props.page;
    if (!page.regions || !Object.keys(page.regions).length) {
        page.regions = {
            main: {
                name: 'main',
                components: [],
            }
        }
    }
    return (
        <>
            <RegionsView {...props} name="main"/>
        </>
    );
};

export default MainPage;

Notice the <RegionsView> element, referring to the 'main' region

Finally, register it in the component mappings by adding the following lines to _mappings.ts

src/components/_mappings.ts

import MainPage from './pages/Main';

...

ComponentRegistry.addPage(`${APP_NAME}:main`, {
    view: MainPage
});

Both Enonic and Next are now able to handle custom pages.

Task: Create your first page

Its time to build a custom page.

Turn the site into a page

From Content Studio, select and edit the site /hmdb content item. From the edit view, activate the page editor by clicking the monitor icon in the top right corner.

You should now see the following:

From the preview area, select the Main component we created earlier from the dropdown menu.

You should then see a page with a single "dropzone" inside (the region we specified earlier).

Task: Using the text component

Content Studio’s ships with a built-in Text component which is handy when composing pages.

From the Insert tab (on the right hand side), drag a Text component into the region.
Text mode will now be activated, and you can use the rich-text editor to write and format text, but also insert images.
After saving, visit the Next.js rendering directly on http://localhost:3000/movies to see the result.
You may also click the Preview button in Content Studio for a full screen version, rendered via the proxy.

That completes the introduction to page rendering, coming up we’ll add dynamic page components to play with.