cancel
Showing results for 
Search instead for 
Did you mean: 

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

Workflow Hero
15 41 8,143

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:

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.

Tags (1)
41 Comments
Workflow Hero

Oh that's clever.. Nice one KK..

Not applicable

I have been using a different method with collection variables and query XML to create a display table which works well if I just need to display the data in an email one with no changes.  However when I need the repeater section to be included in an approval task form where the next person may be required to modify the data I haven't worked out how to update the original created display table so it can be inserted in the next email.

Would the solution above have the same problem?

Workflow Hero

The CSR is just a formating or manipulation of the data to be rendered at the client side on the fly. In my case the table was never saved, so i think it should work for your requirement as well if you are just formatting the table only when needed on the fly.

Workflow Hero

Thanks for this helpful post. I am having different view format and for that  and I not able to parse the data . Each of the unique "Product" will get added as a column and depending if the "Product" is present in the new item then its count will be added .Following is the demo view:

ViewinForm.png

Workflow Hero

Hi Aditya, not quite get what you trying to achieve here... it looks like if you are not using the repeating section, what you shown in your table is native to what Sharepoint list has right? every item with columns of Chair, Table and Stool...

Workflow Hero

Thanks for the reply,I am using the repeating control itself and the example is taken considering the items in your list screenshot.Basically I want to filter the data based on the "Quantity" or "Product" column

Workflow Hero

Make sure that multiple line of text column is of type plain text.Make sure that CSR code is executing.Are you getting an error?This  code worked for me in SharePoint 2013

Workflow Hero

JSLink/CSR is Sharepoint 2013 features.. you might want to refer to JSLink resources on how to implement CSR

Workflow Hero

It doesn't show any error. In my repeating section I have Lookup field and a Calculated value. In place of Product I have Lookup Field name and in place of Quantity I have the Calculated value name.

I have set up the column name which is in SharePoint list to Multiple lines text with Plain text.

It shows XML even the above code is inserted in Script Editor. There is no change in the output.

Can someone help me in this?

Workflow Hero

Hi Aditya / Kok koon,

I got the Partial Output. As I described earlier, my form Consists of List Lookup and Calculated Value in the Repeating section. Below is the Screen Shot of the Item in the List

In the above screen shot, ID's (Numbers are coming from the List Lookup where I have some field names instead) and names are coming from the calculated value which are actual.

Now, I would like to display the field names from the List Lookup instead of ID numbers in the List.

Any Suggestions on this?

Workflow Hero

If you got nothing from your template, chances are your display template/JS that was specified in your JSLink was not loaded or being executed. Office 365 and on-prem behave differently and sensitive when come to JavaScript refereneces/object or even with different browsers. As such you should try few things:

1. Make sure your JS file was uploaded to Master Page Gallery as Javascript Display Template (i.e. not any document folder)

2. Alternatively, use the code editor web part in the list view page and embed your JS in the page

3. Try out a simple code to make sure JS Link/CSR works on your list page first

4. Have you tried using other browser?

Do a search for JS Link examples or tutorial such as one you could find from here SharePoint 2013 JSLink Tutorial and Examples , As mentioned, CSR/JS Link is just a feature in Sharepoint 2013, there are lots of resources out there to try out as well. Hope you will get it...

Workflow Hero

looks like your JS Link is working now, just need to play around with your script for the output you want. As long as your nintex form control is linked to list columns, the data will be saved in list and to be included in your view.

Workflow Hero

Hi Aditya / Kok koon,

I got the Partial Output. As I described earlier, my form Consists of List Lookup and Calculated Value in the Repeating section. Below is the Screen Shot of the Item in the List

In the above screen shot, ID's (Numbers are coming from the List Lookup where I have some field names instead) and names are coming from the calculated value which are actual.

Now, I would like to display the field names from the List Lookup instead of ID numbers in the List.

The code is working good and I checked with the JS Link Tutorial. But then, The values from the List Lookup are numeric instead of field names.

Any suggestions on this?

Workflow Hero

Hi Ram,

Please follow the below mentioned steps:

  • Give the name to list lookup column i.e. Test 5
  • Add one calculated value column and in formula select "Test5 " from named controls as in the fig

  • Your values for the id will appear
  • If the extra characters like :# appears use the inline parse function in the calculated value
  • make changes in the script to bind calculated value rather than lookup feild

