Skip to main content

Page hierarchy example

This is an example hierarchy used on the using hierarchies page. This example makes use of two content types to implement an ideas and advice section on a website, but it could be used to model any structure of categories and pages.

The page-hierarchy content type represents a category such as "Lighting and electrical" or "Heating and plumbing". It contains a title, description, image and a ranking. The page-hierarchy-node content type is the help page itself, including content such as text and images.

Pre-requisites
Link copied!

See the using the content type schema examples page for details of how to choose and register these schemas from the schema examples in Dynamic Content.

How to use
Link copied!

You need to register both the page-hierarchy and page-hierarchy-node schemas. The page-hierarchy-node schema also makes use of the example-author, example-image and example-text schemas included with the blog post example, so you will need to ensure that these schemas are registered as well.

Page hierarchy
Link copied!

The page hierarchy represents categories and in the childContentTypes array in the hierarchy trait includes page-hierarchy and page-hierarchy-node, so both these content types can be added as children of a page-hierarchy item.

In the sort trait we've specified that nodes should be sorted by a user defined ranking. If the ranking is equal, the title will be used as a sort tie breaker.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "https://schema-examples.com/page-hierarchy",
  "$comment": "Docs: https://amplience.com/docs/development/schema-examples/hierarchies/page-hierarchy.html",

  "title": "Page Category",
  "description": "Category that can contain pages or subcategories",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    },
    {
      "$ref": "http://bigcontent.io/cms/schema/v2/hierarchy#/definitions/hierarchy-node"
    }
  ],
  "trait:hierarchy": {
    "childContentTypes": [
      "https://schema-examples.com/page-hierarchy",
      "https://schema-examples.com/page-hierarchy-node"
    ]
  },
  "type": "object",
  "properties": {
    "_meta": {
      "type": "object",
      "properties": {
        "deliveryKey": {
          "type": "string",
          "title": "Delivery key",
          "description": "The delivery key is used as the URL slug"
        }
      }
    },
    "title": {
      "title": "Title",
      "description": "HTML title tag",
      "type": "string",
      "minLength": 0,
      "maxLength": 100
    },
    "description": {
      "title": "Description",
      "description": "used for SEO description",
      "type": "string"
    },
    "ranking": {
      "title": "Ranking",
      "description": "used for sorting",
      "type": "number",
      "minimum": 0,
      "maximum": 100
    },
    "image": {
      "title": "Image",
      "allOf": [
        {
          "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
        }
      ]
    }
  },
  "propertyOrder": [],
  "required": ["title"],
  "trait:sortable": {
    "sortBy": [
      {
        "key": "default",
        "paths": ["/ranking", "/title"]
      }
    ]
  }
}

Page hierarchy node
Link copied!

Note that for the page-hierarchy-node schema the childContentTypes array is empty because we don't want to add any children to page hierarchy nodes.

{
  "$schema": "http://bigcontent.io/cms/schema/v2/schema#",
  "$id": "https://schema-examples.com/page-hierarchy-node",
  "$comment": "Docs: https://amplience.com/docs/development/schema-examples/hierarchies/page-hierarchy.html#hierarchy-node",
  "title": "Page",
  "description": "Page as a hierarchy node",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    },
    {
      "$ref": "http://bigcontent.io/cms/schema/v2/hierarchy#/definitions/hierarchy-node"
    }
  ],
  "trait:hierarchy": {
    "childContentTypes": []
  },
  "type": "object",
  "properties": {
    "title": {
      "title": "Title",
      "description": "Used for heading and SEO title tag",
      "type": "string",
      "minLength": 1,
      "maxLength": 150
    },
    "description": {
      "title": "Description",
      "description": "Used for page summary and SEO description",
      "type": "string",
      "minLength": 1,
      "maxLength": 200
    },
    "ranking": {
      "title": "Ranking",
      "description": "used for sorting pages",
      "type": "number",
      "minimum": 0,
      "maximum": 100
    },
    "image": {
      "title": "Image",
      "description": "Used for the page banner",
      "allOf": [
        {
          "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
        },
        {
          "properties": {
            "contentType": {
              "enum": ["https://schema-examples.com/example-image"]
            }
          }
        }
      ]
    },
    "_meta": {
      "type": "object",
      "properties": {
        "deliveryKey": {
          "type": "string",
          "title": "Delivery key",
          "description": "The delivery key is used as the URL slug"
        }
      }
    },
    "authors": {
      "title": "Page author",
      "description": "Author(s) - max 3",
      "type": "array",
      "minItems": 1,
      "maxItems": 3,
      "items": {
        "allOf": [
          {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
          },
          {
            "properties": {
              "contentType": {
                "enum": ["https://schema-examples.com/example-author"]
              }
            }
          }
        ]
      }
    },
    "content": {
      "title": "Content",
      "description": "",
      "type": "array",
      "minItems": 1,
      "maxItems": 20,
      "items": {
        "allOf": [
          {
            "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
          },
          {
            "properties": {
              "contentType": {
                "title": "Content",
                "enum": [
                  "https://schema-examples.com/example-image",
                  "https://schema-examples.com/example-text"
                ]
              }
            }
          }
        ]
      }
    }
  }
}

Content form preview
Link copied!

An example of creating a content item using a content type registered from the page hierarchy example schema is shown in the image below.

The page-hierarchy content type (1 in the image) represents a category such as "Lighting and electrical" or "Heating and plumbing". It contains a title, description, image and a ranking. The page-hierarchy-node content type (2) is the help page itself, including content such as text and images.

The page hierarchy example

Using hierarchies

Blog example