What You will need:

You need either a Live Forms Online account -- signup for a 30 day trial if you don't already have an account. Or use a working Live Forms In-house software installation. If you are using In-house software you will also need to create a tenant, add a designer user to that tenant and configure email. 

Example Applications

There are 2

 applications that can be downloaded to help with this tutorial:

• Download PurchaseOrderCompleted_app.zip if you want to view the completed workflows discussed below. 

• Download PurchaseOrder_app.zip if you want to build each example workflow yourself as you progress through the tutorial.

In either case, you must upload the application(s) to your 

 user account. Follow these steps:

1. Log into your tenant as the designer user.

2. Click the

   Open

   

   Upload icon at the top of the Application Home Page. 

3. Browse for the downloaded application zipfile (PurchaseOrderCompleted_app.zip or PurchaseOrder_app.zip).

4. Do not check the Replace or Copy checkboxes.

5. Click the Upload button.

The application is uploaded and immediately appears in your list of applications. 

Example 1 - Purchase Order workflow

Let's begin by creating a simple screenflow consisting of the Client and Services forms that the sales person will use to create the Purchase Order. A screenflow is a type of workflow where all the steps are filled in by the same 

 user. The Client form contains a read-only information section (first name, last name, and email) that will be automatically populated with the sales person's information using a business rule and a second section to collect information about the customer requesting the services. The Services form contains fields to describe the requested services and business rules to calculate the cost. 

We will add a form action to customize the message displayed to the sales person when the workflow is completed. 

Create the Purchase Order workflow

To create this workflow, follow these instructions:

1. Click the

   Open

   

   Edit icon for the Purchase Order application.

2. Click the Flows tab to open the Flows home page.

3. Click the New

   icon to create a new flow. Click on the toolbar to display the flow properties panel.  Type "Example 1 - PO Screenflow" in the Flow Name field.

4. If the Palette is contracted, click in the header to expand it. Drag the Client form from the palette and drop it on the flow designer canvas. This form will be the first step in the flow.

5. Drag the Services form from the palette and drop it below the Client form. The Services form will be the second step in the flow.

6. Click on the

   what does the user see icon in the tool bar to customize the message the sales person will see when the flow is completed: 

   1. Click on the Display Message wizard. Copy the message below into the Message box then click Finish. {ClientName} and {ClientCompany} are examples of templates. Templates are specified by surrounding the name of a control in your form with curly braces.

       will use the values entered into the Client Name and Client Company fields at runtime.  
      The Purchase Order for {ClientName} at {ClientCompany} is complete.

       

7. At this point, your workflow should look like this:

   Open

   

8. Click the

   save and exit icon to save your work. 

   If you want to see the details of the forms, click on a step in the flow designer then click the

   Open

   

   Edit icon on that step. The form will display in the forms designer. You can view the business rules by clicking on the 

   Rules icon.

Test Example 1:

• Click the 

  Open

  

  Test icon for your workflow. Note the Creation Date, sales person's first name, last name and email address are automatically populated. 

• Fill in the customer contact name, email address, company name and phone number. Empty controls displaying a yellowish background are required. Required controls must contain valid data in order to continue to the next step and submit the form. 

• Click the Continue button to proceed to the next step.

• Fill in the Client Services Order.  Notice the Amount and Total Amount columns calculate the cost. These calculations are handled by business rules already setup in the PO form.

• Fill in at least two rows of the Client Services table. Delete a row - notice the amount previously calculated for this row is automatically subtracted from the Subtotal and the Total.

• Sign the form as the sales person (designer user) - you can use your mouse or type the name into the Type Name field.

• Verify that the Date Signed field is populated with the current date.

• Click the Finish button. You will see your customized display message.

• If you want to see how the workflow will look on an iPad or an iPhone, close the window, click the 

  Open

  

  Test icon again then click the Tablet or Smart phone buttons at the top of the test screen.
  
  
  

