Customizing the Inspector
When you add a new node type, you can customize the rendering of the inspector. Based on the first node that we created in the “CreatingContentElement” cookbook, we can add some properties in the inspector.
Add a simple checkbox element
This first example adds a checkbox, in a dedicated inspector section, to define if we need to hide the Subheadline property.
You can just add the following configuration to your NodesType.yaml, based on the previous cookbook example:
Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml)
'Vendor.Site:YourContentElementName':
ui:
inspector:
groups:
advanced:
label: 'Advanced'
icon: 'icon-fort-awesome'
position: 2
properties:
hideSubheadline:
type: boolean
defaultValue: TRUE
ui:
label: 'Hide Subheadline ?'
reloadIfChanged: TRUE
inspector:
group: 'advanced'
You can add this property to your Fusion:
Fusion (Sites/Vendor.Site/Resources/Private/Fusion/Root.fusion)
prototype(Vendor.Site:YourContentElementName) < prototype(Neos.Neos:Content) {
templatePath = 'resource://Vendor.Site/Private/Templates/FusionObjects/YourContentElementName.html'
headline = ${q(node).property('headline')}
subheadline = ${q(node).property('subheadline')}
hideSubheadline = ${q(node).property('hideSubheadline')}
text = ${q(node).property('text')}
image = ${q(node).property('image')}
}
And you can use it in your Fluid template:
HTML (Vendor.Site/Private/Templates/FusionObjects/YourContentElementName.html)
{namespace neos=Neos\Neos\ViewHelpers}
<neos:contentElement node="{node}">
<article>
<header>
<h2><neos:contentElement.editable property="headline">{headline -> f:format.raw()}</neos:contentElement></h2>
<f:if condition="{hideSubheadline}">
<f:else>
<h3><neos:contentElement.editable property="subheadline">{subheadline -> f:format.raw()}</neos:contentElement></h3>
</f:else>
</f:if>
</header>
...
</article>
</neos:contentElement>
Add a simple selectbox element
The second example is about adding a selector to change the class of the article element:
Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml)
'Vendor.Site:YourContentElementName':
ui:
inspector:
groups:
advanced:
label: 'Advanced'
position: 2
icon: 'icon-fort-awesome'
properties:
articleType:
type: string
defaultValue: ''
ui:
label: 'Article Type'
reloadIfChanged: TRUE
inspector:
group: 'advanced'
editor: Content/Inspector/Editors/SelectBoxEditor
editorOptions:
placeholder: 'What kind of article ...'
values:
'':
label: ''
announcement:
label: 'Announcement'
casestudy:
label: 'Case Study'
event:
label: 'Event'
Fusion (Sites/Vendor.Site/Resources/Private/Fusion/Root.fusion)
prototype(Vendor.Site:YourContentElementName) < prototype(Neos.Fusion:Template) {
templatePath = 'resource://Vendor.Site/Private/Templates/FusionObjects/YourContentElementName.html'
headline = ${q(node).property('headline')}
subheadline = ${q(node).property('subheadline')}
articleType = ${q(node).property('articleType')}
text = ${q(node).property('text')}
image = ${q(node).property('image')}
}
HTML (Vendor.Site/Private/Templates/FusionObjects/YourContentElementName.html)
{namespace neos=Neos\Neos\ViewHelpers}
<neos:contentElement node="{node}">
<article{f:if(condition:articleType,then:' class="{articleType}"')}>
...
</article>
</neos:contentElement>
Select multiple options in a selectbox element
For selecting more than one item with a slect box the type of the property has to be set to array
.
Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml):
'Vendor.Site:YourContentElementName':
properties:
tags:
type: array
...
ui:
inspector:
...
editor: Content/Inspector/Editors/SelectBoxEditor
editorOptions:
multiple: TRUE
allowEmpty: FALSE
values:
...
Use custom DataSources for a selectbox element
To add custom selectbox-options, Neos uses data sources for the inspector that can be implemented in PHP. See Data sources for more details.
Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml):
'Vendor.Site:YourContentElementName':
properties:
articleType:
ui:
inspector:
editor: Content/Inspector/Editors/SelectBoxEditor
editorOptions:
dataSourceIdentifier: 'acme-yourpackage-test'
Remove fields from an existing Node Type
Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml):
'Neos.Neos:Plugin':
properties:
package: [ ]
subpackage: [ ]
controller: [ ]
action: [ ]
Remove a selectbox option from an existing Node Type
Removing a selectbox option, can be done by simply edition your NodeTypes.yaml.
Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml):
'Neos.Neos:Shortcut':
properties:
targetMode:
ui:
inspector:
editorOptions:
values:
parentNode: ~
It is also possible to add Custom Editors and use Custom Validators.