Dynamically Showing/Hiding Content Collections in Editor

Using Neos & Flow
1

I’m building a component that should show different content collections based on it’s status. For example if there is a logged in user then show panel1, otherwise show panel2. Admin should be able to add content to both using the Neos editor UI.

I’m stuck and before I hack something in I’d like to ask for your guidance to achieve the most elegant solution. I’ll post the working code in exchange at the end for your help if we figure out something nice.

So what I’ve been thinking is to have a dropdown attribute that has the available statuses of the component. The admin can chose which state he’d like to edit. I may be able to hack it (it doesn’t work well right now since the javascript in the HTML does not get re-rendered when the ‘componentStatus’ value changes) to work but I’m sure there is a much better solution to this requirement. Thank you in advance!

NodeTypes.Registration.yaml

'vendor.product:Registration':
  superTypes:
    'Neos.Neos:Content': TRUE
  ui:
    label: 'Registration'
    ...
  properties:
    componentStatus:
      type: string
      defaultValue: guest
      ui:
        reloadPageIfChanged: TRUE
        label: 'Component Status'
        inspector:
          group: authoringGroup
          editor: Neos.Neos/Inspector/Editors/SelectBoxEditor
          editorOptions:
            values:
              guest:
                label: 'guest user'
              authenticated:
                label: 'authenticated user'
  childNodes:
    guestContent:
      type: 'vendor.product:RegistrationGuest'
    authenticatedContent:
      type: 'vendor.product:RegistrationAuthenticated'
...

Registration.fusion

prototype(vendor.product:Registration) < prototype(Neos.Neos:Content) {
    templatePath = 'resource://vendor.product/Private/Templates/NodeTypes/Registration/Registration.html'

    componentStatus = ${q(node).property('componentStatus')}

    guestContent = Neos.Fusion:Collection {
        collection = ${q(node).children('guestContent')}
        itemName = 'node'
        itemRenderer = Neos.Neos:ContentCase
        iterationName = 'iterator'
    }

    authenticatedContent = Neos.Fusion:Collection {
        collection = ${q(node).children('authenticatedContent')}
        itemName = 'node'
        itemRenderer = Neos.Neos:ContentCase
        iterationName = 'iterator'
    }
}
...

Registration.html

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}

<div>
    {guestContent -> f:format.raw()}
    {authenticatedContent -> f:format.raw()}
</div>

<f:if condition="{node.context.workspace.name} != 'live'">
    <f:then>
        <f:if condition="{componentStatus} == 'guest'">
            <f:then>
                    guest
                    <script>
                        console.log("guest");
                    </script>
            </f:then>
            <f:else if="{componentStatus} == 'authenticated'">
                    authenticated
                    <script>
                        console.log("authenticated");
                    </script>
            </f:else>
        </f:if>
    </f:then>
</f:if>
2

Well this solves the problem of scripts not being re-rendered so I have a working solution, but I still hope there’s a more elegant way to meet my requirements:

<div id="twd-ppm-component-registration">
    <f:if condition="{node.context.workspace.name} != 'live' && {componentStatus} == 'guest'">
        {guestContent -> f:format.raw()}
    </f:if>
    <f:if condition="{node.context.workspace.name} != 'live' && {componentStatus} == 'authenticated'">
        {authenticatedContent -> f:format.raw()}
    </f:if>
</div>