Workflow Soluiton

This article will discuss how to add multiple attachments to a Workflow or Web Form project, save them to a file system, record their location in a database and recall them for viewing.

Database Table Creation

The first step we will discuss is creating the database table where the file information will be stored. We will need to do this step first so we can create the Workflow Integration project that will be used to insert into and later retrieve the file information from the database. At a minimum, we will use the following as columns in our table to reference our files:

      [fileName] [varchar](max) NULL,

      [fileURL] [varchar](max) NULL,

      [filePath] [varchar](max) NULL,

      [fileDescription] [varchar](200) NULL,

      [fileSize] [int] NULL

You may also need to add a reference column so that you can make reference to a related table in your project. In this example we will add an integer column called [RelatedTicketNumber] that will reference a column of the same name in the master table our Workflow\Web Form project uses. This will allow us to insert or retrieve the file information in our project tied to a certain ticket number.

Integration Project Addition

Once your database table is created, you will now need to add a new Integration Project or modify the existing one related to your project (assuming it’s a Multiple Generator Container type of Integration project) and add a “SqlTableGenerator”.

Select “Use and populate Project property. For the Project Property Name, insert the name of the Database where your table is located in front of the default ‘ConnectionString’ (Example: MyDatabaseConnectionString) then click Next.

For the ‘Components category’, type Custom.Attachments. This will locate the component we are creating, inside the Workflow Designer Toolbox, under the Category “Custom | Attachments”. This makes it easier to locate the component when editing the project. Also give it a descriptive ‘Database entity class name’ such as “Attachments”. This is the data type that will be associated with the variable we use for this component. Finally, leave all checkboxes unselected except ‘Write Records’. Click ‘Next’ then ‘Finish’ and OK your way out and compile or recompile your Integration project.

Workflow/Web Form Project Editing – Embedded Model

We will now start adding the needed components to our project. To start with, the project in this article is going to use ListBox component inside of a form to list attachments as they are being added to a project. To add attachments to the project, a SubDialog component will be used. Before we start adding these however, we want to initialize the variables we’ll be using. The process is going to use an array variable name “Attachments”, of data type ‘Attachments’ (created in our integration project) and an array variable name “FileList”, file data type ‘FileDataType’. These will be initialized inside of an embedded component before the form, as shown below:

To setup the Embedded component to initialize these variables, right-click the component and select ‘Edit Component’. Then click the ellipsis button to the right of ‘Output Data’ and you should see a screen similar to the following (except it will probably be blank):

You will need to click the “Add” button. In the Name column type your variable name (Ex: Attachments) and then click the ellipsis button in the Type column. This is where you specify the Data Type for the variable. For the Attachments variable, you will need to locate the name of the Integration Project that you added the Attachment SQL Table Generator into earlier in this article. For the fileList variable, the FileDataType data type should be located at the top of the list. Make sure to check the Array check box for both of these variables. Additionally, click the ‘Null Allowed’ check box for the Attachments variable. Click OK when done.

In the Embedded Model editor, click the ellipsis button to the right of Embedded Model. You will see a model with a Start and End component if this is a new Embedded Model. What you want to do is add two “Add New Data Element” components to this model. Below is an example of how this model will look with those added:

You will need to edit these two new components and set the Data Types (‘Attachments’ and ‘FileDataType’, check the “Is Array” checkbox and specify the Variable Names (‘Attachment’ and ‘fileList’). Once those are setup, double-click the ‘End’ component and map the values by clicking the ellipsis button next to the variable name, selecting ‘Value From Data’, clicking the ellipsis and then selecting the variable of the same name and clicking OK.

The embedded model should now be setup with our initialized variables and we can proceed to setting up our components in our form.

Workflow/Web Form Project Editing – Attachments Form

 We will be adding three components inside of a Form Builder component: ListBox component, SubDialog component and a Button component, as shown below.

Edit the ListBox component to set the following properties:

Edit the Button component and under the ‘Appearance’ tab, set the ‘Text’ to “Remove File”. Then click the ‘Functionality’ tab and set the ‘Path’ to “Remove Selected File”. In the Output Data Setup section, click the ellipsis button to the right of ‘Required Data Component IDs’ and check only the ListBoxComponent[SelectedFile], as shown below:

Edit the SubDialog component and on the Appearance tab, set the ‘Text’ field to “Add File(s)”. Click the Visual Mode tab and make sure it is set to ‘Button’ if it isn’t already. Click the Functionality tab and set the ‘Opening Mode’ to “In Virtual Window” and set the Window Width and Window Height values to values slightly less than the parent form. Also put a check in ‘Post Current Data Before Opening’. Once done, click the User Interaction tab and click the ellipsis button to the right of Forms Model.

When you initially open the SubDialog Forms Model, you will see just a Start and End component. The following image shows how this model will eventually look:

Workflow/Web Form Project Editing – Attachments Form SubDialog model

1. Drag a VariableExistsRule component into your model and rename it ‘Attachments Exist?’. Edit the VariableExistsRule component and check both the ‘Pick Definition From Current Model’ and ‘Declare Variable Added If Exists’ checkboxes. For the ‘Variable Definition’ dropdown, set it to the “fileList” variable we initialized earlier.
2. From the ‘True’ path of the VariableExistsRule component, add a ‘Copy Data Element to New Location’ component and rename it as ‘init undoAttachments’. Set the ‘Data Type’ to the FileDataType and check both ‘Is Array’ and ‘Deep Copy’. For the Input, set the ‘Data From Variable Name’ to “fileList”. For the Output section, set the ‘Assign To Variable Name’ as “undofileList”. This component allows us to revert to the original fileList if needed.
3. Add a FormBuilder component and connect both the ‘init undoAttachments’ (Copy Data Element to New Location component) and the ‘Attachments Exist?’ (VariableExistsRule component) to this new Form Builder component.

Edit the Form Builder component and add the following components:

• 3 Button components. Label them as ‘Cancel’, ‘Submit Files’ and ‘Click to Attach File’. Edit the ‘Click to Attach File’ button and under the Appearance tab’s ‘Look and Feel’ section, set the Theme Style drop-down to “Link”. Under the Functionality tab, set the Path Name to ‘Attach File’.
• 3 Label components. Label them as ‘Add File(s)’, ‘Upload File’ and ‘File attachments’.
• 1 InputFile component.
• 1 ListSelect component.

Arrange the components similar to the following setup:

Edit the ListSelect component and set the Outcome to ‘Remove File’. For the Data Type, set it to ‘FileDataType’. For Items, set it to the Process Variable ‘fileList’. Set the Selected Item Variable to ‘selectedFile’. Put a check in Auto Format Outcomes and then edit the Item Format section and set it to “Filename: ”. While still in the edit window, click the + next to ‘_select_list_item_’ and then drag in the ‘FileName’ and place it behind the “Filename: “ we had added previously. It should look like the following (bullet optional):

Edit the InputFile component and set the Output Data to ‘file’. In the Output Paths section, select ‘Required’ for ‘Attach File’. Set the others to ‘Ignored’. Click ‘OK’ once changes are mode to exit the Form Builder.
 

Add an ‘Add Items To Collection’ component and a ‘Remove Items From Collection’ component to your subDialog model.

Edit these two components and set both of their Data Types to ‘FileDataType’ (LogicBase.Core.Data.DataTypes.FileDataType) and set both of their Array Variable Name values to ‘fileList’. For the Add Items To Collection component, set the ‘Items to Add’ to the Process Variable ‘file’. For the Remove Items From Collection component, set the ‘Items to Remove’ to the Process Variable ‘selectedFile’.

Now add a ‘Variable Exists Rule’ component, ‘Copy Data Element To New Location’ component, ‘Remove Data’ component and a ‘Terminate Window and Close Dialog’ component to your subDialog model, similar to the following image. Setup all the links between the various components as shown.

Edit the ‘Variable Exists Rule’ component and check both the ‘Pick Definition From Current Model’ and ‘Declare Variable Added If Exists’ checkboxes. For the ‘Variable Definition’ drop-down, set it to ‘undofileList’.

Edit the ‘Copy Data Element To New Location’ component and set the ‘Data Type’ to the ‘FileDataType’ (LogicBase.Core.Data.DataTypes.FileDataType). Check both ‘Is Array’ and ‘Deep Copy’ checkboxes. Set the Input ‘Data From Variable Name’ to ‘undofileList’ and the Output ‘Assign To Variable Name’ as ‘fileList’.

Edit the ‘Remove Data’ component and check ‘Pick Definition From Current Model’ and set the ‘Variable Definition’ drop-down to ‘fileList’.

Edit the ‘Terminate Window And Close Dialog’ component and set the ‘Seconds To Wait Before Closing’ to 0. Click the Sub Dialog Handling tab and put a check in ‘Refresh Parent’. Click ‘OK’ until you’re back in your main model.
 

Back in our main model, we want to add a ‘Remove Items From Collection’ component. Link it from the ‘Remove Selected File’ output on our main Form Builder component, as shown below.

Add an Embedded Model component to the model. Link from the ‘Next’ output from the Form Builder to this new embedded model. Link the output from your embedded model to the remainder of your project. Use the following image for reference. In this demo example we’re connecting the embedded model to the End component.

1. Edit the Embedded Model and add the following components:
2. 1 ‘For Each Element in Collection’ component
3. 2 ‘Merge Text’ components
4. 1 ‘Write File’ component
5. 1 ‘Add Items To Collection’ component
6. The ‘WriteRecords’ component created from our Integration Project. It should be located in the Components Toolbox under Custom | Attachments.

Inside our embedded model, edit the ‘For Each Element in Collection’ component and set it up like this:

Edit the first Merge Text component (labeled ‘fileURL’ in the sample image) and set the Output ‘Variable Name’ to ‘fileURL’. Click the ‘Merge Data’ ellipsis and type in http://<you Server name>/<your Upload directory>/ . Click the + next to ‘currentFile’ on the left side of the Advanced Text Creator and drag ‘FileName’ to the end of the string you typed in. It should look similar to the following:

Edit the second Merge Text component (labeled ‘filePath’ in the sample image) and set the Output ‘Variable Name’ to ‘filePath’. Click the ‘Merge Data’ ellipsis and type in the directory path where the uploaded files will be stored.Click the + next to ‘currentFile’ on the left side of the Advanced Text Creator and drag ‘FileName’ to the end of the string you typed in. It should look similar to the following:

Edit the ‘Write File’ component and set it up like the following image:

Still inside the Embedded Model, edit the “Add Items To Collection’ component. Set both the ‘Data Type’ and ‘Array Variable Name’ to ‘Attachments’. If you don’t see the ‘Attachments’ data type, it will be located inside the name of our Integration project we had edited at the beginning. For the ‘Items To Add’, click the ellipsis and select ‘Single Value Mapping’. Setup your mapping like the following image shows (NOTE: Some of the items displayed are additional items from this demo project and can be ignored):

The last component to configure is our ‘WriteRecords’ component. This will take the input of our ‘Attachment’ array variable and insert a row into our Attachment database table for each attachment we have added. Edit the ‘WriteRecords’ component, click the ‘Setup’ tab and choose ‘Insert’ from the ‘Action’ drop-down. Then, click the ‘Inputs’ tab and set it up like the following image:

If you want the uploaded attachment information to persist in your present Workflow or Web Form process, you can use the ‘Added Rows’ variable ‘AttachmentsAddedRows’ to retrieve the information. Remember you will need to map out your Embedded Model to see that data outside of the embedded model however. Otherwise, you can create a SQL Query component to pull in the attachment data later in your process.

Conclusion

Now you have an idea of how to upload multiple attachments in a Workflow or Web Form project. This article also gave insight on how to save those attachments to a file share and insert the attachment information into a database table for retrieval later in your Workflow process.

NOTE: See attachment for a Microsoft word document version of this article