Developer Docs React4xp Refactored Page Templates

Page templates

So far page rendering has been generated by single editorially defined pages. This is great for simple sites, but as the number of pages grow, it becomes cumbersome to maintain. Page templates allow us to reuse a page definition across multiple content items. This means that we can define a page once, and then use it in multiple places. This is especially useful for sites with a lot of similar pages, such as blogs or news sites.

Task: Movie details part

Add the movie-details part to your application:

For this task we have the files prepared in the code-samples folder, you just need to move them from the code-samples folder:

code-samples/
    parts/
        Movie.tsx
        MovieProcessor.ts
        MoviePage.module.css

To the parts folder:

src/
    main/
        resources/
            react4xp/
                components/
                    parts/
                        Movie.tsx
                        MoviePage.module.css
                        MovieProcessor.ts

Add the movie-details part to your component registry and data fetcher:

/src/main/resources/react4xp/componentRegistry.ts

import {Movie} from './components/parts/Movie';

...

export const componentRegistry = new ComponentRegistry();

...

componentRegistry.addPart('com.enonic.app.hmdb:movie-details', {View: Movie});

/src/main/resources/react4xp/dataFetcher.ts

import {movieProcessor} from "./components/parts/MovieProcessor";

...

export const dataFetcher = new DataFetcher();

...

dataFetcher.addPart('com.enonic.app.hmdb:movie-details', {processor: movieProcessor});

Task: Create template

With the new component registered, let’s put it to use.

In Content Studio, select and edit your favorite movie (or choose "No time to die" if you have no faviorites).
Activate the page editor by pressing Display icon in the top right screen corner, select the "Main page" descriptor and add the "Movie details" part to the page.

We now have a single movie nicely presented, but it would be cumbersome to manually configure each movie like this - page templates to the rescue.
In the page editor, select the page (root) component (for instance by clicking on the header).
Click Save as template from the right hand panel.

This will create a new page template content item, and open it in a new tab for editing.
Give your template a better name, such as "Movie details" and save the changes.
Try visiting other movie items to verify they now automatically render.

Page templates

Contents

Task: Movie details part

Task: Create template

Contents

Contents