How to get selection from SelectBoxEditor?

Using Neos & Flow Neos Plugin Development
1

Hey everyone!

Im pretty new to Neos and started to work on my first NodeType!

I created a SelectBoxEditor and this is working.

Now to my question:
How am I supposed to get the selected value? I searched in the docs, but it was either outdatet or I didn’t know how to implement it. :frowning:

My goal is to render two different types of buttons based on the selection.

For example:

if btnType == "button 1" {
<button class="firstButton">
}

if btnType == "button 2" {
<button class="secondButton">
}

I also tried to get the value like this: btnType = ${q(node).property('btnType')} But this is returning me nothing.

2

What did you name your property in your YAML configuration?

${q(node).property('btnType')} is correct, if btnType is the name of the property.

Show you full Fusion and YAML and we will work it out :slight_smile:

3

Hey, this is my yaml

'Neos.Demo:Content.Button':
  superTypes:
    'Neos.Neos:Content': true
    'Neos.NodeTypes.BaseMixins:ImageMixin': true
    'Neos.NodeTypes.BaseMixins:TextMixin': true
  ui:
    label: Button
    icon: 'icon-atom'
    position: 500
    inlineEditable: true
    inspector:
      groups:
        link:
          label: 'Link'
          icon: icon-atom
        btnType:
          label: 'Button Type'
          icon: icon-atom
  properties:
    label:
      ui:
        aloha:
          placeholder: '<p> Test <p>'
        options:
          silhouette: 'text.free'
    link:
      type: string
      ui:
        label: 'URL'
        inspector:
          group: link
          editor: Neos.Neos/Inspector/Editors/LinkEditor
    btnType:
      type: array
      ui:
        label: 'Select Button'
        inspector:
          group: btnType
          editor: 'Neos.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            multiple: FALSE
            placeholder: 'Select Button...'
            values:
              '':
                label: ''
              firstButton:
                label: 'Button 1'
              secondButton:
                label: 'Button 2'
              thirdButton:
                label: 'Button 3'

And this is how i try to retrieve the information for testing:

<span>{props.btnType}</span>

4

You have type: array which must be type:string since you only save one string :slight_smile:

${q(node).property('btnType') is correct. And how you wanna render it might be something like a Neos.Fusion:Case element, where you use the btnType as condition
https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html#neos-fusion-case

5

Ahh okay thanks! That works!

Just one last question. How would the Neos.Fusion:Case be implemented?

I tried it like this:

prototype(Neos.Demo:Content.Button) < prototype(Neos.Neos:ContentComponent) {
    label = Neos.Neos:Editable {
        property = 'label'
    }
    link = ${q(node).property('link')}
    btnType = ${q(node).property('btnType')}

    'displayButton' = Neos.Fusion:Case {
        renderFirstButton {
            condition = ${q(node).property('btnType') == "firstButton"}
            renderer = afx`
                    <span>{props.btnType}</span>
            `
        }
    }
}

But that doesn’t seem to be the right way.

I get a “No Fusion object found in path” error if im doing this.

6

Instead of

'displayButton' = Neos.Fusion:Case {

Name it
renderer = Neos.Fusion:Case {

7

Hey Soren,

thanks that worked!

1 Like