Tutorial: Repeating Transition Buttons at the Bottom of a Long State Form

This tutorial demonstrates how to add custom transition buttons at the bottom of a long custom state form, so users do not have to scroll to the top of the form to click a standard transition button in the button bar. It also demonstrates how to use a single custom transition button for multiple transitions.

Prerequisites:

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:
  • Assigned ("active" state)
  • Work Started ("active" state)
  • In Peer Review ("active" state)
  • In QA ("active" state)
  • Closed ("completed" state)
  • Assign ("regular" transition)
  • Start Work ("regular" transition)
  • Review ("regular" transition)
  • Test ("regular" transition)
  • Close ("regular" transition)

To repeat standard transition buttons:

  1. Create a custom state form. In the Form Configuration dialog box, select Based on 'quick form' for: application Table. (For instructions, see Creating Custom Forms.)
  2. On the Forms tab of the workflow Property Editor, select the form you just created from the Default state form list, then click Edit. The state form opens in the form editor.
  3. On the Toolbar tab of the form Property Editor, clear the Remove transition buttons matching custom transition controls check box. This step is necessary so buttons can be at both the top (button bar) and bottom of the form.
  4. Drag a Panel control from the Container Controls section of the Form Palette to the bottom of the form, and drop it on the green row that appears. The Insert Dialog Box opens.
  5. In the Insert Panel dialog box, select 3 columns, 1 row, and All autoSize. Click OK.
  6. Drag a Button control from the Other Controls section of the Form Palette to each column in the new row.
  7. Select the button in the first column. (This button will be used for all outgoing transitions you added to the application workflow.) Click the Behavior tab of the form Property Editor, and perform the following steps:
    1. Select Perform a transition.
    2. Select Show transition name. This option lets you add a single transition button for all transitions you added to the workflow. The button label changes automatically based on the current state. It also changes automatically if the transition name is changed in the application workflow.
  8. Still on the Behavior tab, click Add. In the Add Transition Dialog Box, perform the following steps:
    1. Select the application workflow and the New state. Because there is only one outgoing transition from this state, the Assign transition is already selected. Click OK.
    2. Click Add again. Select the Assigned state. (The Start Work transition is selected.) Click OK.
    3. Click Add again. Select the Work Started state. (The Review transition is selected). Click OK.
    4. Click Add again. Select the In Peer Review state. (The Test transition is selected.) Click OK.
    5. Click Add again. Select the In QA state. (The Close transition is selected.) Click OK.
    Note: If you do not select Show transition name, you must type the button label in the Display text box on the General tab of the button Property Editor.
  9. Select the button in the second column. (This button will be used to repeat the Update button, which is for a built-in transition and on the standard button bar). Perform the following steps:
    1. Click the General tab of the button Property Editor.
    2. Type Update in the Display text box.
    3. Click the Behavior tab of the button Property Editor.
    4. Select Perform a transition.
    5. Clear Show transition name. This ensures that the label you typed on the General tab will be displayed on the button instead of the transition name.
    6. Click Add. In the Add Transition dialog box, select the [Any] state and the Update transition. Click OK.
  10. Repeat the previous step for the button in the third column, but type Delete in the Display text box, and in the Add Transition dialog box, select the Delete transition. (Delete is also a built-in transition.)
  11. To see the changes you made, click Preview in the Ribbon.
On the custom state form, the transition buttons appear at both the top and bottom of the form. (The standard transition button bar is at the top of the form, and the custom transtition buttons are at the bottom of the form.)