Adding a Timeline to a Series of Forms

Overview

A timeline is a helpful feature to show on a Form when a series of Forms need to be filled out by a user.

Example

A timeline keeps the user informed about what steps in a submission process have been completed or which steps are next; this example shows a timeline set up for a request process.

1. First, create a Form by selecting CREATE FORM from the Top Action Panel while in a Designer Folder.
2. Name the Form and proceed to the Form Designer by clicking CREATE.
3. In the Toolbox tab on the left side, search for Horizontal Timeline or expand the Toolbox > Data category to drag out a Horizontal Timeline. Place on the Form.

4. With the Horizontal Timeline selected, change the INPUT > Source to DefineStates in the Properties panel. 

5. Change the boolean Is Static from false to true. 

6. Input New Request, Applicant Status, and Terms and Conditions under INPUT > States. 

7. Next, INPUT > Current State will be New Request. The Current State refers to the step in the submission process the user is currently on; the Current State on the Form will be highlighted in the Horizontal Timeline.
   

8. A Label [Request Name], Text Box, and a Button [Next] will be added to the Form [First Form].
   

9. Next, Save and Close the Form [First Form].

10. Create a second Form [Second Form] using the previous steps.

    1. When adding the Horizontal Timeline feature, as shown above, the INPUT > States will remain the same.

    2. On this Form [Second Form], the INPUT >  Current State will be Applicant Status.

    3. A Label [Email Address], Text Box, and a Button [Next] will be added. 

    4. Save and Close.

11. Create the third Form [Third Form] using the previous steps.
    1.  When adding the Horizontal Timeline feature, the INPUT > States are the same as above.
    2.  INPUT > Current State will be Terms and Conditions.
    3. A Check Box [I Agree] and a Button [Finish] will be added.
    4. Save and Close.
       
12. In the Designer Folder, select CREATE FLOW from the Top Action Panel to create a new flow that will display the recently created forms.
    
13. In the new Flow, add three Add Task steps from the Toolbox > FAVORITE STEPS.
14. On each Add Task step, select PICK OR CREATE FORM. Select PICK, toggle RECENT, and repeat until each new Form is shown in the new Flow.
15. Connect last Form [Third Form] to the End step.
16. Set the INPUTS on each Form to an Ignore mapping.
    

Debug

1. Save and select Debug from the Top Action Panel.
2. Click START DEBUGGING.
3. Input a Request Name and select Next. On the first Form, type 'Vacation'.
4. Next, input an Email Address and select Next. On the second Form, type "admin@decisions.com".
5. Lastly, change the boolean I Agree from false to true and click Finish.
6. The Flow runs through the Debugger successfully.