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 within Frontastic to have an extra field or section that can be edited in the Frontastic studio.

To do this, you'll need to open the nodeConfiguration.json for your project and add in the field that you'd like.

To do this, follow the steps below.

  1. Open the Developer area, then click Schemas
35843584
  1. Click the download icon on the project schema line, then open the file
35843584

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

Let's look at a cut-down example of the schema. Say we want to add a new field for SEO Keywords, we'd put it in like the below:

{
    "schema": [
        {
            "name": "Display Properties",
            "fields": [...
            ]
        },
        {
            "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
                }
            ]
        }
    ]
}

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

  1. Click the upload icon on the project and select your updated schema
35843584

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

35843584

Access 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,
    },
  };
};

Access page folder configuration in a Frontastic component

Inside a Frontastic 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>
  );
}

Did this page help you?