Let me know if you are facing any issue,Its working for me.Sorry for the late reply as I was unwell.

Workflow Hero

Thanks for the reply. I have done similar approach and got the output.

I have taken a Calculated Column and added lookup formulae which is used in the script in place of actual Lookup Field.

Hided this Calculated value in Display Mode, edit mode and in new mode. Got the Output as described.

But, now I noticed that  even after populating these repeating section field values in SharePoint list, XML code appears in the item when the workflow is  in the approval stages.

Should I change any workflow settings to decode XML?

Workflow Hero

Yes change the workflow settings to decode.

Workflow Hero

Can you navigate the Workflow process to Parse XML. I found few blogs before finding this blog.

But, I couldn't able to start with the workflow since I knew it can be solved using CSR approach. Now, I figured out still there is XML populating during the workflow process explored these two blogs.

Best Practices with Repeating Sections in Nintex Forms - Viewpoint - Rightpoint Consulting and Nintex Forms/Workflow - Parsing Repeating Section Data - Vadim Tabakman .

Could you tell me the Steps to be followed to decode XML and populate the field names through workflow as well.

Thanks for your help!!

Workflow Hero

Could you please tell me the exact requirements? I had a requirement in which I had "Asset Name" and "Asset Owner" columns in the repeating sections. I had to parse  the xml and send separate mail to all the "Asset Owners" with their "Asset Name" .I used the 2nd link shared by you for parsing the values of xml

Workflow Hero

Hi Aditya,

This is part of the nintex form where there is repeating section panel for the lookup field and calculated value. The output is in this way when I use the script. But this is not the desired output and then I used another calculated field as we discussed earlier i.e Test 5 example.

After using Test5 approach the out put is

So I have connected the calculated value which is hovered on the lookup in the script.

Now the issue is, XML still remains when the workflow is in progress (approval stages).

we knew that the CSR approach could able to remove XML from the sharepoint list, as I added the script. I want to remove the XML in the form  when it is in approval process.

Note : In my Nintex workflow designer I don't have UDA in the workflow actions.

Workflow Hero

as named, CSR script will be injected when the list view/form being opened/rendered at the client end, it will not make changes to your source. If you need the xml to be parsed for the workflow, you should look at parsing it at the workflow side, i remembered Vadim share in his blog on how to do that, just do a search you should find other sharing on that...

Workflow Hero

Hi Kok Koon /Aditya,

Did a workaround for the workflow. Followed Eric Harris and Vadim posts to parse XML in the Workflow.

Below screen shot is the output when I parsed XML in workflow.

I used regular expression to remove semicolon, this worked out as you see in the output.

Here, there are two more tasks to be addressed.

1) I need to make the fields in a column not as a row.

2) I have a approval request in this workflow and this output is not populated until the approval process starts.

Do you have any idea on this? I'm in the last stage to complete this.

Thanks for your replies and answers.

Workflow Hero

Hi,

I´m copy this example in my site, but the page showed this error:

Stock-taking

ReferenceError: $ is not defined
ReferenceError: $ is not definedTypeError: Cannot read property '_events' of null

​​​​​What is this?

Thanks.

FMS.

Workflow Hero

Hi Federico,

Earlier it worked good when I used this script., but now it throws the same error for me as shown.

TypeError:Unable to get property  '_events' of Undefined or Null reference.

Did you find any solution for this?

Thank

Workflow Hero

Hi Aditya / Kok koon,

I tested the form before finalizing everything two weeks back, it worked like a charm.

Now it throws me an error as shown below.

Type Error: Unable to get Property '_events' of undefined (or) null reference.

When I removed the script then only I can see the List.

Can You please help me to solve this?

Workflow Hero

it gives 'ClientTemplates' is undefined error in script. Any idea?

Workflow Hero

Check the code from line 4 to 10 to see if you are missing something

Workflow Hero

Hi,

Really Not

Federico

Workflow Hero

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

Workflow Hero

What was the issue?

Workflow Hero

it was a typo

Workflow Hero

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?

Workflow Hero

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

Workflow Hero

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

Workflow Hero

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

Workflow Hero

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.

Workflow Hero

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

Workflow Hero

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.

Workflow Hero

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

Workflow Hero

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.CurrentItem["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

Workflow Hero

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

Workflow Hero

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.