Repeating Section

Repeating Section of Nintex Form is always a popular topic among the communities. I was trying to help a partner looking into issues he encountered implementing the solution proposed by Ayman El-Hattab in his great post of Displaying Repeating Section Data in List Views, The Easy Way!, if you did a quick search, you may find many other great posts such as …

If you do not need the Repeating Section’s data to be transformed and saved into other formats for other purposes, here is my sharing on how show the Repeating Section as table in List View using the native Sharepoint feature – CSR (i.e. as such this solution will work only in Sharepoint 2013 on-prem or Office 365, or later if CSR is not to be replaced with others).

Create your Nintex Form and the required Repeating Section, connect the Repeating Section to Sharepoint Custom List’s Multiline Text column as shown in the diagram below:

You will need to make sure the list column is of type “Multiple line of text” with “Plain text” format configured as shown below

Create your list item using the published Nintex Form, the data of the repeating section will be saved to the linked column (i.e. in XML format), and here is how the view looks like

Create a Page two include the List View web part, for the purpose of making this simple, I will include the Script Editor to the same page for the CSR implementation (i.e. you may refer to Microsoft document on other CSR implementation approach using master page and so on.) Here is how the page looks like in my demo

Cut and paste the following code to the Script Editor’s snippet

<script type="text/javascript" src="/Nintex/SiteAssets/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  Templates: {
           Fields: {
                'Inventory': { 
                    'View': repeatingSectionViewTemplate
                 }
           }
  }
});

function repeatingSectionViewTemplate(ctx) {
   var xml = ctx.CurrentItem["Inventory"];
   var decodedxml = xml.DecodeXMLNotation(); 
   var htm = "";
 
   xmlDoc = $.parseXML( decodedxml );
   $xml = $( xmlDoc );
   $xml.find("Item").each(function() {
      htm = htm + "<tr><td>" + $(this).find("Product").text() + "</td><td>" + $(this).find("Quantity").text() + "</td></tr>";
   });
   return "<table border='1'>" + htm +"</table>";
};

//Replaces html notation to their equivalent xml escape characters.
String.prototype.DecodeXMLNotation = function () {
    var output = this;
    if ($.trim(output) != "") {
        output = output.replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&gt;/g, '>').replace(/&lt;/g, '<').replace(/&amp;/g, '&');
    }
    else {
        output = "";
    }
    return output;
};
</script>

Saved the page and you should get the result on displaying the Repeating Section data in table format on the view, here is how it looks like

The key challenges I encountered for my test is on the XML string saved in the “Multiline of Text column” is presented with the original html notation which I will need to include the DecodeXMLNotation function to decode it before passing to the Jquery’s ParseXML function.

Tag: Repeating Section

Displaying Repeating Section as table in List View – the CSR approach