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 to 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 setting. The application configures the control name. Provide the button label.  Select the “Hide” checkbox to hide this widget during runtime. Select the “Read-Only” checkbox to view the widget and not make any selection. Provide the pre-prompt and post-prompt message text. Provide the redirect URL after the form has been approved.  Click the Save button. 

• Double-click the “Complete Task” widget to configure the “Styling” properties. Provide the syntax for the CSS styles. 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. Provide the tool tip text information. 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 the language from the drop-down list and 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 setting. The application configures the control name. Provide the button label.  Select the “Hide” checkbox to hide this widget during runtime. Select the “Read-Only” checkbox to view the widget and not make any selection. Provide the pre-prompt and post-prompt message text. Provide the redirect URL after the form has been rejected.  Click the Save button. 

• Double-click the “Reject Task” widget to configure the “Styling” properties. Provide the syntax for the CSS styles. 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. Provide the tool tip text information. 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 the language from the drop-down list and click the Translate button. Click the Save button. 

• Create a Process definition called “FormApprovalDef.”
• Drag a “RouteForm” step to the canvas. Connect the dots with the Start and “RouteForm” steps.
• Double-click the “RouteForm” step to configure the “Required” properties. Provide a name for the step. Provide the task name. Select the above Form definition from the drop-down list. Provide 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. Provide the task description. Select the users to whom you want to route the Form. Provide 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 to the end user. Provide the user input and 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 displayed below. Click the Close button. The page navigates to the post-redirection URL as configured.  

Definition Sample:

You may download and extract the sample definition(s) from the link here and later import them (drag-and-drop) to 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 import. Then, save the definition to confirm the changes. 

Click here to download the sample file.