Typo3 Flux FCE panel losing content

Question

I'm moving from creating custom content records using FluidContent to Flux, as FluidContent has been depreciated. I'm creating new content records from scratch, not needing to update old ones. I've got simple content records working OK, but I'm having real real trouble making an accordion block using panels.

Scenario

• I create new panels in the BE form - works fine
• The BE preview only shows the first panel created, but repeated as many times as there are panels made in the form. So if I drop a new content record into Panel 1, it will appear in all of the panels in the preview.
• The FE output shows the panel titles correctly, but no content.

I'm wondering if it its something to do with iteration in the grid setup? The panels are clearly being created ok and can render in the FE. Its the process of cycling through the panels in the grid that's wrong, and with then attaching these to the output.

Any thoughts or suggestions would be very gratefully received.

Many thanks, David

Setup: - Typo3-8.19 Flux-9.0.1 Fluidpages-4.2.0 VHS-5.0.1

FCE template

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
  xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
  xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
  xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

<f:layout name="Content"/>

<f:section name="Configuration">
    <flux:form id="bootAccordion" label="Boostrap Accordion" >
       <flux:form.option name="icon" 
        value="EXT:optionslayout/Resources/Public/Icons/Content/Example.gif" 
        />
       <flux:form.sheet name="panels" label="Pannels">
         <flux:form.section name="panels">
             <flux:form.object name="panel">
                 <flux:field.input name="title" label="Panel title"/>
                 <flux:field.checkbox name="active" label="Start expanded"/>
             </flux:form.object>
          </flux:form.section>
       </flux:form.sheet>
    </flux:form>
    <flux:grid>
        <f:for each="{panels}" as="panel" iteration="iteration">
            <flux:grid.row>
                <flux:grid.column name="column.{iteration.index}"
                                  colPos="0"
                                  label="{f:if(condition: panel.panel.title,             
                                        then: panel.panel.title, 
                                        else: 'Panel {iteration.cycle}')}">
                </flux:grid.column>
           </flux:grid.row>
        </f:for>
    </flux:grid>
</f:section>


<f:section name="Preview">
</f:section>


<f:section name="Main">
  <div id="accordion{record.uid}" class="accordion" 
        role="tablist" aria-multiselectable="true">

    <f:for each="{panels}" as="panel" iteration="iteration">
      <div class="card">
        <div class="card-header" role="tab" 
          id="heading{record.uid}-{iteration.index}">
            <a data-toggle="collapse" data-accordion="true"             
                    href="#collapse{record.uid}-{iteration.index}" 
                    aria-expanded="true" 
                    aria-controls="collapse{record.uid}-{iteration.index}">
              <h5 class="mb-0">
                {panel.panel.title} 
                <i class="fa fa-angle-down rotate-icon float-right"></i>
              </h5>
            </a>
        </div>
        <div id="collapse{record.uid}-{iteration.index}" 
             class="collapse 
                {f:if(condition: '{panel.panel.active}', then: 'show')}" 
             role="tabpanel" 
             aria-labelledby="heading{record.uid}-{iteration.index}" 
             data-parent="#accordion{record.uid}">
          <div class="card-body">
            <flux:content.render area="column.{iteration.index}" />
          </div>
        </div>
      </div>
    </f:for>

  </div>
</f:section>

</div>

BE Form view - shows 2 panels successfully created

BE Preview - showing only the first panel, repeating incorrectly

FE Output - showing panel titles rendered correctly, but no content within

Answer 1

You can do something like :

<f:for each="{panels}" as="panel" iteration="iterator">
    <flux:grid.row>
        <flux:grid.column name="column{iterator.cycle}" colPos="{iterator.cycle}"  label="{panel.panel.title} Accordeon n°{iterator.cycle}">
        </flux:grid.column>
    </flux:grid.row>
</f:for>

But it's better to use {panel.panel.id}instead of {iterator.cycle} or {iterator.index} for <flux:grid.column name= and <flux:content.render area= because if not, if a user move a accordion, it lost the content inside.

It's better to make relation with a unique id than with position...

Answer 2

flux needs colpos values, whereas fluidcontent didn't. I do not not know, how to set the colpos value dynamically.