Neos quicktip: create new references in dynamic locations

Von Matthias Klatte, veröffentlicht am 26.11.2020

Referencing other content or pages is a common thing when working with the Neos CMS.

A lesser known thing is that the reference-editor, where you select these other nodes, is able to create new nodes as well, if there was no match for your search term.
This is quite useful i.e. when adding tags to a blog article.

Unfortunately by default you can only specify a static path where these new nodes would need to be created.

That might not always satisfy our needs as we might want to allow the users to create collections of tags in a way where we don't know any absolute node path.

Think of a structure like that:

├ Settings
├ Directory (2020)
│ ├ Article 1
│ └ ...
└ ...

In this scenario we use a special node-type for different kinds of settings used throughout the blog. (We could maybe have these settings on the main "entry-point", however we want to remove clutter.)
In this example we would keep our tags as nodes on this settings page.

Let's recap the editor reference on the reference editor:

  type: references
    label: 'Tags'
      group: document
        nodeTypes: ['My.Website:Tag']
          path: /sites/yoursite/tags
          type: 'My.Website:Tag'

We want to avoid setting this absolute path in the createNew option.

Here the React UI comes to the rescue: it supports client-side evaluation of multiple configurations used in the inspector.

However first we need to provide the absolute path that the editor needs. We add a bit of fusion code when rendering the document that will use this editor:

prototype(V.P:BlogArticle) {
  body {
    # render to the content
    blogMetadata = Neos.Fusion:Tag {
      attributes {
        id = 'neos-blog-metadata'
        data-tag-path = ${q(node).closest('V.P:Blog').find('V.P:BlogSettings').find('tagContentCollection').property('_path')}
      @if.inBackend = ${node.context.inBackend}

Now we can use this value in our property definition by simply querying the guest-frame for this markup:

  type: references
        # ...
          path: "ClientEval: document.querySelector('[name=neos-content-main]')?.contentDocument.querySelector('#neos-blog-metadata')?.dataset.tagPath"

(This javascript snippet uses optional chaining for brevity, which might not yet be available in every setup at the point of writing. It uses the IDs and attribute names used in the corresponding fusion code example above.)

mindscreen ist spezialisiert auf digitale Barrierefreiheit

Sie wollen wissen, wie barrierefrei Ihre Website oder Web-Applikation ist? Benötigen Hilfe bei den Vorgaben der BITV? Oder Sie benötigen eine Digitalagentur mit langjähriger Erfahrung in der Umsetzung und Begleitung barrierefreier Webprojekte?

Wir bieten Fullservice zum Thema digitale Barrierefreiheit an:
Beratung, Schulungen, Workshops, Audits, Tests, Unterstützung & Umsetzung.

Erfahren Sie mehr über unsere Dienstleistungen zu digitaler Barrierefreiheit.

Schreiben Sie eine Mail oder rufen Sie an!


Annett Farnetani
Telefon: 089-41 61 47 823