Parent-Child Hyvä CMS Components

This page covers how Hyvä CMS components relate to each other: nesting child components and restricting components to specific parents; - To create a component from scratch, see Creating Components. - To disable a component, see Disabling Components.

Creating Parent-Child Component Relationships

Hyvä CMS components can contain other components as children, enabling nested content structures like rows containing columns, or lists containing list items. Configure child component relationships in the component declaration using the children property.

Example: Simple container accepting any child components:

{
  "row": {
    "label": "Row",
    "children": true
  }
}

The "children": true configuration allows any Hyvä CMS component to be nested inside the Row component.

Example: Restricted container with child component constraints:

{
  "usp_list": {
    "label": "USP List",
    "children": {
      "config": {
        "accepts": ["usp"],
        "max_children": 4
      }
    },
    "content": {
      "title": {
        "type": "text",
        "label": "USP List Title",
        "default_value": "USP List Title"
      }
    }
  }
}

The accepts array restricts which components can be added as children. The example above only allows usp components to be nested inside usp_list. The max_children property limits the number of child components to 4.

Controlling Allowed Child Components

Use the accepts property to specify which components can be nested as children. When omitted, all Hyvä CMS components are allowed. Restricting allowed children helps maintain consistent content structures and prevents editors from creating invalid component combinations.

Restricting Components to Specific Parents

Use the require_parent property to create child components that only appear when a parent component explicitly allows them. This prevents editors from placing child components in invalid locations.

Example child component requiring a parent:

{
  "child_component": {
    "label": "Child Component",
    "require_parent": true,
    "content": {
      "title": {
        "type": "text",
        "label": "Child Title"
      }
    }
  }
}

The child component above will only appear in the Hyvä CMS editor when adding components inside a parent that accepts it.

Example parent component accepting the child:

{
  "parent_component": {
    "label": "Parent Component",
    "children": {
      "config": {
        "accepts": ["child_component"]
      }
    },
    "content": {
      "title": {
        "type": "text",
        "label": "Parent Title"
      }
    }
  }
}

This pattern ensures child components only appear in appropriate contexts, preventing invalid component hierarchies.

Child-only components without their own template

For a component that is only ever rendered inside a parent, set the template property to false (and require_parent to true). The component then has no standalone template, and the parent template renders it from wherever it is called.