Extend 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. Or you can 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 page folder schema for your project and add in the fields that you'd like.

To access it, open your Frontastic studio, click Developer, then Schemas.

Then, select Page folder schema, and click Edit schema in the right-hand drawer.

This opens the schema editor. You'll see the existing fields (if there are any).

Let's say we want to add a new field for SEO Keywords, we'd copy the below and add it into our 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.

Then we'll Validate our schema and then Publish it.

Then you can go to a page folder within the site builder and input the data you want within your new field in the settings.

Injecting the new page folder schema into the frontend

The frontend also needs to have information about your existing page folder schema. You'll need to register it with your frontend application. You can do so by injecting the new schema into the app using our ComponentInjector:

// import the json from your repository and the place you put it
import NodeConfigurationSchema from './defaultSchemas/nodeConfiguration'

// […]

// registering the schema with the app
ComponentInjector.set('NodeConfigurationSchema', NodeConfigurationSchema)

// […]

Access page folder information in a Frontastic component

In order to access the information of the current page folder in a Frontastic component, you'll need to get the page folder injected using the tastify higher-order-component (see the Tastify article for more information):

export default tastify({
    connect: {
        node: true,
    }
})(NodeDataExampleTastic)

This will give a new prop of node to your Frontastic component which contains the full representation of the page folder. If you don't have fields that require default completion in your page folder schema, you can now access the values provided from Frontastic studio through the field name in node.configuration. For example, the SEO keywords can be accessed using:

const NodeDataExampleTastic = ({ node }) => {
    return (<div>{node.configuration.seoKeywords || 'no keywords specified'}</div>)
}

Remember that field data can always be empty and you should implement your code around this in a defensive way.

Completing default values

If you have fields with default values configured in the page folder schema, you can use the ConfigurationSchema class to access the completed field information:

import { ConfigurationSchema, DefaultSchemas } from '@frontastic/common'

import customPageFolderSchema from '…/nodeConfiguration.json'

const NodeDataExampleTastic = ({ node }) => {
    const schema = new ConfigurationSchema(
        customPageFolderSchema.schema,
        node.configuration
    )

    return (<div>{schema.get('seoKeywords')}</div>)
}

Note that you can also use DefaultSchemas.nodeSchema for the default page folder schema.