Hi, I’ve have a question about the FormBuilder. As far as I can see the code of a form label gets escaped in the Neos.Form package which is used by the FormBuilder. Therefore: is there a simple way to use Links in the label of a checkbox (e.g. ‘agree to privacy policy …’)? Creating a custom element seems not to be a solution as escaping happens outside of FormBuilder.
Hi,
we override the behaviour of the checkbox element for this:
NodeTypes.Override.yaml:
'Package.Vendor:Mixin.UseRaw':
abstract: true
properties:
'useRaw':
type: boolean
defaultValue: false
ui:
label: i18n
reloadIfChanged: TRUE
inspector:
group: 'formElement'
'Neos.Form.Builder:Checkbox':
superTypes:
'Package.Vendor:Mixin.UseRaw': true
properties:
'useRaw':
ui:
inspector:
position: 'before label'
'label':
ui:
inspector:
editor: 'ClientEval: node.properties.useRaw ? ''Neos.Neos/Inspector/Editors/CodeEditor'' : ''Neos.Neos/Inspector/Editors/TextFieldEditor'''
Settings.yaml:
Neos:
Form:
presets:
default:
formElementTypes:
'Neos.Form:Checkbox':
renderingOptions:
templatePathPattern: 'resource://Vendor.Package/Private/Form/{@type}.html'
Checkbox.html:
{namespace form=Neos\Form\ViewHelpers}
<f:validation.results for="{element.identifier}">
<div class="clearfix{f:if(condition: validationResults.flattenedErrors, then: ' error')}"<f:if condition="{element.rootForm.renderingOptions.previewMode}"> data-element="{form:form.formElementRootlinePath(renderable:element)}"</f:if>>
<!-- Changed label -->
<label for="{element.uniqueIdentifier}">
<f:if condition="{element.properties.useRaw}"><f:then>
{element -> form:translateElementProperty(property: 'label') -> f:format.raw()}
</f:then><f:else>
{element -> form:translateElementProperty(property: 'label') -> f:format.nl2br()}
</f:else></f:if>
<f:if condition="{element.required}"><f:render partial="Neos.Form:Field/Required" /></f:if>
</label>
<div class="{element.properties.containerClassAttribute}">
<label class="{element.properties.elementClassAttribute}">
<f:form.checkbox property="{element.identifier}" id="{element.uniqueIdentifier}" class="{element.properties.elementClassAttribute}" value="{element.properties.value}" errorClass="{element.properties.elementErrorClassAttribute}" />
</label>
<f:if condition="{validationResults.flattenedErrors}">
<span class="help-inline">
<f:for each="{validationResults.errors}" as="error">
{error -> f:translate(id: '{error.code}', arguments: error.arguments, package: '{element.renderingOptions.validationErrorTranslationPackage}', source: 'ValidationErrors')}
<br />
</f:for>
</span>
</f:if>
<f:if condition="{element.properties.elementDescription}">
<span class="help-block">{element -> form:translateElementProperty(property: 'elementDescription')}</span>
</f:if>
</div>
</div>
</f:validation.results>
Override/Checkbox.fusion:
prototype(Neos.Form.Builder:Checkbox.Definition) {
properties {
label = ${q(node).property('label')}
useRaw = ${q(node).property('useRaw')}
}
}
2 Likes