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

  • 18 December 2015
  • 40 replies
  • 143 views

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

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.


40 replies

Userlevel 7
Badge +12

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

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.

Badge +9

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

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

Badge +9

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

Badge +9

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

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

Badge +3

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?

Badge +3

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?

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

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.

Badge +3

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?

Badge +9

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.

Badge +3

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?

Badge +9

Yes change the workflow settings to decode.

Badge +3

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

Badge +9

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

Badge +3

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.

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

Badge +3

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.

Badge +8

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.

Badge +3

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

Badge +3

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?

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

Badge +9

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

Reply