ContentCollection not selectable

Using Neos & Flow
#1

Hi guys

I want to build an Bootstrap Accordion in NEOS.

I have the following elements:

  • Accordion: this is a collection of panels
  • Panel: this is an accordion element

My problem is that I cant select the collection of the accordion to ad more panel and I even cant edit the panels inside the collection. Why?! I havent overwrite @process.contentElementWrapping

DeepinBildschirmfoto20161206151314.png1041×401 36.8 KB

Fusion of accordion:

prototype(XY.xy:PanelCollection) < prototype(TYPO3.Neos:ContentCollection) 

prototype(XY.xy:Accordion) < prototype(TYPO3.Neos:Content) {
  templatePath = 'resource://XY.xy/Private/Templates/TypoScriptObjects/Accordion.html'
  
  panelCollection = XY.xy:PanelCollection {
      nodePath = 'panelCollection'
      attributes.class = 'panel-group'
      attributes.id = ${q(node).parent().property('_identifier')}
      attributes.role = 'tablist'
      attributes.aria-multiselectable = ${'true'}
    }
}

Template accordion:

{namespace ts=TYPO3\TypoScript\ViewHelpers}

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

NodeType.yaml:

'XY.xy:Accordion':
  superTypes: 
    'TYPO3.Neos:Content': true
  ui:
    label: 'Akkrodion'
    icon: 'icon-reorder'
    group: 'general'
  childNodes:
    panelCollection:
      type: 'XY.xy:PanelCollection'
      constraints:
        nodeTypes:
          '*': FALSE
          'XY.xy:Panel': TRUE
'XY.xy:PanelCollection':
  superTypes:
    'TYPO3.Neos:ContentCollection': TRUE
  childNodes:
    collapsibleOne:
      type: 'XY.xy:Panel'
  constraints:
    nodeTypes:
      'XY.xy:Panel': TRUE
      '*': FALSE

Any bug suggestions?

#2

Maybe it helps adding ui.inlineeditable to your node types:

  ui:
    inlineEditable: TRUE
#3

Add a container-element around your template output. The content element wrapping otherwise will not find an element where the attributes for the be can be added.

{namespace ts=TYPO3\TypoScript\ViewHelpers}
<div>
    {panelCollection -> f:format.raw()}
</div>
#4

Where should I do this?

Also not working. Nothing changed.

#5

In the accordion template just like the example code i added.

#6

Sorry wrong way round :wink:

I added this div and it doesnt work.

#7

What exactly does not work? Can you select the Accordion-Element but nut the Panel collection inside or something different. Did you look at the markup generated in the backend? I would expect two divs with lots of data-attributes one representing the Accordion and one representing the PanelCollection. You can easily distinguish between them by looking at the attributes.

Another thing that is strange in your Fusion code is that you configure many attributes on the panelCollection, especially the id. This can be the source of the trouble you are facing. Can you add the attributes to a container around the panelCollection instead. Did you try to write the fusion of the Accordion like this:

prototype(XY.xy:Accordion) < prototype(TYPO3.Neos:Content) {
   templatePath = 'resource://XY.xy/Private/Templates/TypoScriptObjects/Accordion.html'
   panelCollection = TYPO3.Neos:ContentCollection {
     nodePath = 'panelCollection'
   }
}
#8

This is not the source of the problem.

prototype(XY.xy:PanelCollection) < prototype(TYPO3.Neos:ContentCollection) 

prototype(XY.xy:Accordion) < prototype(TYPO3.Neos:Content) {
  templatePath = 'resource://XY.xy/Private/Templates/TypoScriptObjects/Accordion.html'
  id = ${q(node).parent().property('_identifier')}
  panelCollection = XY.xy:PanelCollection {
    nodePath = 'panelCollection'
  }
}

Template:

<div id="{id}" class="panel-group" role="tablist" aria-multiselectable="true">
    {panelCollection -> f:format.raw()}
</div>

My problem is that I cant access the Panel/Contentcollection inside the accordion. (without the structure menu).

#9

Hello Marv,

i finally took some time and reproduce the setup to see the problems you have. I am sorry but i works for me without any problems:

NodeTypes.yaml

'XY.xy:Accordion':
  superTypes:
    'TYPO3.Neos:Content': true
    'Canusa.CanusaDe:Constraint.MainContent': true
  ui:
    label: 'Akkrodion'
    icon: 'icon-reorder'
    group: 'general'
  childNodes:
    panelCollection:
      type: 'XY.xy:PanelCollection'
      constraints:
        nodeTypes:
          '*': FALSE
          'XY.xy:Panel': TRUE

