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 sets the control name. Enter the button label. Select the “Hide” checkbox to hide this widget at runtime. Select the “Read-Only” checkbox to view the widget without making any selections. Enter the pre-prompt and post-prompt message text. Enter the redirect URL after the form has been approved. Click the Save button. 

• Double-click the “Complete Task” widget to configure the “Styling” properties. Enter the CSS syntax. Select 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 tool tip 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, then click the Translate button. 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. Select the “Hide” checkbox to hide this widget at runtime. Select the “Read-Only” checkbox to view the widget without making any selection. Enter the pre-prompt and post-prompt message text. Enter the redirect URL after the form has been rejected. Click the Save button. 

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

• Double-click the “Reject Task” widget to configure the “Other” properties. Enter the tool tip text. Click the Save button. 

• Double-click the “Reject 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, 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 rendered for the end user. Enter the user input, then click the “Complete Task” button to approve. The pre-prompt message is displayed below. Click the OK button to continue. 

• The post-prompt message is shown below. Click the Close button. The page then navigates 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.