Flux error when migrating from inline <flux:form options={...}> to <flux:form.option.* />

Question

The Problem

I’m getting the following error and I don’t know why or how to fix it

Call to undefined method FluidTYPO3\Flux\Form\Container\Sheet::setOption()

I am trying to get things working after disabling fluidpages and upgrading flux 9.4. I think I have done the database updates correctly. I’m using: typo3 8.7, flux 9.4, no fluidcontent, no fluidpages, vhs.

Note: This is also cross posted in the TYPO3's Flux Slack channel where it's easier to have longer live conversations if needed.

My Code

Here’s what I had before in fluidbootstraptheme/Resources/Private/Templates/Content/Carousel.html

    <f:section name="Configuration">
        <flux:form id="carousel" options="{group: 'Bootstrap', sorting: 200, icon: 'EXT:fluidbootstraptheme/Resources/Public/Icons/Content/Carousel.png'}">

Here’s what I have now in fluidbootstraptheme/Resources/Private/Templates/Content/Carousel.html

    <f:section name="Configuration">
        <flux:form id="carousel">
            <flux:form.option.group value="Bootstrap" />
            <flux:form.option.sorting value="200" />
            <flux:form.option.icon value="EXT:fluidbootstraptheme/Resources/Public/Icons/Content/Carousel.png" />

Additional References

Here's some things that might help and I might have misunderstood, hence my site isn't working yet

• https://www.aemka.de/en/news/update-from-extflux-8-to-9.html
• https://www.aemka.de/en/news/fluid-pages-page-layouts-without-fluidpages.html
• https://github.com/FluidTYPO3/flux/issues/1542

Answer 1

Thanks to @Claus Due he pointed out that in one of my files I had accidentally placed flux:form.option inside of flux:form.sheet instead of directly inside flux:form. He also kindly added code to check for this specific error in Flux in the future.

The wrong way

<f:section name="Configuration">
    <flux:form id="progressBar">
        <flux:form.sheet name="progressBar">
            <flux:form.option.group value="Bootstrap" />
            <flux:form.option.sorting value="650" />
            <flux:form.option.icon value="EXT:yourextension/Resources/Public/Icons/Content/ProgressBar.png" />
            <flux:field.checkbox name="settings.progressBarAnimated" default="0" />
            <flux:field.checkbox name="settings.progressBarStriped" default="0" />
            <flux:field.select name="settings.progressBarColor"

The right way

<f:section name="Configuration">
    <flux:form id="progressBar">
        <flux:form.option.group value="Bootstrap" />
        <flux:form.option.sorting value="650" />
        <flux:form.option.icon value="EXT:yourextension/Resources/Public/Icons/Content/ProgressBar.png" />
        <flux:form.sheet name="progressBar">
            <flux:field.checkbox name="settings.progressBarAnimated" default="0" />
            <flux:field.checkbox name="settings.progressBarStriped" default="0" />
            <flux:field.select name="settings.progressBarColor"

Way to improve the above code

@Claus Due also pointed out that there's usually no need to use flux:form.option.icon if you use special conventions.

copy whichever icon files you associate with content/page templates, to Resources/Public/Icons/Content or Resources/Public/Icons/Page and name them like the page/content template is named. Then remove the “icon” option from forms

So for this snippet from the file typo3conf/ext/yourextension/Resources/Private/Templates/Content/ProgressBar.html I leave out the icon line...

<f:section name="Configuration">
    <flux:form id="progressBar">
        <flux:form.option.group value="Bootstrap" />
        <flux:form.option.sorting value="650" />
        <flux:form.sheet name="progressBar">
            <flux:field.checkbox name="settings.progressBarAnimated" default="0" />
            <flux:field.checkbox name="settings.progressBarStriped" default="0" />
            <flux:field.select name="settings.progressBarColor"

...and just make sure to add an icon specifically located and named typo3conf/ext/yourextension/Resources/Public/Icons/Content/ProgressBar.png

Note: I abstracted fluidbootstraptheme to yourextension in the above code make it a little more obvious what gets replaced in your specific case.