How do I implement a cancel button in Cocoon Forms?

There are two kinds of "buttons": actions and submits. Actions are internal to the form, and thus always redisplay it, whereas submits are intended to exit the form.

A <fd:submit> normally tries to validate the form and will redisplay it in case of validation error, unless it has the validate="false" attribute. A cancel button will have this attribute set to false, and we will use the value of form.submitId to distinguish the ok and cancel buttons.

In the form definition, add the declaration of ok and cancel buttons:

    <fd:submit id="cancel" validate="false">
      <fd:label>Cancel</fd:label>
    </fd:action>

    <fd:submit id="ok">
      <fd:label>OK</fd:label>
    </fd:action>

In the flowscript, after the form.showForm function returns, you can check what button the user pressed using form.submitId:

    var form = new Form("myform.xml");
    form.showForm("myform-display-pipeline");

    if (form.submitId == "cancel") {
      // the user pressed cancel
    } else if (form.submitId == "ok") {
      // the user pressed ok and the form is valid
    }