How To: Attach Multiple Files to a form using the Attachment Control

This topic describes how you can attach multiple files to a form by using the File Attachment control in conjunction with an editable list view.

Attach multiple files to form using the File Attachment control in an editable list view

Scenario

In this example you build a form called Employee Onboarding which contains an item view and an editable list view with a File Attachment control. You use the Employee Onboarding form to capture a new employee and associated documents using the file attachment control. You configure a Submit button that saves all the attached files in the file attachment control on the editable list view.

Steps

You will build two SmartObjects, one called Employee Details, to capture the employee's details, and another called Documents to capture the employee's files. You then create an item view based on the Employee Details SmartObject and an editable list view based on the Documents SmartObject. You then add the views to a form and configure a Save button rule to save the employee's details and files on the form.

Setup Steps

The following steps set up the scenario from start to finish. If you want to skip the setup steps and view the topic step, go to Configure the Rules for the Submit Button.

  1. Create the SmartObjects.
    1. Launch K2 Designer and create a new category folder called Employee Onboarding.
    2. Create two SmartObjects in the Employee Onboarding category, called Employee Details and Documents.
      Employee Details
      PropertiesTypeKeyRequiredUnique
      IDAutonumberYesNoYes
      NameTextNoNoNo
      SurnameTextNoNoNo
      Home AddressTextNoNoNo
      Email AddressTextNoNoNo
      Contact NumberNumberNoNoNo

      Documents

      PropertiesTypeKeyRequiredUnique
      IDAutonumberYesNoYes
      Document TypeTextNoNoNo
      DocumentFileNoNoNo
    3. Open the Employee Details SmartObject and navigate to the Associations tab.
    4. Click Add and on the Add Association page, select the Documents SmartObject. Click Next.
    5. On the Add Association page select Employee Details can have many Documents SmartObjects and Each Documents has a single Employee Details. Ensure the Use Existing property(s) option is selected. Click Next. The Many to One association allows you to associate multiple rows on the Documents editable list view (that contain multiple file attachments) to the ID field of the Employee Details list view.
    6. On the Add Association page select the ID field name and click Assign.
    7. On the Assign property (ID) page, select the ID field from the Documents editable list view. Click OK.
    8. Click Finish to complete the Association configuration. Click Finish again to complete the SmartObject configuration.
  2. Create and Configure the Employee Details and Documents views.
    1. Select the Employee Details SmartObject and click Design a new View.
    2. Add Employee Details in the Name field. Ensure the view is in the Employee Onboarding category folder. Select Item View option in the View Type field. Click Create.
    3. On the Layout tab, select Create Labels and Controls.
    4. On the Create Labels and Controls page select the Name, Surname, Home Address, Email Address and Contact Number options in the Layout section. On the Buttons section check the Create, Save and Load check-boxes and click OK.
    5. On the Create, Save and Load buttons, uncheck the Visible option in General section. You don’t want users to use these buttons as a custom Submit button will be configured in a later step.
    6. Select the Contact Number text box control and click the ellipsis in the Format option.
    7. On the Format page, select the Special option, select Phone Number and click OK.
    8. Click Finish to complete the Employee Details Item View.
    9. Select the Documents SmartObject and click Design a new View.
    10. Add Documents in the Name field. Ensure the view is in the Employee Onboarding category folder. Select List View option in the View Type field. Ensure the correct data source is selected: Employee Onboarding\ Documents. Select Get List in the List Method section. Uncheck the Call this method when the form loads check-box and click Create.
    11. On the Layout tab, select Create Labels and Controls.
    12. On the Create Labels and Controls page select the Document Type and Documents options in the Layout section. In the Edit Options section check the Enable list editing check-box and select the Edit all rows option. Check the Allow the user to add new rows check-box and ensure the Create method is selected. Check the Allow the user to edit existing rows check-box and ensure the Save method is selected. Check the Enable Add new row link check-box. Check the Allow the user to manually refresh list check-box and click OK.
    13. On the Documents view, select the Document Type Text Box control and click Change Control. You change the control to a drop down control so when you add a document you can specify the type of document from a static list of options.
    14. On the Change Control: Document Type Text Box page, select Drop-Down List and click OK.
    15. Select the Document Type drop-down list control and on the Data Source section, click the ... on the Type option.
    16. On the Configure Data Source page, select Use a static list of values in the control option and click the ... on the List Items option.
    17. On the Fixed List Configuration page, add Resume (set as default), Certification, and Reference and click OK.
    18. Click OK and click Finish.
  3. Create the Employee Onboarding Form and add the Employee Details and Documents views to the form.
    1. In the Employee Onboarding category, create a new form called Employee Onboarding.
    2. Select the Views tab and add the Employee Details and Documents views to the form.
    3. Add a button control to the form. Change the Name and Text fields to Submit. Click Finish.
  4. Configure Rules for the Submit Button

    The steps below show you how to configure the rules for the Submit button.

    The form uses the header-line items pattern to create the 'parent' employee record and then save each of the 'child' document records for that employee. To learn more about header-detail/parent-children scenarios, please see How To: Create a Form where you can enter data in a “header/detail” or “master/line items” style.
  5. Configure the Rules for the Submit Button
    1. Open the Rules tab of the Employee Onboarding form and click Add Rule.
    2. On the Rule Designer page, select the When a Control on a form raises an event action. The When Submit is Clicked action is automatically added.
    3. Select the Actions tab and add the Execute a View method action.
    4. Click select View and select the Employee Details view.
    5. Click select Method and select the Save method. Click configure.
    6. On the Employee Details View, Execute the Save Method page, click Auto Map for the Input Mappings and click Next.
    7. On the Output Mappings section add the ID return property from the Context Browser to the ID field for the Employee Details SmartObject in the Mapping Destinations section. Click Finish.
    8. Click the Then option and select also.
    9. Now you will add the action that saves each of the documents attached to the new employee record. Select the Actions tab and add the Execute a View method for items that are in a specific state action.
    10. Click select View and select the Documents view.
    11. Click select Method and select the Save method.
    12. Click select item state and click Added. Click Configure.
    13. On the On Documents View, Execute the Save Method for all items that have been Added page, click Auto Map for the Input Mappings.
    14. Because this is a header-detail form, we need to map the ID of the 'parent' record to the 'child' records. Remove the ID field.

      Add the ID field from Employee Details SmartObject to the ID Input Properties field. There are no Output Mappings, click Finish.
    15. For the scenario to work the rules need to execute in a batch. Click then on the then on Documents View, execute the Save method for all the items that have been Added(configure) rule and select also. Click OK then Finish and check in the form.
  1. Test the Scenario
    1. Run the Employee Onboarding form.
    2. Enter the employee's details on the Employee Details view of the form.
    3. On the Documents view of the form, click Add or Add new row. Select the Resume option from the Document Type drop-down list control and then add a Resume document in the Document file attachment control.
    4. Click Add or Add new row and add the certification and reference documents. Select the correct document type when adding the documents. Click Submit.
    5. The files are added to new rows on the Documents editable list view.
Review

This how-to explained using an editable list view and attachment control to save multiple documents, associated to one record. You created two SmartObjects, Employee Details and Documents to capture user details and files. You created two list views and a form, configured rules to capture the employees details and files and added a Submit button, when clicked all the employees details and files saved. You then added new files to the form and saved them, which displayed how you can add multiple files using the file attachment control and an editable list view.