Example 2  - Send the PO for Signature

This workflow sends the Purchase Order electronically to the customer for their review and signature.

• The customer's email address is entered by the sales person on the first step.

• An email is sent to the customer with a link to the PO.

• The customer clicks the link to review the PO, approves and signs it or sends it back to the sales person for corrections.

• sends a copy of the signed PDF to the sales person by email. 

Note, the customer does not have to be logged into a

 tenant (anonymous) to perform the Approval step. 

We will create a new workflow that can be modified for subsequent examples in this tutorial. The workflow will have:

• An anonymous Email for the step that the customer signs.

• Customized messages for Task notification emails to the customer and sales person.

• A document action to send an email to the sales person and the client. A signed PO is attached to the email when the workflow is completed.

You will need at least one valid email address to test this workflow.  

Create the Purchase Order workflow:

We will replace the Client and Services steps with a single step using a form named PO. The PO form contains these additions:

• an Agreement section that the customer can sign

• a business rule to show and hide the Agreement section based on the step of the workflow being executed

• a business rule to prefill the DateSigned field when the customer signs

• a business rule to make the signature field required if the customer checks "yes" on the approval control

Follow these instructions:

1. Click the

   Open

   

   Edit icon for the Purchase Order application.

2. Click the Flows tab to open the Flows Home Page.

3. Click the New

   Open

   

   icon to create a new workflow. Click on the toolbar to display the workflow properties panel.  Type "Example 2 - Send the PO for Signature" in the Flow Name property on the left.

4. Drag the PO form from the Palette and drop it on the flow designer canvas. The PO form will be the first step in the workflow. 

   1. Click on the PO step. Make sure the printable property is checked on this step. We are creating our flow using the linked steps design pattern. Checking the printable property on the original form guarantees that the original form and any linked steps in the flow are included in the pdf.

   2. Type "Send to client" in the Continue Label property.

   3.  Click the

      Open

      

      Link icon to create a copy of this step. A linked copy of the PO form (dashed border), is added to the flow.

5. Click on the linked PO step:

   1. Change the name to "Client Approval" by typing it in the Name field in the Properties panel.

   2. Type "Send to frevvo, Inc" into the Continue label property to change the text to something more meaningful.

   3. Click the Setup Approval/Rejection link, uncheck the Reject to here and Reject from here checkboxes. The Reject button feature will be discussed in a later example.

6. Drag the Email from the Palette and drop it in between the PO and Client Approval steps. 

7. Click on the Email step. 

   1. Enter the template {ClientEmail} into the Email address property. ClientEmail is the field in the Client form where the sales person enters the email address of the customer.

      sends  the PO to the email address entered in that field. This is an example of a template. Note the control name is encased in curly braces.

   2. Enter  "Purchase Order Sent to {ClientEmail} for Signature" in the Pending Message property. This will be the message that the sales person sees after they click the Continue button. 

   3. Click on the Setup Task Notification Link. Type the subject for the email - "Purchase Order from frevvo". Copy the text below into the message field to replace the existing message. This is the email the customer receives.

   {ClientName}, <br/><br/> Please review and sign this Purchase Order from frevvo Inc. by clicking on <a href="{task.notify.url}">this link</a>. <br/><br/> Thank You.

8. Click Finish.

9. Configure the email the sales person receives:

   1. Click the

      Open

      

      what happens to my data icon on the toolbar.

   2. Click on the Email data to a specified address wizard. 

   3. Enter {SalesEmail} and {ClientEmail} in the To: field. Separate them with a comma. Ex: {SalesEmail},{ClientEmail}

   4. Select PDF from the Send Snapshot dropdown. This adds a pdf to the email after the customer approves it or requests corrections.

   5. Uncheck the Send Data checkbox.

   6. Click Next

   7. Enter "Purchase Order for {ClientName} at {ClientCompany}" in the subject field.

   8. Copy the text below into the message field to replace the existing message.

      The Purchase Order from {ClientName} at {ClientCompany} is attached. Please review. <br/> Thank You.

   9. Click the Finish button.

