ChildNode of a DocumentNode is not editable. Why?

Using Neos & Flow
1

Hi,

there are many examples on how to add a ContentCollections to a Page, as a childNode.

In my case, I have to add a Teaser custom contentElement as a childNode to a “TestimonialPage”.
The teaser is quite complex: (see below). I developed it first. It can be chosen and put into a ContentCollection of normal Pages.
It works fine, as expected: Properties can be edited inline an in the inspector (depends on the prop).

The behaviour of the TestimonialPage is quite stange:

  1. The autopublish feature only publishes the Page, but not the Teaser. I have to publish it automatically.
  2. The Teaser is not editable any more (inline and inspector).
    if I select it in the structure tree nothing happens.

I wanted to provide you with more details here, so I repeated the process.
Something went wrong: Now I’ve got: Missing Homepage (I make a new topic).

Last time it worked more or less I saw the class “neos-not-inline-editable” or so in my Teasers HTML-output.

So:
What has to be done to make the teaser childNode editable?

I hope you can tell me the trick.
Klaus

2

I’ve forgotten the spippets:

Testimonial Page mit Teaser als childNode

'Eg.Website:TestimonialPage':
  ui:
    label: 'Testimonial-Page'
    icon: 'icon-comment-o'
    help:
     message: 'Testimonial Darstellung.'
  superTypes:
    'TYPO3.Neos.NodeTypes:Page': TRUE
  childNodes:
    'teaser':
      position: 'start'
      type: 'Eg.Website:Teaser'
  constraints:
    nodeTypes:
      'Eg.Website:TestimonialPage': FALSE

'Eg.Website:Teaser':
  ui:
    label: 'Teaser'
    icon: 'icon-eye'
    help:
     message: 'Teaser. Wird automatisch verwendet. Nicht manuell einsetzen.'
    inspector:
      groups:
        teaser:
          label: 'Teaser'
          icon: 'icon-eye'
          position: 200
  superTypes:
    'TYPO3.Neos:Content': TRUE
  properties:
    'teaserMode':
      type: string
      ui:
        label: 'Teaser-Modus'
        reloadIfChanged: TRUE
        inspector:
          group: 'teaser'
          position: 10
          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              big:
                label: '4 Zeilen'
              small:
                label: '3 Zeilen'
    'teaserLine1':
      type: string
      defaultValue: '<h6>H6: Groß: Markieren + B</h6>'
      ui:
        inlineEditable: TRUE
        aloha:
          'format': ['strong']
          'table': []
          'link': []
          'list': []
          'alignment': []
    teaserLine2:
      type: string
      defaultValue: '<h3>H3: Neue Zeile: SHIFT + ENTER</h3>'
      ui:
        inlineEditable: TRUE
        aloha:
          'format': []
          'table': []
          'link': []
          'list': []
          'alignment': []
    teaserLine3:
      type: string
      defaultValue: '<h5>H5: Neue Zeile: SHIFT + ENTER</h5>'
      ui:
        inlineEditable: TRUE
        aloha:
          'format': []
          'table': []
          'link': []
          'list': []
          'alignment': []
    teaserLine4:
      type: string
      defaultValue: '<p>P: Neue Zeile: SHIFT + ENTER</p>'
      ui:
        inlineEditable: TRUE
        aloha:
          'format': []
          'table': []
          'link': []
          'list': []
          'alignment': []
    'image':
      type: 'TYPO3\Media\Domain\Model\ImageInterface'
      ui:
        label: 'TYPO3.NeosDemoTypo3Org:NodeTypes.Page:properties.image'
        reloadIfChanged: TRUE
        inspector:
          group: 'teaser'
          position: 50
          editorOptions:
            crop: TRUE
    'smallImage':
      type: 'TYPO3\Media\Domain\Model\ImageInterface'
      ui:
        label: 'Small Background Image'
        reloadIfChanged: TRUE
        inspector:
          group: 'teaser'
          position: 150
          editorOptions:
            features:
              crop: TRUE
              resize: TRUE
    'horizontalPosition':
      type: integer
      ui:
        label: 'Position horizontal'
        reloadIfChanged: TRUE
        inspector:
          group: 'teaser'
          position: 200
    'verticalPosition':
      type: integer
      ui:
        label: 'Position vertical'
        reloadIfChanged: TRUE
        inspector:
          group: 'teaser'
          position: 210

root.testimonialPage {
	@position = 'end 8000'
	condition = ${q(node).is('[instanceof Eg.Website:TestimonialPage]')}
	renderPath = '/testimonialPage'
}

testimonialPage < page
testimonialPage.body {
	templatePath = 'resource://Eg.Website/Private/Templates/Page/TestimonialPage.html'
	#teaser = Eg.Website:Teaser {
	#	nodePath = 'teaser'
	#}
}
3

Ich hatte dasselbe Problem.

Den einzigen Weg, wie ich eine ContentCollection angezeigt kriegte, war indem ich die Collection im Template selber als ganzes ausgegeben habe, so:

    {content.items -> f:format.raw()}

In Fusion hatte ich diese Elemente so bereit gestellt.

	content {
		items = ContentCollection {
			nodePath = 'items'
		}
        }

Diese Lösung war alles andere als ideal für meine Zwecke. Zum einen haben meine “items” keine inlineEditable Elemente. Zum anderen, habe ich über diese Ausgabeform, so weit ich herausfinden konnte, keinen Zugriff auf die Element-Id / Zähler. Im Template, muss ich aber die Elemente durchzählen können, weil das verwendete Script, das so verlangt hat.

Bis jetzt habe ich noch für diesen Teil einen üblen Workaround am laufen. Wenn da jemand noch weitere Ideen hat, bin ich interessiert.

4

Hi @energyWinner and @jobe451,

if you want to access the properties of a childnode you need to query the correct childnode inside fusion. The easiest way to achieve this is to use Neos.Fusion:Collection like so:

teaserOrOtherChildren = Neos.Fusion:Collection {
	// For the collection you could also use sth. like ${q(node).find('[instanceof My.Vendor:NodeType]')}
	collection = ${q(node).children('teaser')}
	// Do not use another itemName here as otherwise the ContentElementWrapping won´t work
	itemName = 'node'
	itemRenderer = Neos.Neos:ContentCase
	// If you want you can add an iterationName to access the iteration variables (index, cycle, isFirst, isLast, ...)
	iterationName = 'iterator'
}

And then simply put

{teaserOrOtherChildren -> f:format.raw()}

inside your template.

If your NodeType doesn’t extend from Neos.Neos:Content then don’t forget to add the ContentElementWrapping.