franck.cornu@gsoft.com

Nintex Forms for Office 365 - Add metadata for attachments in a form

Blog Post created by franck.cornu@gsoft.com on Sep 26, 2015

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:

finalresult.png

Steps

#1 - Prepare the form

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

formcreation.png

  1. Add a panel and associate a CSS class to it: "attachments-panel"
  2. Add a repeating section inside 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

 

#2 - Add the JavaScript code

Next add the following code to the form:

 

NWF.FormFiller.Events.RegisterAfterReady(function (){     


  // Atributes "idAttachmentsRow" = View Mode and "attachRow" = EditMode
  // On form loading, hide the first repeating section if there is no attachments
  var attachmentCount = NWF$(".nf-attachmentsTable tr[id*='attachRow'],.nf-attachmentsTable tr[id*='idAttachmentsRow']").length;


  if (attachmentCount == 0)
  {
  NWF$(".attachments-panel").hide();
  }
  else
  {
  // Set the filename textbox read only to avoid user modifications
  var rowInputFileName = NWF$(".attachments-metadatasection .nf-repeater-row .attachment-filename input.nf-associated-control");
  rowInputFileName.each(function() {
  NWF$(this).prop("readonly", true);
  });
  }


  // Attachment deleting event
  NWF$('.nf-attachmentsTable').on("DOMNodeRemoved", function(event){


  var removedElement = event.target;


  if(NWF$(removedElement).is("tr") && NWF$(removedElement).attr("id").length > 0)
  {
  // Get associated file name ("a" is for view mode, "span" for edit mode)
  var fileName = NWF$(removedElement).find("td.ms-vb a, td.ms-vb span").text();


  // Get the associated row with the filename
  var associatedRow = NWF$(".attachment-filename input.nf-associated-control").filter(function() { return this.value == fileName });


  // Reset the value of the text box to avoid rules applying and block the form saving
  var rowInputFileName = NWF$(associatedRow).find(".attachment-filename input.nf-associated-control");
  rowInputFileName.val('');


  // Get the corresponding row in the repeating section and delete it by simulating a click
  associatedRow.closest(".nf-repeater-row").find('.nf-repeater-deleterow-image').click();


  // Get number of existing attachments by counting the number of rows in the attachments table
  var attachmentCount = NWF$(".nf-attachmentsTable tr[id*='attachRow'],.nf-attachmentsTable tr[id*='idAttachmentsRow']").length;
  var rowCount = NWF$(".attachments-metadatasection .nf-repeater-row").length;


  if(attachmentCount==1 && rowCount==2)
  {
  NWF$(".attachments-panel").hide();
  }
  }
  });


  // Attachment adding event
  NWF$('.nf-attachmentsTable').on("DOMNodeInserted", function(event){


  var insertedElement = event.target;


  // Wait for the filename DOM element creation and associate it with a new row in the reapting section
  if(NWF$(insertedElement).is("span") && NWF$(insertedElement).attr("dir").length > 0)
  {
  // Get the number of existing attachments by counting the number of rows in the attachments table
  var attachmentCount = NWF$(".nf-attachmentsTable tr[id*='attachRow'],.nf-attachmentsTable tr[id*='idAttachmentsRow']").length;

  if (attachmentCount > 1)
  {
  // Add a new row in the repeating section for this attachment by emulating the click
  NWF$(".attachments-metadatasection").find('a').click();
  }
  else
  {
  var rowCount = NWF$(".attachments-metadatasection .nf-repeater-row").length;
  if(attachmentCount==1 && rowCount ==2)
  {
  NWF$(".attachments-panel").show();
  }
  }


  // Set the associated file name in the new row added for his attachment
  var associatedFileName = NWF$(insertedElement).text();
  var rowInputFileName = NWF$(".attachments-metadatasection .nf-repeater-row:last .attachment-filename input.nf-associated-control");
  rowInputFileName.val(associatedFileName);
  // Don't disable the field! Nintex doesn't save the value of disabled fields...
  rowInputFileName.prop("readonly", true);
  }
  });
});

 

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

 

#3 - Add the CSS code

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

 

/* ###### Attachments section ###### */
/* Hide user controls for add/delete rows */
.attachments-metadatasection .nf-repeater-deleterow-image, .attachments-metadatasection .nf-repeater-addrow {
  display:none;
}
/* ---- Attachments table format ---- */
/* ---- Spacing between rows in the attachments table ---- */
.nf-attachmentsTable {
  width: 100%;
  border-collapse: collapse;
}
.nf-attachmentsTable td {
  padding-top: .5em;
    padding-bottom: .5em;
}
.nf-attachmentsTable td.ms-propertysheet, .nf-attachmentsTable td.propertysheet {
  text-align: right;
}
.nf-item-alternating {
  border-top: 1px solid;
  border-bottom:1px solid;
  border-color: #00000;
}
/* ---- End of attachments table format ---- */
/* Render "Delete" link as a button */
.nf-attachmentsTable td.ms-propertysheet a, .nf-attachmentsTable td.propertysheet a{
  background-color:red;
  border:1px solid red;
  border-radius:3px;
  color:#ffffff!important;
  display:inline-block;
  font-size:12px;
  line-height:20px;
  text-align:center;
  text-decoration:none;
  margin-left: 10px;
  margin-right: 10px;
  width:100px;
  -webkit-text-size-adjust:none;
  mso-hide:all;
}
/* Attachment file name in bold */
.nf-attachmentsTable td.ms-vb {
  font-weight: bold;
}
/* Hide images for "Delete" action */
.nf-attachmentsTable td.ms-propertysheet img, .nf-attachmentsTable td.propertysheet img{
  display:none;
}
/* Hide "+" image for Add attachment */
.nf-attachmentsLink img {
  display:none;
}
/* Render "Add Attachment" link as a button */
.nf-attachmentsLink a {
  background-color:#FCAD17;
  border:1px solid #FCAD17;
  border-radius:3px;
  color:#ffffff!important;
  font-size:12px;
  text-align:center;
  text-decoration:none;
  width:auto;
  padding:5px;
  -webkit-text-size-adjust:none;
  mso-hide:all;
}

 

Full example code

You can download the full form example here:

 

Download

Outcomes