Using the Multiple File Upload and Download Components

Overview

Forms in Decisions can contain a Multiple File Upload/Download component that allows for several files to be uploaded or downloaded at once. A common use case would be an end-user uploading Forms, and a back-end user would download them via an Assignment Form. The inputs received from the Form Control can be mapped in a Flow by defining the data as values of the FileData datatype.

Example

This example will demonstrate the above use case, where the end-user uploads multiple files that a back-end assignee receives. The data will move from the Multiple File Upload Form Control, through the Flow, and into the Multiple File Download Form Control to display. 

Begin in a Designer Folder, select the Create Form button from the bottom Action Bar. Select the Default Form template and click Create, name the Form then click Create again.

In the Form Designer, drag a Text Box from the Favorite Components section of the Form Controls panel into the Form workspace. When the Set Data Name popup appears, enter Name and press Shift + Ctrl + Enter to automatically insert a Label for this Text Box to the left. Add another Text Box and in the same manner, set the Data Name to Email and use the keystroke combination to insert a label automatically. 

Collapse the Favorite Components section and expand the Data section of the Form Controls panel. Expand the File section within and drag the Multiple File Upload component into the Form workspace. When the Set Data Name popup appears, enter File Upload and press Shift + Enter to automatically insert a Label above the Multiple File Upload component.

Lastly, expand the Favorite Components section and drag a Button into the Form workspace. When the Set Action Outcome Name popup appears, enter Submit. Compare Form builds with the GIF below, then save and close the Form Designer once complete.

Back in the Designer Folder, right-click the Form that was just created. When the Action Menu appears, navigate to Edit and select Copy Form. Enter a name for the new Form, then click Create.

In the Form Designer, this new Form copied the same Form Controls that were on the Upload Form. This Form is going to retain the same design so that the end-user information can be shown when the Form reaches an assignee. This Form needs to have the Multiple File Upload component and Label removed; the Multiple File Download component will be added in its place from the Data > File section. In addition, this Form needs to have the Submit Button renamed to Approve and another Button named Deny must be added.

Compare Form builds with the GIF below, then save and close the Form Designer once complete. Changes with this Form will not reflect the original Form since they are separate Decisions Objects.

Back in the Designer Folder, select the Create Flow button from the bottom Action Bar. Select the Default Flow template and click create, name the Flow then click Create again.

In the Flow Designer, click the orange arrow on the Done outcome path from the Start step. When the Step Catalog window appears, select the Show Form step from the Favorite Steps section and click Add. When the Default Editor for this step appears, select the Multiple File Upload Form from the right and click Pick.

Click the orange arrow on the Submit outcome path from the Show Form step. When the Step Catalog window appears, select the Show Form step again and add it to the Flow. This time when the Default Editor appears, select the Multiple File Download Form and click Pick. Connect both Download Form outcome paths to the End step for this example. In more advanced use cases, the data can continue along multiple different paths in the Flow.

Select the Show Form (Upload Form) step so that the properties for it populate on the right. Locate the Inputs section of the properties and change the input mapping type of Name and Email from Unknown to Ignore. 

Select the Show Form (Download Form) step so that the properties for it populate. Select the Edit Input Mappings option at the top of the properties. When the Input Mappings window appears, click into the File Upload {FileData[]} cell and drag the cursor into the File Download {List of FileData} cell, then release the cursor to map the value to the input. Click OK once complete, then save and close the Flow Designer. Follow along with the GIF below to confirm the Flow logic.

Back in the Designer Folder, right-click the Flow and select the Run Flow option from the Action Menu. Enter a name, email, and use the Select File(s) button to attach documents appropriate for testing, then click Submit. The Form will appear with the name and email copied in their respective text boxes, and the sample files are attached and available for download right from the Form.