Documentation

Extending the page folder schema

If you need to be able to set configurations for URLs, not just page folders, you can integrate an additional API to do that. But, you can also extend your page folder schema to have an extra field or section that can be edited in the studio.

To do this, you'll need to open the Page folder schema for your project and add in the field that you'd like. Follow the steps below to proceed.

Adding fields to the page folder schema

  1. Open the Developer area, then click Schemas

03825e2 Click schemas in the developer area

  1. Click Page folder schema and the right-hand drawer will open

fa6cacc Schema landing page

  1. Click the Edit schema button, this will open the schema editor

bf20461 Click edit schema to edit schema

You'll notice that the page folder configuration doesn't include the general settings or data source section in this configuration file, this is because these should never be edited or removed.

  1. Add what you'd like to be editable in your schema

60a2d1d Page folder schema example

In the above example, we've added an SEO section. You can copy this from below:

{
  "schema": [
    {
      "name": "SEO",
      "fields": [
        {
          "label": "Title",
          "field": "seoTitle",
          "type": "string",
          "translatable": true
        },
        {
          "label": "Description",
          "field": "seoDescription",
          "type": "string",
          "translatable": true
        },
        {
          "label": "Keywords",
          "field": "seoKeywords",
          "type": "string",
          "translatable": true
        }
      ]
    }
  ]
}
Clipboard icon

Be sure to keep in all the previous fields to ensure Backwards Compatibility.

  1. Once you're happy with your changes, click Validate which will check if your JSON is valid and will show any errors you might have

783ba4b Click the validate button

  1. If there are no errors, you can click the Publish button to save your changes

fc977aa Click the publish button

Once uploaded, go to a page folder within the site builder, and input the data you want within your new field.

4dd2797 See the new updated fields in the site builder

Accessing page folder configuration in a data source

Inside an extension, you can access the page folder configuration in a data source. The page folder is passed to the data source in the DataSourceContext:

const seoDataSource = async (
  config: DataSourceConfiguration,
  context: DataSourceContext
) => {
  return {
    dataSourcePayload: {
      title: context.pageFolder.configuration.seoTitle,
      seoDescription: context.pageFolder.configuration.seoDescription,
      seoKeywords: context.pageFolder.configuration.seoKeywords,
    },
  };
};
Clipboard icon

Accessing page folder configuration in a Frontend component

Inside a Frontend component, the pageFolder is passed as a prop. The page folder configuration can be accessed from there:

function SeoTastic({ data, pageFolder }) {
  return (
    <div>
      <h1>{pageFolder.configuration.seoTitle}</h1>
      <p>{pageFolder.configuration.seoDescription}</p>
      <p>{pageFolder.configuration.seoKeywords}</p>
    </div>
  );
}
Clipboard icon