Add an option to TwoColumn node type

Using Neos & Flow
1

Hey there,

I want to add a new option to column node types, but what does it need to change to appear in the ui?
I’m trying to add the screen property.

'TYPO3.Neos.NodeTypes:TwoColumn':
  properties:
    'layout':
      defaultValue: '6-6'
      ui:
        inspector:
          editorOptions:
            values:
              '50-50': ~
              '75-25': ~
              '25-75': ~
              '66-33': ~
              '33-66': ~
              '6-6':
                label: '50% / 50%'
              '8-4':
                label: '66% / 33%'
              '4-8':
                label: '33% / 66%'
    'screen':
      defaultValue: 'medium'
      ui:
        inspector:
          editorOptions:
          values:
            'small':
              label: 'Small'
            'medium':
              label: 'Medium'
            'large':
              label: 'Large'
2

I guess you have to assign each of your properties to an ui inspector group, try it like here:

properties.yourproperty.ui.inspector.group: ‘general’

See http://neos.readthedocs.io/en/stable/CreatingASite/NodeTypes/NodeTypeDefinition.html?highlight=Ui%20group

3

Thanks for the hint. Now I got it, I missed some definitions. Here is the working result:

'TYPO3.Neos.NodeTypes:TwoColumn':
  properties:
    'layout':
      defaultValue: '6-6'
      ui:
        inspector:
          editorOptions:
            values:
              '50-50': ~
              '75-25': ~
              '25-75': ~
              '66-33': ~
              '33-66': ~
              '6-6':
                label: '50% / 50%'
              '8-4':
                label: '66% / 33%'
              '4-8':
                label: '33% / 66%'
    'screen':
      defaultValue: 'medium'
      type: string
      ui:
        label: 'Screen'
        inspector:
          group: 'column'
          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              'small':
                label: 'Small'
              'medium':
                label: 'Medium'
              'large':
                label: 'Large'
4

Hi Sebastian,

Would you mind sharing how could you use the ‘screen’ property so it ends up in your generated HTML? I’m trying to add a ‘width’ property that sets the div’s width.

Thank you in advance!

5

Hey Daniel,

according to the neos demo package and how bootstrap classes are implemented into multiple columns , I did the same with Zurb Foundation and added the screen property.

In roots.ts2:

##
# Adjust "MultiColumn" element to Zurb Foundation CSS classes
#
prototype(TYPO3.Neos.NodeTypes:MultiColumn) {
	attributes.class = 'row'
	columns.iterationName = 'multiColumnIteration'
}

##
# Adjust "MultiColumnItem" element to Zurb Foundation CSS classes
#
prototype(TYPO3.Neos.NodeTypes:MultiColumnItem) {
	attributes.class = ${q(node).parent().property('screen') + '-' + String.split(q(node).parent().property('layout'), '-')[multiColumnIteration.index] + ' columns'}
}
6

Thanks a lot! This thread helps me too. Thanks!

7

Can someone tell me where I can modify the HTML template of the TwoColumn NodeType? I need to add a new class if a checkbox is checked. Here is the part in my YAML file under ‘Neos.NodeTypes:TwoColumn’:

'order':
      type: boolean
      defaultValue: false
      ui:
        label: 'Reverse order'
        reloadIfChanged: true
        inspector:
          group: 'column'
8

Create a fusion and a template file for that nodetype in your package:

  • Private/Fusion/NodeTypes/TwoColumn.fusion
  • Private/Templates/NodeTypes/TwoColumn.html

Add the template path for your own template:

prototype(Neos.NodeTypes:TwoColumn) {
    # template path
    templatePath = 'resource://My.Package/Private/Templates/NodeTypes/TwoColum.html'
    # properties
    order = ${q(node).property('order')}
}
9

Thank you @renewoerz for your helpful informations! I realized that it’s sufficient if I can access the property in the fusion.

Now I have the problem that I can’t access the property I set under ‘Neos.NodeTypes:TwoColumn’ because I would need it in my fusion under prototype(Neos.NodeTypes:MultiColumn).

Now my variable is always empty. How can I access to the value of the checkbox I set?

prototype(Neos.NodeTypes:MultiColumn) {
    orderReversed = ${(q(node).property('order') ? 'col--tablet-reverse' : ''}
    attributes.class = ${'container grid--container' + orderReversed}
    columns.iterationName = 'multiColumnIteration'
}
10

I think its because your Syntax. But not sure.

orderReversed = ${(q(node).property('order') ? 'col--tablet-reverse' : '')} <-- missing “)”

You could do that a bit shorter, too:

prototype(Neos.NodeTypes:MultiColumn) {
    attributes.class = ${'container grid--container' + (q(node).property('order') == true ? ' col--tablet-reverse' : '')}
    columns.iterationName = 'multiColumnIteration'
}

edit: Ok now i understand that question (read too fast). You can access that property by using parent() if you set that property in the parent node:

11

You were right. The syntax was wrong. But also with parent() I still can’t access to the property. Even if the checkbox is checked and published.

Is it maybe the other way around? MultiColumn is the parent and TwoColumn the child?

12

Neos.NodeTypes:MultiColumn has access to your property order (set for Neos.NodeTypes:TwoColumn) because it’s inheriting (in Packages/Application/Neos.NodeTypes/Resources/Private/Fusion/Root.fusion on line 84). You should have access to your property. And sorry about that “parent()”. You have only to use parent() if you want to access to your property from Neos.NodeTypes:MultiColumnItem.

So im really wondering what’s wrong. Im using that the exact same way for my custom grid.

Maybe you have to wait for a more experienced developer. For my understanding you did it the right way - i can’t help you here.

14

Thank you Rene for your time! Mabe someone else has a solution for my problem. Here what I have so far:

NodeTypes.ColumnAdjustments.yaml

'Neos.NodeTypes:TwoColumn':
  ui:
    inspector:
      groups:
        mysettings:
          label: 'Reihenfolge'
  properties:
    'order':
      type: boolean
      defaultValue: false
      ui:
        label: 'umdrehen'
        reloadIfChanged: true
        inspector:
          group: mysettings

ColumnAdjustments.fusion

prototype(Neos.NodeTypes:MultiColumn) {
    attributes.class = ${'container grid--container ' + (q(node).property('order') == true ? ' col--tablet-reverse' : 'nope')}
}