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 bottom action panel while in a Designer Folder.
2. Name the Form and proceed to the Form Designer by clicking CREATE.
3. In the Form Controls tab on the left side, search for Horizontal Timeline or expand the Form Controls > Data category to drag a Horizontal Timeline to the workspace.

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 bottom action bar to create a new Flow that will display the recently created Forms.
13. In the new Flow, add three Add Task steps from Steps > Favorite Steps.
14. On each Add Task step, select Pick or Create Form. Select each new Form and order them chronologically. 
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 FULL.
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.