'XY.xy:PanelCollection':
  superTypes:
    'TYPO3.Neos:ContentCollection': TRUE
  constraints:
    nodeTypes:
      'XY.xy:Panel': TRUE
      '*': FALSE

'XY.xy:Panel':
  superTypes:
    'TYPO3.Neos:Content': true
  ui:
    label: 'Akkrodion - panel'
    icon: 'icon-reorder'
    group: 'general'

Fusion

prototype(XY.xy:Accordion) < prototype(TYPO3.Neos:Content) {
	templatePath = 'resource://Canusa.CanusaDe/Private/Templates/TypoScriptObjects/Accordion.html'
	panelCollection = TYPO3.Neos:ContentCollection {
		nodePath = 'panelCollection'
	}
}

prototype(XY.xy:Panel) < prototype(TYPO3.Neos:Content) {
	templatePath = 'resource://Canusa.CanusaDe/Private/Templates/TypoScriptObjects/Panel.html'
}

Accordion.html

<div>
{panelCollection -> f:format.raw()}
</div>

Panel.html

<div>
   Panel - Test
</div>

I can select all the nodes as i would expect. Even if i add the attributes of your template and the PanelCollection prototype. To get this going i suggest you start with the code above and only if this works try to add your flavor step by step.

Regards Martin

#10

Sorry, but its not working for me.

I tryed this:

Fusion:

prototype(XY.xy:Panel) < prototype(TYPO3.Neos:Content) {
  templatePath = 'resource://XY.xy/Private/Templates/TypoScriptObjects/Panel.html'
}

prototype(XY.xy:Accordion) < prototype(TYPO3.Neos:Content) {
  templatePath = 'resource://XY.xy/Private/Templates/TypoScriptObjects/Accordion.html'
  panelCollection = TYPO3.Neos:ContentCollection {
    nodePath = 'panelCollection'
  }
}

NodeTypes.yaml

'XY.xy:Panel':
  superTypes:
    'TYPO3.Neos:Content': true
  ui:
    label: 'Panel'
    icon: 'icon-folder-close'
    group: 'general'
  childNodes:
    content:
      type: 'TYPO3.Neos:ContentCollection'
      constraints:
        nodeTypes:
          'XY.xy:Panel': false
          'XY.xy:Accordion': false
'XY.xy:Accordion':
  superTypes: 
    'TYPO3.Neos:Content': true
  ui:
    label: 'Akkrodion'
    icon: 'icon-reorder'
    group: 'general'
  childNodes:
    panelCollection:
      type: 'XY.xy:PanelCollection'
      constraints:
        nodeTypes:
          '*': FALSE
          'XY.xy:Panel': TRUE
'XY.xy:PanelCollection':
  superTypes:
    'TYPO3.Neos:ContentCollection': TRUE

Templates:

Panel.html
{namespace neos=TYPO3\Neos\ViewHelpers}

<div class="panel panel-default">
   <div class="panel-body">Hallo</div>
</div>

Accordion.html
{namespace ts=TYPO3\TypoScript\ViewHelpers}

<div>
    <div  role="tablist" aria-multiselectable="true">
        {panelCollection -> f:format.raw()}
    </div>
</div>

I have no idea whats wrong. :’(

All other contentcollections work and I habe no additional NEOS css…

Any ideas where I can look for?

#11

Hey Marv,
strange – in @mficzel’s environment it is working without problems.
-> Maybe he’s code-editor do some auto-magic (auto-tab, …).

Sometimes I’m sure my nodeType should work, but some tedious space or unneeded tab in the yaml-file beaten me.
So, I guess there is no unnecessary space/tab, but sometimes it helps to check twice under «Administration > Configuration > NodeTypes > YourNodeType».

  1. No error throwing from your nodeTypes?
  2. All your nodeTypeAttributes listed?
    Configuration.jpg674×713 115 KB

Maybe it helps …
Cheers Martin

#12

Thank you this is a good hint. But no errors in my accordion and panel type.

#13

The question is does it work if you use exactly my code. Try this first and add you specifics later.

#14

Yes I tried your example. (see here)

But I had no success.

EDIT: And I tried it without classes and other HTML-Attributes too.

#15

That is really strange … did you look at the generated markup in the backend and compare that to the meta-properties rendered for other content collections?