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
- Open the Developer area, then click Schemas
- Click Page folder schema and the right-hand drawer will open
- Click the Edit schema button, this will open the schema editor
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.
- Add what you'd like to be editable in your schema
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}]}]}
Be sure to keep in all the previous fields to ensure Backwards Compatibility.
- 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
- If there are no errors, you can click the Publish button to save your changes
Once uploaded, go to a page folder within the site builder, and input the data you want within your new field.
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,},};};
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>);}