Is it possible in orben to hide or disable the "send" button until a form is finished?

Question

The default behavior of this button is to be enabled always, and if a field is mandatory or incorrect, an error is shown.

But if you use the wizard, and you have to fill up different sections, it is not normal to submit the form if you are still at the beginning of the form. Probably you must navigate to all sections to fill up all questions (at least the mandatory ones) until you reach the last section. When you are in the last section, you can submit the form. At least, force the user to read all the form.

I know that is a little annoying this behaviour, specially with user with no so much experience with Orbeon, that are inclined to press this button when they have finished the first section.

Then the question is: there is any way of hide or disable the "send" button until the last section is reached?

EDIT

As shown in documentation page the new version 2016.1 of Orbeon finally hides the "submit" button. At least, this text is shown:

Wizard improvements. The wizard's table of contents indicates pages with errors more clearly. In validated mode, pages which cannot be navigated to are also indicated better. Last but not least, in validated mode, Save, Submit, Send, and other buttons which appear within the wizard only show when the user reaches the last page of the wizard. Finally, we made a few cosmetic improvements as well.

I am trying this new feature enabling validation mode, in the properties file:

<!-- Configure wizard layout -->
<property as="xs:string" name="oxf.fr.detail.view.appearance.*.*" value="wizard"/>
<property as="xs:boolean" name="oxf.xforms.xbl.fr.wizard.validate.*.*" value="true"/>

And I have created a simple form using the Form Builder:

<xh:html xmlns:xh="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms"
     xmlns:xs="http://www.w3.org/2001/XMLSchema"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     xmlns:xi="http://www.w3.org/2001/XInclude"
     xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
     xmlns:xxf="http://orbeon.org/oxf/xml/xforms"
     xmlns:exf="http://www.exforms.org/exf/1-0"
     xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
     xmlns:saxon="http://saxon.sf.net/"
     xmlns:sql="http://orbeon.org/oxf/xml/sql"
     xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
     xmlns:fb="http://orbeon.org/oxf/xml/form-builder">