10. Customize the message the client will see when they click the Send to frevvo, Inc button.

    1. Click on the

       what happens to my data icon in the tool bar. 

    2. Click on the Display Message wizard. Enter "The Purchase Order for {ClientName} at {ClientCompany} was saved.".

    3. Click Finish.

11. Change the visibility of the workflow to public so the customer (anonymous user) can access it. To do this: 

    1. Click the

       lock icon on the toolbar. This will pop up a window where the designer can specify permissions.

    2. Change the Visibility from “Public in Tenant” to “Public” for the Permission “Who can use the flow”.

    3. Click Finish.

12. At this point, your workflow should look like this:  

    Open

    

                   

13. Click the

    Open

    

    save and exit icon to save your work. 

If you want to see the details of the forms, click on a step in the flow then click the

Edit icon on that step. The form will display in the forms designer. You can view the business rules by clicking on the 

Rules icon.

Test Example 2:

• Click the 

  Open

  

  Test icon for your workflow. Click the

  Open

  

  blue right arrow to expand the Instructions section. This section is only visible to internal employees of the company.

• Fill in the the PO.

• Click the Continue button to proceed to the next step.

• Fill in the Client Services Order, click the Sign this section button to sign the form as the sales person. 

• Click the Send to Client button. You will see your customized pending message. 

• Log out of

•  sends a notification email with your customized subject/message to the email address specified in the Primary Contact Email Address field on the first step. 

• Open the customer's email with a "Purchase Order from frevvo" subject. Click on the link provided.

• The customer will see the completed PO and a section where they can sign to approve the PO or send it back if corrections are needed.

• Approve the PO for now. We will cover rejecting the PO in a later step. Sign as the customer. Verify the Date Signed field is populated with the current date after signing.

• Click the Send to frevvo, Inc button. You will see your customized message.  

• The sales person and the client receive an email "Purchase Order for {ClientName} at {ClientCompany}" at the subject.

• Open one of the emails and click on the pdf. Verify the Client Information, Client Services details and the Agreement section with the customer's signature are included.

If you want to see the details of the forms, click on a step in the flow then click the 

Edit icon on that step. The form will display in the forms designer. You can view the business rules by clicking on the 

Rules icon.

Example 3 - PO for Sales Review

Now that we have a workflow that sends the PO to the customer for approval, we can quickly modify it to send the Approved PO back to the sales person after signing. The sales person receives an email with a link to their task list. The

 Task List is like an email inbox where users can find all the tasks requiring their attention. In this example, the sales person will access their Task List, review the signed PO and complete the workflow.  

The PO form has a hidden field that is populated with the

 user id of the sales person by a business rule. We will add a step to the workflow that uses the information in this field to route the workflow back to the sales person. We can also customize the Task List notification email that the sales person receives.

Also, in order to be able to use data from the PO workflow to search submissions and tasks, we will define the fields that we want to use as search criteria using the Setup Searchable/Summary fields wizard. 

Modify the workflow

If you want to keep the Example 2 workflow intact, download it by clicking the 

download icon on the Flows Home page then upload it to make a copy. Make these changes to the copy. Or you can simply edit Example 2 to create this workflow.

1. Click the 

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

2. Set up the fields from the flow to use as task and submission search criteria. For example, if we define the control named ClientCompany as a searchable field then we can search for Purchase Orders that were submitted by a particular company. 

   1. Click the Setup Searchable/Summary fields link on the Flow Properties panel. 

   2. Minimally, move the Client Company, Client Name and Total Amount fields from the Available Fields column to the Searchable Fields column. Add/remove any other fields that you want to define as Searchable Fields.

   3. Click Finish.
      
      

       .
       

3. Add the Sales Review step:

   1. Click on the PO form, and then click the

      Open

      

      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. 

