Nintex Forms for Office 365 – Add metadata for each attachment in a form

Nintex Forms for Office 365 – Add metadata for each attachment in a form


In a Nintex form, the default control for attachments does not allow to add additional metadata for each file. Sometimes, it can be useful to add a little description or other additional information when attaching a document. Here is a simple reusable solution using a repeating section and some JavaScript code to do it. Here is the final result:

Final results

Steps

Prepare the form

The first thing to do is tho create the correct structure for the form:

Form creation

  1. Add a panel and associate a CSS class to it: « attachments-panel« 
  2. Add a repeating section inside it and set it a CSS class « attachments-metadatasection« 
  3. Add an input control in the repeating section for the file name an set it a CSS class « attachment-filename« 
  4. Add all your additional metadata for a single attachment

Add the JavaScript code

Next add the following code to the form:

 

Few things to notice here:

  • I use the DOMNodeInserted and DOMNodeRemoved  JavaScript events on the attachments control to detect an attachment add or delete action.
  • Because of in Nintex Form, a repeating section must have at least one row, I have to hide the first row if there is no attachment.
  • The link between the attachments control and the repeating section is done by the file name. In the metadata section, the input control is in read only mode to avoid user modification (if modified, the link is broken).
  • The code works in both new or edit scenario

Add the CSS code

To make this more beautiful, add the following CSS to the form:

Full example code

You can download the full form example here:

2 Comments

Add yours

+ Leave a Comment