<xh:head>
    <xh:title>Wizard Test</xh:title>
    <xf:model id="fr-form-model" xxf:expose-xpath-types="true">

        <!-- Main instance -->
        <xf:instance id="fr-form-instance" xxf:exclude-result-prefixes="#all" xxf:index="id">
            <form>
                <section-1>
                    <control-2/>
                    <control-3/>

                </section-1>
                <section-4>
                    <control-5/>
                    <control-6/>
                </section-4>
                <section-7>
                    <control-8/>
                </section-7>
            </form>
        </xf:instance>

        <!-- Bindings -->
        <xf:bind id="fr-form-binds" ref="instance('fr-form-instance')">
            <xf:bind id="section-1-bind" name="section-1" ref="section-1">
                <xf:bind id="control-2-bind" ref="control-2" name="control-2" required="true()"/>
                <xf:bind id="control-3-bind" ref="control-3" name="control-3"/>

            </xf:bind>
            <xf:bind id="section-4-bind" ref="section-4" name="section-4">
                <xf:bind id="control-5-bind" ref="control-5" name="control-5" required="true()"/>
                <xf:bind id="control-6-bind" ref="control-6" name="control-6"/>
            </xf:bind>
            <xf:bind id="section-7-bind" ref="section-7" name="section-7">
                <xf:bind id="control-8-bind" ref="control-8" name="control-8" type="xs:boolean"
                         required="true()"/>
            </xf:bind>
        </xf:bind>

        <!-- Metadata -->
        <xf:instance xxf:readonly="true" id="fr-form-metadata" xxf:exclude-result-prefixes="#all">
            <metadata>
                <application-name>WizardTest</application-name>
                <form-name>WizardTest</form-name>
                <title xml:lang="en">Wizard Test</title>
                <description xml:lang="en"/>
                <singleton>false</singleton>
            </metadata>
        </xf:instance>

        <!-- Attachments -->
        <xf:instance id="fr-form-attachments" xxf:exclude-result-prefixes="#all">
            <attachments>
                <css mediatype="text/css" filename="" size=""/>
                <pdf mediatype="application/pdf" filename="" size=""/>
            </attachments>
        </xf:instance>

        <!-- All form resources -->
        <xf:instance xxf:readonly="true" id="fr-form-resources" xxf:exclude-result-prefixes="#all">
            <resources>
                <resource xml:lang="en">
                    <control-8>
                        <label>Yes or no?</label>
                        <hint/>
                    </control-8>
                    <control-5>
                        <label>Radio Button Other</label>
                        <hint/>
                        <item>
                            <label>First choice</label>
                            <value>1</value>
                            <hint/>
                        </item>
                        <item>
                            <label>Second choice</label>
                            <value>2</value>
                            <hint/>
                        </item>
                        <item>
                            <label>Third choice</label>
                            <value>3</value>
                            <hint/>
                        </item>
                    </control-5>
                    <control-6>
                        <label>Select</label>
                        <hint/>
                        <item>
                            <label>First choice</label>
                            <value>1</value>
                        </item>
                        <item>
                            <label>Second choice</label>
                            <value>2</value>
                        </item>
                        <item>
                            <label>Third choice</label>
                            <value>3</value>
                        </item>
                    </control-6>
                    <control-2>
                        <label>Radio Button</label>
                        <hint/>
                        <item>
                            <label>First choice</label>
                            <value>1</value>
                            <hint/>
                        </item>
                        <item>
                            <label>Second choice</label>
                            <value>2</value>
                            <hint/>
                        </item>
                        <item>
                            <label>Third choice</label>
                            <value>3</value>
                            <hint/>
                        </item>
                    </control-2>
                    <control-3>
                        <label>Radio Button Other</label>
                        <hint/>
                        <item>
                            <label>First choice</label>
                            <value>1</value>
                            <hint/>
                        </item>
                        <item>
                            <label>Second choice</label>
                            <value>2</value>
                            <hint/>
                        </item>
                        <item>
                            <label>Third choice</label>
                            <value>3</value>
                            <hint/>
                        </item>
                    </control-3>
                    <section-1>
                        <label>Untitled Section</label>
                    </section-1>
                    <section-4>
                        <label>Section2</label>
                        <help/>
                    </section-4>
                    <section-7>
                        <label>Section3</label>
                        <help/>
                    </section-7>

                </resource>
            </resources>
        </xf:instance>

        <!-- Utility instances for services -->
        <xf:instance id="fr-service-request-instance" xxf:exclude-result-prefixes="#all">
            <request/>
        </xf:instance>

        <xf:instance id="fr-service-response-instance" xxf:exclude-result-prefixes="#all">
            <response/>
        </xf:instance>

    </xf:model>