4. At this point, your workflow should look like this:

   Open

   

5. Click the

   save/exit icon to save your changes. 

Test Example 3:

• Click the 

  Open

  

  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 notification email, click on the link provided.

• Approve the PO. Sign as the customer. 

• Click the Send to frevvo, Inc button. You will see your customized pending message. 

• Check the sales person's email account. Click the link in the notification email.

• Log into

   as the designer.

• The designer's Task List displays. Notice the task came from an anonymous user and where the Task Info displays on the Task List.

  Open

  

• Click the

  Open

  

  Perform icon.

• Review the PO and click the Finish button.

• Check the email account for the sales person. Verify that the pdf shows the Client and Sales information, the Client Service Order details and the Signed Agreement section.  

Example 4 - PO for Manager Approval

In this example, we will add another linked step to route the workflow to the sales person's manager for approval. We will need to add a Manager Approval section to our PO step then update a business rule to hide this section until the Manager Approval step is performed. A customized Task Notification email will alert the manager that there is a task requiring his attention. 

We will need to create a new user (manager) in 

 and edit the designer user to specify the manager as the person the designer user reports to. Then we can route the workflow to the manager using {subject.report.to}. This is an example of built-in data that 

 makes available for every transaction.

Create/Modify Users:

Users can also only be created by the tenant administrator.  The steps are: 

1. Log on to 

    as the tenant admin.

2. Click Manage Users on the Manage tenant page

3. Click the

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

4. Enter "jerry" as the User Name then enter all the required information - leave the Reports To and Roles fields empty. Click submit

5. You should be back on the user list - click the

   edit user icon for the designer user.

6. Select jerry from the Reports To dropdown. Click Submit.

Modify the PO step:

Log back in as the designer user. Make a copy (download/upload) of Example 3 and name the new flow "Example 4 - PO for Manager Approval".

Add the Manager Approval section: 

1. Click the

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

Modify the Show/Hide Section Rule:

1. Click the 

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

2. Click the 

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

3. Add  ManagerApproval.visible = true; into the else if (an === "Manager Approval") section. Click the arrow to see how the rule should look with this line added.

4. Click

   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  "Manager Approval" in the Name property.

   3. Type "{subject.reports.to}" in the User property. 

   4. Type "PO sent for your Manager's Approval"  in the Pending Message property. 

   5. Type "Client:  {ClientCompany}" in the Task Info property.

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

      1. Type "Approval needed for PO from {ClientCompany}" in the Subject field. Leave the default message. Click Finish.

2. Click to select the Sales Review step.At this point, your workflow should look like this:

   1.  

      1. Type "Send to Manager" in the Continue Label property. 

   Open

   

    

    

3. Click the 

   Open

   

   save/exit icon to save your changes. 

Test Example 4:

• Click the 

  Open

  

  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 

  Open

  

  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. 

  Open

  

• Click the

  Open

  

  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

In this example, we will add another linked step to route the workflow to the VP for approval. We will need to add a VP Approval section to our PO step then update a business rule to hide this section until the VP Approval step is performed. A customized Task Notification email will alert the VP that there is a task requiring his attention. 

We will need to create a new role (VP) and a new user with the VP role in 

. Then we can route the workflow to any user that has the role of VP if approved by the manager. This is an example of routing a workflow using a 

 role. 

Create the VP role:

Roles can only be created by the tenant administrator.  The steps are:

1. Login to 

    as the tenant admin. 

2. Click the Manage Roles link.

3. Click the

    plus icon.

4. Type "VP" into the role name and click Submit

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:

Log in as the designer user. Make a copy (download/upload) of Example 4 and name the new flow "Example 5 - PO for VP Approval".

Add the VP section: 

1. Click the 

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

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.

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 

   Open

   

   save/exit icon to save your changes. 

Test Example 5:

• Click the 

  Open

  

  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

  Open

  

  Perform icon, review the PO then click Send to Manager. Logout.