Skip to main content

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 ...

 

Nintex Forms/Workflow - Parsing Repeating Section Data by Vadim Tabakman

Create Parent/Child items using this Nintex forms/workflow with this trick by Eric Harris

Populating Repeating Section Controls with List Data by Jason Blair

 

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:

154827_pastedImage_2.png

 

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

154828_pastedImage_3.png

 

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

154832_pastedImage_4.png

 

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

154833_pastedImage_5.png

 

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.CurrentItemp"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

154834_pastedImage_7.png

 

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.

Hi,

Really Not

Federico


Yes.. Thanks. Finally it is working great..


What was the issue?


it was a typo


This implementation doesn't support In line editing. It gives error - TypeError: Unable to get property 'DecodeXMLNotation' of undefined or null reference.  on edit. Any fix on it?


Or maybe it's a pivot table based on and aggregating some data stored in a different format like pairs of "Jurong East"-"Table" and "Test"-"Chair".


Make sure you reference jQuery (NWF$) and your form controls correctly. That should help with those errors.


Hi,

This is great when viewing the items in the list!

But if we have a workflow that creates a task and we want to view the related item fields in the task form template using List Item control the repeatable section is again rendered as XML.

Is there any workaround to this and why this Forms control cannot handle the repeating sections?

Thanks,

Ivan


Hi Ivan,

I have the same issue and  Eric Harris   helped me to solve this creating a workflow. The CSR approach remains same adding in the Script editor. CSR approach is only to hide the XML in the SharePoint List. To hide the XML in the Workflow process i.e., in the approval process workflow should be created.

Step 1: Query XML

Step 2: Build String

Step 3: Set Field Value

And also Please check Vadim Tabakman​ posts for these Repeating sections.


I have faced same issue while data migration. And corrected by removing special characters using HTML encode while constructing the XML.


Ram was right, the JSLink/CSR is just the changing the way the content is being rendered at the client end, the original content still remain untouched.


Hi Kok Koon Gan​ and ram Kanteti​ thanks for the replays, but I think that I did not explained this very well. I do not want to change the xml or anything I just want to properly display it in the task forms. Anyway I found the solution myself, not sure if this is a practice, but it worked out really well for me and I shared it in this post  Another SharePoint Blog: Display related item repeating section in Nintex Workflow task form


Hi Kok Koon Gan, can you help me with my version of the script? I cannot get it to display the XML in a table view and have no idea what I'm doing wrong:

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

function repeatingSectionViewTemplate(ctx) {
var xml = ctx.CurrentItemm"Questions_to_Verify_Scope"];
var decodedxml = xml.DecodeXMLNotation();
var htm = "";
xmlDoc = $.parseXML( decodedxml );
$xml = $( xmlDoc );
$xml.find("Item").each(function() {
htm = htm + "<tr><td>" + $(this).find("Questions").text() + "</td><td>" + $(this).find("Answers").text() + "</td></tr>";
});

return "<table border='1' class ='gridmtable'><tr><th><b>Questions</b></th><th><b>Answers</b></th></tr>" + 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>

This is what the output currently looks like:

Thank you for your help!

Nancy


If that is the output, looks to me ur script is not being executed... u will need to fix that first.


This script worked great in a standard list view. Any idea how to adapt it to the preview pane style? XML is still showing on the preview pane view.


Reply