Description:

Form approval buttons are included in a Form for “approval or rejection”. This requires submitting the Form in a process and completing the task as an end user. The method uses a RouteForm step. 

Design:

Example: 

Let’s build and execute the “FormApprovalDef” example.  

• Create a Form definition called “FormApprovalDef.”
• Drag a “BootstrapGrid, Label, Text, and FormApproval” control onto the canvas and arrange them as shown below.

• Double-click the “Complete Task” button to configure the “Settings” properties. Select the button type from the drop-down list, with “Success” as the default. The application assigns the control name. Enter the button label. Check the “Hide” box to hide this widget at runtime. Check the “Read-Only” box to view the widget without making selections. Enter the pre-prompt and post-prompt message texts. Enter the redirect URL after the form has been approved. Click the Save button. 

• Double-click the “Complete Task” widget to set up the “Styling” options. Enter the CSS code. Choose the classes to apply from the global drop-down list. Click the Save button. 

• Double-click the “Complete Task” widget to configure the “Other” properties. Enter the tooltip text. Click the Save button. 

• Double-click the “Complete Task” widget to configure the “Globalize” properties. The application will alert you if there is nothing to globalize, as shown below. Otherwise, select a language from the drop-down list and then click the Translate button. Finally, click the Save button. 

• Double-click the “Reject Task” button to configure the “Settings” properties. Select the button type from the drop-down list, with “Danger” as the default. The application sets the control name. Enter the button label. Check the “Hide” box to hide this widget at runtime. Check the “Read-Only” box to view the widget without making a selection. Enter the pre-prompt and post-prompt message texts. Enter the redirect URL after the form has been rejected. Click the Save button. 

• Double-click the “Reject Task” widget to set the “Styling” properties. Enter the CSS syntax, then choose the classes to apply from the global drop-down list. Click the Save button. 

• Double-click the “Reject Task” widget to set the properties for “Other.” Enter the tooltip text and click the Save button. 

• Double-click the “Reject Task” widget to set up the “Globalize” properties. The application will notify you if there is nothing to globalize, as shown below. Otherwise, choose a language from the drop-down list, then click the Translate button. Finally, click the Save button. 

• Create a Process definition called “FormApprovalDef.”
• Drag a “RouteForm” step onto the canvas. Connect the Start and “RouteForm” steps with the dots.
• Double-click the “RouteForm” step to configure the “Required” properties. Enter a name for the step. Enter the task name. Select the Form definition from the drop-down list. Enter a variable or a global reference to store the Form Instance ID. Click the Save button. 

• Double-click the “RouteForm” step to configure the “Optional” properties. Enter the task description. Select the users to whom you want to route the Form. Set the task priority and completion duration. Click the Save button. 

• Generate and execute a new process instance. The Form is routed to the user as a task. 

• The Form task is prepared for the end user. Enter the user input, then click the “Complete Task” button to approve. The pre-prompt message appears below. Click the OK button to continue. 

• The post-prompt message appears below. Click the Close button, and the page will then navigate to the post-redirection URL as configured.  

Definition Sample:

You may download and extract the sample definition(s) from the link provided, then import them (drag-and-drop) into your FlowWright Process Definition (XML file) or Form Definition (HTML file) page. 

Note: Please verify and complete the process steps for any missing configurations, such as file path references and database connections, after the import. Then, save the definition to confirm the changes. 

Click here to download the sample file.