Conditional attribute in AFX

I want to set form fields to readonly, based on a condition I defined in fusion and this is the best I came up with…

<input @if.readonly={props.readonly} readonly name={props.fieldName} type="text" />
<input @if.writeable={!props.readonly} name={props.fieldName} type="text" />

Is there a more elegant way, without code duplication to set or not set an attribute in a tag? The problem with readonly is, it does not work and is not valid to set it to false…

Hi Till,

try this

<input readonly readonly.@if.readonly={props.readonly} name={props.fieldName} type="text" />

:wink:

1 Like

Hi Bastian

Thank you! :slightly_smiling_face:

Hi Till,

was just about to answer, but @bwaidelich was quicker.

But still here what I prepared: https://fusionpen.punkt.de/fusionpen/eafa31ec1a6770496cd1d12f5ddcb57f3a65a31e.html
TLDR; its the same fusion code as already suggested.

Regards, Peter

1 Like

By assigning boolean values to attributes this can be done slightly easier:

<input readonly={props.readonly ? true : false}  .... />

From the documentation of Neos.Fusion:Attributes “Boolean values will be rendered as an empty or absent attribute.” https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html#neos-fusion-attributes

2 Likes

Just wanted to confirm what @martoro is saying.
I don’t use conditions for boolean attributes as AFX will behave correctly already. Example here https://fusionpen.punkt.de/fusionpen/a4dbe17279eaa98d1fdda08860d84a4820c26ce3.html

1 Like

Great! Thank you, I guess this is the most elegant way it could possibly be. :slight_smile:

<input readonly={props.readonly} name={props.fieldName} type="text" /> 

AFX code with the definition of the property readonly being something like

readonly = ${!CurrentUser.hasValidLicense()}

CC @drillsgt @bwaidelich in case you didn’t get the notifications anyway…

1 Like

Thanks for improving the original response :slight_smile:

PS: I took the freedom to move this topic to the right category and marked Martins response as solution

1 Like