1. Click the Edit icon for the workflow you want to modify. Change the name to "Example 3 - PO for Sales Review"

2. Add the Sales Review step:

1. Click on the PO form, and then click the Link icon.
2. A linked copy of the PO form, bordered by dashed lines, will be added to the flow. Drag this step below the Client Approval step.
3. Click on the linked PO step, change the name to "Sales Review" by typing it in the Name field on the Properties panel.
4. Type {SalesID} in the User property on the Property panel.
5. Type "Thank you! Your PO has been sent back to frevvo Inc." in the Pending Message property. This is the message the client will see when they click the Send to frevvo, Inc button on the previous step.
6. Type Client: {ClientCompany} in the Task Info property. The Task Info helps the sales person identify the task on the Task List.

7. To customize the task notification email the sales person receives: 

   1. Click on the Setup Task Notification Email link.
   2. Type "Review PO from {ClientName}" in the subject field. You can select the control name from the dropdown to the left of the subject field. Leave the default message. 

   3. Click Finish. 

Click on the Client Approval step and uncheck the Printable property.
3. At this point, your workflow should look like this:
   
4. Click the save/exit icon to save your changes. 

• Click the Test icon. Fill in the PO and sign as the sales person. Click the Send to client button.
• Log out of . 
• Check the email account for the customer. Access the email with the subject "Purchase Order from frevvo", click the link provided.
• Approve and sign the PO as the customer. 
• Click the Send to frevvo, Inc button. 
• Check the sales person's email account. Find the notification email with the subject "Review PO from {ClientName}" and click the link.
• Log in as the designer, click the Perform icon, review the PO then click Send to Manager. Logout.
• Check the manager's email for the notification email with a subject "Approval needed for PO from {ClientCompany}". Click the link in the email.
• Log in as jerry. Jerry's Task List displays. Notice that this task comes from the designer user. 
  
• Click the Perform icon. Note the Manager Approval section displays as specified by the Show/Hide rule.
• Add a comment and sign as the manager. Click Finish.

• The sales person and the client receive emails with the signed/approved pdf. Verify that the pdf shows the Client/Sales information, the Client Service Order details, the Signed Agreement and Manager Approval sections.

Example 5 - PO for VP Approval

Create a user with the role of VP:

1. Click Manage Users on the Manage tenant page

2. Click the  add new user icon which will bring up the Add New User form

3. Enter "ed" as the User Name then enter all the required information.

4. Leave the Reports To field empty

5. Select the VP role from the role dropdown. Click Submit.

6. You should be back on the user list. Logoff.

Modify the PO step:

Add the VP section: 

1. Click the  icon to edit the PO step.
2. Drop a Section control to the bottom of the form

1. 1. Click on the section label and change it to "VP Approval". The control name will automatically become VPApproval.
   2. Uncheck the Visible checkbox
   3. Click the Security tab
   4. Set the Signature property to "Text/Signature Image"
   5. Check the Must Sign property
   6. Drop a textarea control inside the section 
   7. Name it "VP Comments"

Modify the Show/Hide Section Rule:

1. Click the rules icon on the toolbar. We will edit an existing rule so that the VP Approval section is hidden until we get to the VP step. 

2. Click the icon to edit the rule "Show/Hide Sections"

3. Add  these lines into the else if (an === "VP Approval") section:

        ManagerApproval.visible = true;

        VPApproval.visible = true; 

