This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

Page folder schema

The page folder schema lets you add additional page folder settings.

When creating or updating a page folder, you can only configure the General settings, Data source, Display properties, and SEO options. To allow further configuration of page folders, you must extend the page folder schema and add the necessary fields.

Extend the page folder schema

To extend the page folder schema, follow these steps:

  1. From the Studio home page or from the left menu, go to Developer > Schemas.

  2. Click Page folder schema: the Page folder schema pane opens.

  3. Click Edit schema: the schema editor opens.

  4. Add the necessary schema fields. For more information about schema fields, see Schemas.

    Editing the Display properties and SEO schema fields will affect existing page folders and might cause issues with your website. Consult with your development team before editing the existing fields and always ensure backward compatibility with schema.

  5. Click Validate and Publish.

Now you'll see the new configuration fields when creating or updating a page folder.

Read page folder configuration in data sources

You can read the page folder configuration in a data source extension handler from the pageFolder.configuration property on the context parameter.

Read data source extension reading page folder configurationTypeScript
const seoDataSource = async (
config: DataSourceConfiguration,
context: DataSourceContext
) => {
return {
dataSourcePayload: {
title: context.pageFolder.configuration.seoTitle,
seoDescription: context.pageFolder.configuration.seoDescription,
seoKeywords: context.pageFolder.configuration.seoKeywords,
},
};
};

Read page folder configuration in Frontend components

You can read the page folder configuration in a Frontend component from the configuration property on the pageFolder parameter.

Read page folder configuration in a Frontend componentTypeScript React
function SEOComponent({ data, pageFolder }) {
return (
<div>
<h1>{pageFolder.configuration.seoTitle}</h1>
<p>{pageFolder.configuration.seoDescription}</p>
<p>{pageFolder.configuration.seoKeywords}</p>
</div>
);
}