Content element shows wrong children when viewed with page preview link.

[cushingw]

First off, sorry if this issue is in the wrong project. I'm not sure if it's a fluidcontent or flux issue.

When a page preview link is generated in the workspace module, one of our content elements is showing the wrong child elements. It is displayed correctly when 'show' is selected from the page tree when in the approval workspace. Here are screenshots showing the difference in display:

In this example, a new tab ( a flux:form.object) has been added to the element and new content added to it. Viewing the page in the workspace shows the correct number of tabs and they each contain the correct content.

When viewed with the page preview link, the element shows the new tab, but each tabs content is incorrect. It seems like the content for the new tab is missing and everything else is shifted by one.

We're running Typo3 7.6.16, Flux 8.1.0, and fluidcontent 5.1.0.

This is how the content element is currently defined:

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

<f:layout name="Content" />

<f:section name="Configuration">
    <flux:form id="tabs" label="Tabs"
               options="{useTypoScript: 0, group: 'Content Containers'}">
        <flux:form.sheet label='Tab Options' name="display">
            <flux:field.select label='Tab Type' name="mode" items="tab,pill" requestUpdate="TRUE" />
            <flux:field.input label='Pill Label' name="label" />
            <flux:field.checkbox label='Justify Tabs?' name="justified" />
            <flux:field.checkbox label='Vertically Stack Tabs?' name="stackable" />
            <flux:field.checkbox label='Fade Tab Content In/Out?' name="fade" />
        </flux:form.sheet>
        <flux:form.sheet label='Tabs' name="tabs">
            <flux:form.section name="tabs">
                <flux:form.object name="tab">
                    <flux:field.input label='Tab Title' name="title" />
                    <flux:field.input label='Additional CSS Class' name="class" />
                    <flux:field.checkbox label='Default Active?' name="active" />
                    <flux:field.checkbox label='Hide Tab?' name="hide" />
                </flux:form.object>
            </flux:form.section>
        </flux:form.sheet>
        <flux:grid>
            <flux:grid.row>
                <f:if condition="{tabs}">
                    <v:condition.type.isArray value="{tabs}">
                        <f:for each="{tabs}" as="tab" iteration="iteration">
                            <flux:grid.column style="width: {v:math.division(b: '{tabs -> f:count()}', a: 100)}%" name="content.{iteration.index}" label="{tab.tab.title}" />
                        </f:for>
                    </v:condition.type.isArray>
                </f:if>
            </flux:grid.row>
        </flux:grid>
    </flux:form>
</f:section>

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

<f:section name="Main">
    <v:variable.set name="activeTabIndex" value="0" />
    <f:if condition="{tabs}">
        <f:for each="{tabs}" as="tab" iteration="iteration">
            <f:if condition="{tab.tab.active}">
                <v:variable.set name="activeTabIndex" value="{iteration.index}" />
            </f:if>
        </f:for>
    </f:if>

    <div class="tabbable">
        <f:render section="Tabs" arguments="{_all}" />

        <div class="tab-content">
            <f:if condition="{tabs}">
                <f:for each="{tabs}" as="tab" iteration="iteration">
                    <f:if condition="{tab.tab.hide}">
                        <f:else>
                            <div class="tab-pane {f:if(condition: tab.tab.fade, then: 'fade')} {f:if(condition: '{activeTabIndex} == {iteration.index}', then: 'active in')} {f:if(condition: tab.tab.class, then: 'tab-pane-{tab.tab.class}')}"
                                 id="tab-{record.uid}-{iteration.index}">
                                <flux:content.render area="content.{iteration.index}" />
                            </div>
                        </f:else>
                    </f:if>
                </f:for>
            </f:if>
        </div>
    </div>
</f:section>

<f:section name="Tabs">
    <f:if condition="{tabs}">
        <f:if condition="{mode} == 'tab'">
        <div class="navbar-header">
            <div type="button" class="tabbar-toggle collapsed mobile-select" data-toggle="collapse" data-target="#tab-{record.uid}" aria-expanded="false" aria-controls="navbar">
                <span class="select-dropdown-selected"></span>
                <span class="float-right glyphicon glyphicon-triangle-bottom">&nbsp;</span>
            </div>
        </div>
        </f:if>
        <div id="tab-{record.uid}" class="{f:if(condition:'{mode} == "tab"', then:'tabbar-collapse collapse')} clearfix">
        <f:if condition="{mode} == 'pill'"><div class='pill-label'>{label}</div></f:if>
        <ul class="nav nav-{mode}s {f:if(condition: justified, then:'nav-justified')} {f:if(condition: stackable, then: 'nav-stacked')}">
            <f:for each="{tabs}" as="tab" iteration="iteration">
                <f:if condition="{tab.tab.hide}">
                    <f:else>
                        <li class="nav-link {f:if(condition: '{activeTabIndex} == {iteration.index}', then: 'active')} {f:if(condition: tab.tab.class, then: 'tab-{tab.tab.class}')}">
                            <a href="{v:page.absoluteUrl()}#tab-{record.uid}-{iteration.index}" data-toggle="{mode}">{tab.tab.title}</a>
                        </li>
                    </f:else>
                </f:if>
            </f:for>
        </ul>
        </div>
    </f:if>
</f:section>

[NamelessCoder]

Hi @cushingw - this is indeed a Flux issue, but it's fine to take care of it here. First off: I think this issue is relevant also if you don't use workspaces, but workspaces may make it worse. There are two main things that come to mind:

• The use of section objects to declare tabs and {iteration} as part of the content area name causes the "content in wrong column" issue. Technically the content is not in the wrong column - the reason is that if you sort columns or add a new column before existing columns, the iteration index changes which then changes the name of the column. There is a lot more information about this here, along with a nice workaround: https://github.com/FluidTYPO3/flux/issues/1372.
• When you preview pages from the workspace link and have the workspaces top bar, the page is always rendered without respecting caches of content elements. But when you preview the page with "view page" or just by browsing the FE, the following two conditions can apply: 1) if you are not logged in as BE user while browsing the FE, caching will be enforced and even ctrl-refresh won't regenerate the page, and 2) if you are logged into the BE (on the same cookie domain) then caching is selective and on by default, but possible to circumvent with ctrl-refresh. Both cases may or may not support ?no_cache=1 or setting disable cache? in page properties, this depends on your setup, but if viewing the page with caching disabled you will always get the page rendered (nothing retrieved from cache, nothing new stored in cache after rendering).

I hope the {iteration} thing combined with the knowledge about the caching logic is all you need to prevent the issue and ensure consistent previewing in workspaces!

[cushingw]

Thanks, that's helped a bit.

By using each section's ID instead of the iteration index for the content area name, the existing live content elements are shown in their proper tabs when previewing the page from a workspace link even when a new tab is added.

However, we're still not seeing the new content that's been added to the new tab in the workspace when using a preview link. I've set disable cache on the page itself and added no_cache=1 to the preview link, but the new tab is still blank in the page preview. The missing new content is happening whether we view the preview link while logged into the BE or in an anonymous tab.