4. Click the arrow to see how the rule should look with these lines added.

   Expand

   Code Block language javascript  if (form.load) { var an = _data.getParameter('flow.activity.name'); if (an === "Client Approval") { Agreement.visible = true; ClientApproval.required = true; ClientApproval.value = null; // Clear for rejection case ClientSignature.value = null; // Clear for rejection case Instructions.visible = false; // Instructions are for internal people } else if (an === "Sales Review") { Agreement.visible = true; } else if (an === "Manager Approval") { Agreement.visible = true; ManagerApproval.visible = true; } else if (an === "VP Approval") { VPApproval.visible = true; ManagerApproval.visible = true; Agreement.visible = true; } }

5. Click the save/exit icon to save the changes to the PO form.  

Modify the workflow:

1. Create a new linked step from the PO step.
   1. Drag it to the end of the flow.
   2. Type "VP Approval" in the Name property.
   3. Select VP from the Role list 
   4. Set the Pending Message property to "PO sent for VP Approval". 
   5. Type "Client:  {ClientCompany}" in the Task Info property. 
      

   6. To customize the task notification email the VP receives, click the  Setup Task Notification link.

      1. Type "VP Approval needed for PO from {ClientCompany}" in the Subject field. Leave the default message. Click Finish.
2. Click to select the Manager Approval step.
   1. Uncheck the Printable property.
   2. Set the Continue Label property to "Send to VP". 
3. At this point, your workflow should look like this:
    
4. Click the  save/exit icon to save your changes. 

Test Example 5:

Modify the workflow:

1. Click on Sales Review step
   1. Click the Setup Approval/Rejection link.
   2. In the Quick Approve section, check the Enabled checkbox.

   3. Copy the text below into the Summary:

      Code Block
      {ClientName} from {ClientCompany} has approved the PO for {TotalAmount}!!!

   4. Select Sales Approval from the Approval Control dropdown.
   5. Click Submit.

2. Click the   save save/exit icon to save the changes to the flow.

Test Example 12:

1. Test the flow to the Client Approval step. Approve the PO.
2. Logon as the sales person (designer).
3. Click My Tasks. 

4. Click the Image Modified quick view icon. The Quick Approval screen will display.

    
   
   

5. If the client did not approve the PO and sent it back to frevvo with comments, the Sales Person can click the Details button to view those remarks.
6. Notice the text we added as the Quick Approval summary appears at the top.
7. Add a comment and click Approve. You will see the message "Task Successfully Approved"
8. Complete the flow.

Example 13 - PageBreak

for Mobile

What do you have to do to run the PO flow on an iPad or iPhone? Nothing!!!!  automatically breaks up the form into steps and adds Back and Next buttons.  uses the device’s features to make the mobile experience easier for the user e.g. specialized keyboards. 

If you want to specify where the logical breaks are, you can use the PageBreak control to break the PO step into small logical pieces. For example, our PO has Instructions, Sales Information, Client Information and Client Services Order sections. In this example, we will use the PageBreak control to display the Instructions, Sales and Client Information sections on the same screen on an iPad and and on two separate screens on a smartphone. We will add another PageBreak control to display the Client Services Order section on a separate screen on both devices.

Modify the PO step: 

Copy Example 12. Rename the copy Example 13 - PageBreak : Mobile

1. Click the PO step then click the  Image Modified edit icon.
2. Click the show/hide page breaks icon in the toolbar once. Pagebreak controls in the PO form will display.
3. Click on the PageBreak control below the Sales Information section. Notice this PageBreak is only set up for the iPhone. 
4. Drop a PageBreak control from the palette above the message control "Travel and expense will be invoiced on a cost basis and are payable upon receipt of invoice.".

5. Uncheck Tablet so this will only add a page break when the form is viewed on a smartphone.

6. Click the   savesave/exit icon to save the changes to the PO form.   

7. Click the   savesave/exit icon to save the changes to the flow. 

Test Example 13:

1. Click the Test icon. This is the desktop view. You will see all of the sections on the same screen. 

2. Click the Tablet icon at the top. The Instruction, Sales Information and Client Information display on the same screen, as expected, since the first PageBreak was setup to be recognized on the phone and not the tablet,  The second PageBreak was setup to be recognized by the phone and the tablet so you will have to click Next, to see the Client Services section.

3. Click the Phone icon at the top. You will see the Instructions and Sales Information sections only. The first PageBreak was setup to be recognized on the phone so you will have to click Next, to see the Client Information section.  The second PageBreak was setup to be recognized by the phone and the tablet so you will have to click Next, to see the Client Services section.    

Example 14 - Fast Finish

In this example, we will switch to an Employee Onboarding workflow to demonstrate the Fast Finish feature. This feature adds a Finish button that allows the user to fast forward through a screenflow. It is very useful if your screenflow contains a lot of steps. Let's consider this scenario:

A new employee starts their first day at your company and needs to provide their information. The employee is handed an iPad with a link to an Employee Onboarding workflow that is used to collect basic information,  W - 4 allowances and Education information. When completed,  the new employee clicks the Continue button and the flow is routed to their manager for approval. If approved by the manager, the flow is routed to HR for final processing.

Imagine the employee completes the flow through the Confirmation step and then decides to navigate back to make a change to the Employee Information step. Without a fast finish button the screen flow will make the user review each step  - Employee Info, W-4, Education Info and Confirmation in order to submit the forms to the manager for approval. But by adding Fast Finish the new employee can now click on the Finish button and (as long as all required fields are complete and valid in all other flow steps) immediately submit the forms to the manager for approval.

We will use the Navigation toolbar at the top to navigate back and forth between the steps of the flow. We will configure Fast Finish on the first three steps. We will also need to add another role, HR and another user, Pam who has the HR role, to test it.

Add a Role and User:

1. Login as your tenant admin.

2. Create a new role -  HR.

3. Add a new user pam and give her the role HR. Logout.  

Modify the workflow:

1. Login as the designer.  Edit the Purchase Order application.
2. Make a copy of the Employee Onboarding flow. Name the copy Example 14 - Fast Finish
3. Click on the Employee Information step.
   1. Check Fast Finish on the Property panel.
4. Click on the Allowances step.
   1. Check Fast Finish on the Property panel.
5. Click on the Education step.
   1. Check Fast Finish on the Property panel.

6. Click the   savesave/exit icon to save the changes to the flow.  

Test Example 14:

1. Click the Test icon.

2. The Employee Information step prefills the user name and uses the Geo-location feature to capture the user's location.  All browsers will show a pop up asking the user's permission to use their location. Click  to give permission.

3. Fill in the other required fields. Click Continue.

4. Fill in the W - 4 Allowances. Notice the Total Allowances field is updating as you enter values for the other allowances. this calculation is done using a business rule. Click Continue.
5. Fill in the Education Information step. Notice if you check "yes"  for the "Permission to access college transcript" question a table requesting additional information displays. This is controlled by a show/hide business rule. Click Continue.
6. On the Confirmation step, click Review the pdf. The W - 4 will open in a separate browser tab merged with the data you entered.  This is an example of the  pixel-perfect PDF generation feature.
7. While reviewing the pdf, you realize you made a mistake when entering your social security number.  Close the pdf.
8. Click the Employee Information step in the Navigation toolbar at the top.
9. Make a change to the SSN. Click the Finish button.
10. The flow will skip the Allowances and Education information steps and return you immediately to the Confirmation step.
11. Review the pdf to verify the updated SSN is now displaying. Close the pdf.
12. Sign then click Send to Manager.
13. Login as Jerry. Perform the task. Add a comment and sign. Click Send to HR.
14. Login as Pam and complete the flow.  

Example 15 - Summary

In this example, we will add a Summary step to the Employee Onboarding flow. This will simply display a Summary view of all the data that has been entered into the various steps of the flow prior to the Summary step. Previously completed steps in a workflow can be viewed by all users but editing data is only allowed for the currently logged in user. Clicking on the Details button navigates to the selected step for viewing/editing. 

We will change the Navigation property to a different format and use the Summary step to navigate back to a previous step.  

Modify the workflow:  

1. Login as the designer.  Edit the Purchase Order application.
2. Make a copy of Example 14. Name the copy Example 15 - Summary
3. Click on the toolbar to display the flow property panel. Select "Percent" from the Navigation dropdown. 
4. Drag a Summary from the palette and drop it in between the Education Information and Confirmation steps.

5. Click the   savesave/exit icon to save the changes to the flow.  

Test Example 15:

1. Click the Image ModifiedTest icon.
2. Run the flow. Notice the percent completed is displayed at the top
3. On the Summary step, click the Details button on a previous step to view the entered data.
4. Change a value in one of the fields.
5. Click the Continue button on the rest of the steps.
6. Complete the flow.

Example 16 - Save on Navigate

Imagine a large workflow with many steps - let's say 30. You are filling in the screens  and when you get to screen 25 you accidentally close your browser! None of the entered information is saved and you will have to begin all over again. Unless you check the Save on Navigate checkbox for the flow.  This feature will automatically save the flow to your Task List. When you click the Perform icon to open up the task returns you to the last step where data was being entered. If you navigate to previous steps, all entered data displays.

Modify the workflow:  

1. Login as the designer.  Edit the Purchase Order application.
2. Make a copy of Example 15. Name the copy Example 16 - Save on Navigate.
3. Click on the toolbar to display the flow property panel. Select "Navigation Toolbar" from the Navigation dropdown. 
4. Check the Save on Navigate checkbox to turn this feature on.

5. Click the   save/exit icon to save the changes to the flow.  

Test Example 16:

1. Click the Image ModifiedTest icon.
2. Fill in the Employee Information and Personal Allowances steps in the New Employee Onboarding workflow.
    
3. Fill in the first column of the first row of table on the Education step.
   
4. Close the browser.
   
5. Login as the designer.
6. Click My Tasks. The unfinished task will be on your Task List.
   
7. Click the Image Modified Perform icon. returns you to the step where you left off.
   
8. Continue entering data from this point to complete the flow.