Tutorial: Adding a Custom Transition Button to a State Form

This tutorial demonstrates how to add a custom transition button to a state form in a location that is different from the standard transition button bar. It also demonstrates how to use a variable for the button label, so if the transition name changes in the workflow, the button label is automatically updated.


Before you start this tutorial, create a new process app from the Application Process App template in the Create New Process App Dialog Box, and add the following states and transitions to the application workflow:
  • In Dispatch ("active" state)
  • In Progress ("active" state)
  • Waiting for User ("active" state)
  • Resolved ("active" state)
  • Closed ("completed" state)
  • Dispatch ("regular" transition from New state to In Dispatch state)
  • Assign ("regular" transition from In Dispatch state to In Progress state)
  • Request Info ("regular" transition from In Progress state to Waiting for User state)
  • Provide Info ("regular" transition from Waiting for User state to In Progress state)
  • Resolve ("regular" transition from In Progress state to Resolved state)
  • Close ("regular" transition from Resolved state to Closed state)

To add a custom transition button:

  1. Click the In Progress state in the workflow editor.
  2. Click the Form tab on the state Property Editor.
  3. Click New in the State form area. In the Form Configuration dialog box, select Based on 'quick form' for: In Progress Regular State.
  4. In the form editor, perform the following steps:
    1. Select the top section of the form, right-click, and then select Add Row Above.
    2. Drag a Button control from the Form Palette onto the new row.
    3. Click the Align right icon in the Alignment section on the Design tab of the Ribbon.
  5. On the Behavior tab of the form Property Editor, perform the following steps:
    1. Select Perform a transition.
    2. Click Add.
    3. In the Add Transition dialog box, make sure the In Progress state is selected, select the Request Info transition, and then click OK.
    4. Select the Show transition name check box. The transition name will be displayed as the button label. If the name of the transition changes in the workflow, the button label will change automatically.
  6. On the Toolbar tab of the form Property Editor, make sure the Remove transition buttons matching custom transition controls check box is selected. This option removes the Request Info transition button from the button bar.
  7. To see the changes you made, click Preview in the Ribbon.
On the custom state form, the custom Request Info transition button is at the top right of the form, and the standard transition buttons (Resolve, Update, and Delete) are in the button bar at the top of the form.