Multiple-File Upload Functionality

Background

This article discusses XMPro’s Multiple-File Upload functionality, how a System Administrator can install this functionality, and a step-by-step guide to configure the multiple-file upload functionIs a Stream Objects that performs mathematical and statistical operations.. This article is intended for advanced XMPro consultants.

The current file upload control has the ability to allow users to upload a single file to the server. The multi-file upload functionality builds on that and allows users to upload multiple files in one go, using an object group. The multiple-file upload functionality helps save users a lot of redundant clicks, time, and effort, when compared to a regular file upload function where they have to add one file at a time.

Steps

The following are the steps to install the multiple-file upload functionality. After the installation steps have been completed, there is a step by step walkthrough to enable and configure the multi-file upload function.

Step 1

An XMPro System Administrator needs to download the following files:

• Shared Library file
  • XC.XMWorkspaceExtensions.dll * This file should not be modified

• Active Server Page Extended file
  • MultiFileUpload.aspx * This file should not be modified

• Custom XMPro TransformationIs a Stream Objects that alters the shape and form of data. Extensible Stylesheet Language file(s)
  • ActivityDisplay_MultiUploadPlus.xsl
  • ActivityDisplay_MultiUploadClip.xsl
  • *These files are custom stylesheet files that can be modified if necessary, by advanced users only – Users who have experience creating or editing style sheets using Extensible Stylesheet Language (XSL). By default:
    • The ActivityDisplay_MultiUploadPlus.xsl replaces the ‘add a line’ function of the object group with the multiple-file upload functionality.
    • The ActivityDisplay_MultiUploadClip.xsl displays a ‘paper clip’ icon that represents the multi-file upload functionality. The ‘paper clip’ icon is found next to the ‘add’ and ‘remove’ line icons on an object group.
      
  • ObjectTemplates.xsl
    • (Download only if the ‘transform → custom’ folder does not already contain this file) * This file should not be modified

The above files can be downloaded from this link for v6.5.

Once the files have been downloaded they need to be placed in the XMPro Server folder and respective sub folders to incorporate the library, code and the sample stylesheet that will enable the multi-file upload function. This is an important step as the multi-file upload function is currently a custom add-on and will need these files in order to make this functionality available onto the user’s current version of XMPro.

The following are the relative locations where the downloaded files need to be placed, respective to the user’s XMPro Server folder:

1. XC.XMWorkspaceExtensions.dll

• <Drive> → inetpub → wwwroot → <XMPro Server Folder> → bin * This file will already exist if the multiple-select browse page functionality has been set up previously

2. MultiFileUpload.aspx

• <Drive> → inetpub → wwwroot → <XMPro Server Folder> → MultiFileUpload
• The MultipleFileUpload folder will need to be created. It should be named without spaces, as shown, and is not case-sensitive

3. ActivityDisplay_MultiUploadPlus.xsl and ActivityDisplay_MultiUploadClip.xsl

• <Drive> → inetpub → wwwroot → <XMPro Server Folder> → transform → custom
• * Only one of the sample stylesheets is used at a time, however both are placed in the folder to give the user the option to make a selection while configuring the multi-select function
• * These sample stylesheets also enable the multi-select browse page function, should you choose to use both the functions on the same activityA specific step in a process.  It will be the user interface for that step (web form or a screen), for example, the Leave Application (screen interface or web form) will be the first Activity in the Leave Requisition process.  The Leave Application Authorization will be the second step or Activity in the Leave Requisition process.  One Process can have multiple activities.

*If the “custom” folder does not exist within the “transform” folder, go ahead and create it, and place the ObjectTemplates.xsl in it along with the ActivityDisplay_MultiUploadClip.xsl and/or ActivityDisplay_MultiUploadPlus.xsl file.

*If the “custom” folder already exists within the “transform” folder, then it should most likely already have the ObjectTemplates.xsl in there. If ObjectTemplates.xsl isn’t present, copy it from the downloaded file and place it in there.

*The provided .dll and .aspx system files should be used as-is. These are core library and active server page extended files that are needed to enable the multi-select functionality, and should not be modified.

High-Level View of Configuration

The following is the high-level view of all the steps necessary to configure the multi-file upload function after it has been installed. A detailed walkthrough is covered in the next section of the article – Configuration Using a Sample Process.

1. Complete the Installation as listed above in this article.

2. Select the activity where multi-file upload function will be configured and type the custom stylesheets name in the ‘Stylesheet’ property for the activity.
In this example, enter the name “ActivityDisplay_MultiUploadClip.xsl”

3. Create an object group on the same activity, and name it with the suffix “_Bulk”. The suffix is case-sensitive.

4. Add the following fields and associate them with the object group created above:

• A file attachment field: For enabling the multi-file upload function on the object group header, and for the file attachment column in the object group
• Either a text box, large text box, or reference label: For the ‘Comments’ column
• Either a text box, large text box, or reference label: For the ‘File Name’ column
  * The fields need to be placed in the order as above, index wise – file attachment field, comments field, and then file name field. To change the order, advanced users with experience in creating or editing stylesheets using XSL can modify the sample stylesheet accordingly.

Depending on which stylesheet was chosen, navigating to the activity with the multi-file upload function and clicking on the ‘add’ icon , or the ‘paper clip’ icon  will give the following result:

* Having the multi-file upload function on the ‘add’ icon does not allow users to add blank rows to the object group.
* Having the multi-file upload function on the ‘paper clip’ icon, leaves the ‘add’ icon to exhibit its normal function – which is to add new blank rows to an object group.

With this, the multi-file upload function has been successfully configured.

Multiple-File Upload Example

Background Information

The sample process used to demonstrate the multi-select browse page functionality is a two-step process, where in the first activity the user submits an expense claim form, and in the second activity the manager reviews the expense claim submission and approves or denies it. The ‘Submit Expense Claim’ activity is the first activity, and the user chooses the expense type, whether it is ‘internal’ or for a ‘client expense’, the period of the expense claim and then attaches the supporting receipts or documents.

Users may often have multiple receipts to be uploaded for a given period, therefore this process is a good example of demonstrating the multiple-file upload functionality. With the multi-file upload function, the user can select multiple files at once, choose to add a common comment, and upload them together. The comment can also be edited after the line items have been added to the object group, if the field type is chosen as an editable text box. The results of the configured multi-file upload function can be seen in the ‘Output on Workspace’ section towards the end of this article.

Step by Step Walkthrough

Step 1

Navigate to and click on the activity on which the multi-file upload functionality is to be configured, which in this case is the Submit Expense Claim activity, to enable the Properties toolbar on the right hand side.

Step 2

Enter the custom stylesheet’s name (as copied across in the transform → custom folder in the installation step) in the ‘Stylesheet’ field. This is a free text field, and is not case-sensitive, so the name can be typed in or copy-pasted.

This is where the user can choose which style sheet is used – either to enable the multi-upload function on the ‘add’ icon or ‘paper clip’ icon, as mentioned above in the ‘High-Level View of Configuration’ section. The corresponding files will already need to be present in the ‘custom → transform’ folder as outlined in the ‘Installation’ section.

Step 3

Click on the three-dotted icon on the ‘Object Groups’ option to open the Object Group configuration window

Step 4

Click on the ‘Add’ button to create a new Object Group

Step 5

Click on the newly created Object Group “EM3010ObjectGroup” to change its properties

Step 6

Update:

• Description to “Maintenance Object Group”
• Name to “NP1010Maintenance_Bulk”

* The suffix “_Bulk” as below is necessary for the multi-file upload functionality to work, and is case-sensitive. This enables the files set up in the installation section to recognize that this Object Group associates to the Multi-File Upload functionality.

Step 7

Once the Object Group is set up, navigate in to the activity and create the following set of 3 fields in that order:

1. Upload Files – File Attachment
2. Comments – Large Text Box (or Text Box or Reference Label)
3. File Name – Reference Label (or Text Box or Large Text Box)

* These fields need to be created in the exact order as listed above, if using the custom style sheets provided. Any changes to the order can be made by an advanced user with experience creating or editing style sheets using XSL.

Step 8

Associate the three fields as created above with the “File Uploads” object group to enable the Multi-File Upload functionality on this activity

Output on Workspace

Log in to the XMPro site and navigate to the form or activity where the multi-file upload function was configured. The multi-file upload functionality button associated with the object group is shown below:

Screenshot using the “ActivityDisplay_MultiUploadClip” Stylesheet

Screenshot using the “ActivityDisplay_MultiUploadPlus” Stylesheet

Clicking on the multi-file upload button opens the following pop-up window:

Click on “Browse” and navigate to the folder where the files are located. Select all the files required to be uploaded and click “Open”:

This navigates back to the pop-up window with the ‘File’ field highlighting that 4 files were selected for upload. Enter comments and click “Submit”:

A status bar is visible while the files are being uploaded and upon completion, the following message appears. Click on “Add more files” to upload more files, if not then click on “Close”:

Once “Close” is clicked, the selected four files listed in the object group. The data displayed in the rows added are as follows:

• ‘Upload Files’ column: This displays the original file name with a unique system generated prefix
• ‘Comments’ column: This displays the ‘Comment’ entered during the upload
• ‘File Name’ column: This displays the original file name

Here, comments can be edited in the editable large text box, lines can be added or deleted, and the file attachments under the “Upload Files” column can be amended. The behavior from this point is what would be expected from a regular object group, and the respective field types.