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