How to add a custom button, such as a Cancel button

Process Design Form Designer
1

Overview

By editing the form HTML source code, you can add another button (such as Cancel button), next to the Submit and Save as draft buttons.

image
image.png942×242 5.51 KB

Update the form HTML

Important: Be careful when manually updating the FORM_HTML data; you should create a backup before modifying it.

  1. Click the FORM_HTML data in the Data tab.

display%20data%20form

  1. Click the pencil icon to display the content.

display%20code

  1. Add your button code after the saveAsDraftButton button. (You can use the following code example below).

  2. Save and close, then go back to the Form tab and click the Save button.

Button example

<div class="Button">
    <input id="cancelButton" style="" onclick="cancelButton_Click" type="button" value="Cancel">
</div>

Configure the click event for the new button

Once your button is added, you need to add a function in the .NET code behind. You can use the following example:

protected void cancelButton_Click(object sender, EventArgs e)
{
    // Your code... 
    // If you modify the form field's value then you have to call the instruction below at the end.
    // this.SaveFormData(this.FormData, true);

    SubmitToWorkflow(true); //Use this code line to submit the form
}