FormBuilder and Links

Using Neos & Flow
1

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.

2

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
3

Hi Benjamin,

I’m really sorry for my late answer, adverse circumstances …

Thank you very much for your detailed reply. I’ve tested it today and it worked fine. We only had to adjust the fluid template to our needs. Again, thx for your Help.