Headless Documents

A Headless document type represents a typical web-page, which can be rendered only in Admin UI. The content structure is defined by the template configuration, which defines the layout and editables to be rendered on the document.

This Headless Document is purely based on template configuration to render editables for content structure. These template configuration are Symfony config, which can be a yaml file (e.g. var/config/headless_templates/example.yaml) or settings store database entry.

An example of template configuration is:

pimcore_headless_documents:
    templates:
        example:
            content:
                headline:
                    type: input
                    config:
                        placeholder: 'Headline'
                        required: true
            
                selectTest:
                    type: select
                    config:
                        store:
                            - ["one-month", "One month"]
                            - ["three-months", "three-months"]
                            - ["unlimited", "unlimited"]
            
                mainContent:
                    type: wysiwyg
                    config:
                        height: 200
            
                images:
                    type: block
                    items:
                        image:
                            type: image

Template Configuration Interface:

Once the template configuration is ready, the next step is to add a headless document and select the template in document settings.

Save And Reload:

Datahub Query

Headless Documents data can be queried just as standard documents with Pimcore Data Hub Bundle.

{
  getDocument(id: 223) {
    ... on document_headlessdocument {
      fullpath
      editables {
        ... on document_editableInput {
          _editableName
          text
        }

        ... on document_editableWysiwyg {
          _editableName
          text
        }

        ... on document_editableAreablock {
          _editableName
          data {
            ... on document_editableAreablock_data {
              key
              type
              hidden
            }
          }
        }

        ... on document_editableImage {
          _editableName
          image {
            id
            fullpath
          }
        }

        ... on document_editableLink {
          _editableName
          linkdata: data {
            text
          }
        }
      }
    }
  }
}

Please see more details for supported data types here.