</xh:head>
<xh:body>
    <fr:view>
        <fr:body xmlns:xbl="http://www.w3.org/ns/xbl" xmlns:p="http://www.orbeon.com/oxf/pipeline"
                 xmlns:oxf="http://www.orbeon.com/oxf/processors">
            <fr:section id="section-1-control" bind="section-1-bind">
                <xf:label ref="$form-resources/section-1/label"/>
                <fr:grid>
                    <xh:tr>

                        <xh:td>
                            <xf:select1 id="control-2-control" appearance="full" bind="control-2-bind">
                                <xf:label ref="$form-resources/control-2/label"/>
                                <xf:hint ref="$form-resources/control-2/hint"/>
                                <xf:alert ref="$fr-resources/detail/labels/alert"/>


                                <xf:itemset ref="$form-resources/control-2/item">
                                    <xf:label ref="label"/>
                                    <xf:value ref="value"/>
                                    <xf:hint ref="hint"/>
                                </xf:itemset>
                            </xf:select1>
                        </xh:td>
                    </xh:tr>
                    <xh:tr>
                        <xh:td>
                            <fr:open-select1 xmlns:xxbl="http://orbeon.org/oxf/xml/xbl" id="control-3-control"
                                             bind="control-3-bind">
                                <xf:label ref="$form-resources/control-3/label"/>
                                <xf:hint ref="$form-resources/control-3/hint"/>

                                <xf:alert ref="$fr-resources/detail/labels/alert"/>
                                <xf:itemset ref="$form-resources/control-3/item">
                                    <xf:label ref="label"/>
                                    <xf:value ref="value"/>
                                    <xf:hint ref="hint"/>
                                </xf:itemset>
                            </fr:open-select1>
                        </xh:td>
                    </xh:tr>
                </fr:grid>
            </fr:section>
            <fr:section id="section-4-control" bind="section-4-bind">
                <xf:label ref="$form-resources/section-4/label"/>
                <fr:grid>
                    <xh:tr>
                        <xh:td>
                            <fr:open-select1 xmlns:xxbl="http://orbeon.org/oxf/xml/xbl" id="control-5-control"
                                             bind="control-5-bind">
                                <xf:label ref="$form-resources/control-5/label"/>
                                <xf:hint ref="$form-resources/control-5/hint"/>
                                <xf:alert ref="$fr-resources/detail/labels/alert"/>


                                <xf:itemset ref="$form-resources/control-5/item">
                                    <xf:label ref="label"/>
                                    <xf:value ref="value"/>
                                    <xf:hint ref="hint"/>
                                </xf:itemset>
                            </fr:open-select1>
                        </xh:td>
                    </xh:tr>
                    <xh:tr>
                        <xh:td>
                            <fr:box-select xmlns="http://orbeon.org/oxf/xml/form-builder"
                                           xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"
                                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                                           id="control-6-control"
                                           bind="control-6-bind">
                                <xf:label ref="$form-resources/control-6/label"/>
                                <xf:hint ref="$form-resources/control-6/hint"/>

                                <xf:alert ref="$fr-resources/detail/labels/alert"/>
                                <xf:itemset ref="$form-resources/control-6/item">
                                    <xf:label ref="label"/>
                                    <xf:value ref="value"/>
                                </xf:itemset>
                            </fr:box-select>
                        </xh:td>
                    </xh:tr>
                </fr:grid>
            </fr:section>
            <fr:section id="section-7-control" bind="section-7-bind">
                <xf:label ref="$form-resources/section-7/label"/>
                <fr:grid>
                    <xh:tr>
                        <xh:td>
                            <fr:yesno-input xmlns="http://orbeon.org/oxf/xml/form-builder"
                                            xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"
                                            id="control-8-control"
                                            bind="control-8-bind">
                                <xf:label ref="$form-resources/control-8/label"/>
                                <xf:hint ref="$form-resources/control-8/hint"/>
                                <xf:alert ref="$fr-resources/detail/labels/alert"/>


                            </fr:yesno-input>
                        </xh:td>
                    </xh:tr>
                </fr:grid>
            </fr:section>
        </fr:body>
    </fr:view>
</xh:body>
</xh:html>

I expect then, that in this example, the submit button is hidden and only appears in the last section, when all the other sections are filled up. But I cannot see the submit button when I reach the end of the form.

I also have tried enabling only a set of buttons adding this line to the properties file:

<property as="xs:string" name="oxf.fr.detail.buttons.*.*" value="wizard-prev wizard-next submit"/>

But the "submit" button in this case is always visible.

Is there something I have skipped?

Answer 1

Yes, this would make a lot of sense. Unfortunately, as of this writing this isn't possible. However, on the bright side, this one of the "top RFE" for the product, so I think there is a good chance that it will be implemented "soon". If you'd like to be notified when there is something new for this, you can subscribe yourself to issue #940: Better way to control buttons visibility/readonlyness.