Working with Repeating Sections can be a hassle, but once you’re able to target them properly, it can open a new world of possibilities within your forms. In this article, we’ll explore how to implement a repeated section and calculating sums of values from as many rows that are added.
Create The Form
First, you want to create a simple Nintex Form with a repeated section.
To do this, simply choose an existing SharePoint list or create a new custom list on a site that has the Nintex Forms application added already. If you aren’t sure how to add the Nintex application to a site, learn how here. If you don’t own a license, you can also sign up for a trial on their website here.
Once you are at the list, click on the “Nintex Forms” button, and when it loads, select “Classic Form”. We are using Classic as the “Responsive Form” which does not currently support JavaScript input. Responsive Forms are great to use, but for more complex actions we will want to stick with Classic.
Next, for this exercise, we can remove everything currently on the form and simply add in a Repeating Section with a Quantity, Price, and Amount box (as shown below).
In addition, we can add a “Total” box outside of the repeating section element.
Assigning Variables and Classes to the Elements
For repeating sections, don’t use the functionality to assign an element in the repeating section to a JavaScript variable. This wouldn’t work as this gets assigned as an ID which you can only target a single element with. For this to work, we will assign each element in the repeating section a CSS class.
Assign the Quantity box a class of “qtyBoxes”, the Price box a class of “priceBoxes”, and the Amount box a class of “amountBoxes” (one example shown below).
For the Total box, this isn’t in a repeating section and there is only one of these, so you can assign this a JavaScript variable of “totalValue”.
Lastly, you need to assign the repeating section itself a class. This is the same procedure as the elements and simply assign it a CSS class of “repeatedSection”.
Compiling and Implementing the Code
Next, the code for tying this all together is posted below, and you can walk through what it is doing.
When working with JavaScript in Nintex Forms, you want to ensure that the form loads before trying to execute any code. To implement this code in the form, open up Form Settings and paste/type the code into the “Custom JavaScript” section.
The NWF$().ready function ensures that the form is ready. Inside of this function, we are monitoring whenever a change is made within the Quantity or Price boxes, so we can recalculate everything in the repeating section accordingly on the fly. The parseTotal function is called every time we need to recalculate the repeating sections.
It essentially loops throughout the default Nintex CSS classes for repeating sections and grabs each row that has been added. You set a variable outside of the for each loop to store the total value of all rows and set the “Total” text box to that value. Inside of the for each, you are grabbing the individual row and its respective quantity and price inputs (stored in the qty and price variables).
These then are multiplied together, after being converted to floats, and stored in the rowTotal variable. The “Amount” box is the total for each row, so we set its value in that row to the rowTotal amount. Lastly, we set the value of the “Total” text box to the totalSum variable and we are all set (results below).
Hope this helps! Contact us if you have any questions on Nintex forms and workflows.
Nintex Workflow is a fantastic tool that can help streamline numerous processes and solve a variety of business needs.
One caveat to the heavy use of Nintex in an On-Premises SharePoint environment is that the more it is used, the faster each Nintex Workflow History list fills up.
Nintex gives you a couple ways out of the box to purge these lists:
- Use NWAdmin.exe and its respective “PurgeHistoryListData” command to clear the list.
- Use the GUI available to you within Central Admin.
However, when these lists get too big (30, 40 or 50,000 records), these methods often fail. If they do not fail, they can take hours and sometimes days to complete. In the meantime, your Nintex Workflow History list is inaccessible and cannot be used to parse logs.
This is where the SharePoint REST API can help you. Let’s dive into the details so you can easily clean your history list.
Prepping Your Browser
I find that the easiest way to take care of this issue is by using Chrome and the Developer Console to use a couple of functions that assist in removing the history records. The scripts that will be posted below require jQuery to run. Not all SharePoint environments/pages will have jQuery readily available, but we can load jQuery into the page we’re using right through the console. To do so, open your Chrome developer console (F12 key) and select “Console” as shown below.
var jq = document.createElement(‘script’);
jq.src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”;
document.getElementsByTagName(‘head’)[0].appendChild(jq);
Next, we can inject jQuery into the current window by copying and pasting the following code into the console and hitting Enter. At this point, jQuery should now be available for use in our current window.
Purge Functions
Next, we can look into the functions that will be assisting us in purging these lists. There are two main functions, deleteOldHistory and an ajax call that will run in conjunction with the first function. I will put these two functions below and we can discuss them.
Ajax Function
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + “/_api/Web/Lists/GetByTitle(‘NintexWorkflowHistory’)/Items?$top=5000”,
type: “GET”,
cache: true,
contentType: “application/json;odata=verbose”,
headers: {
“accept”: “application/json;odata=verbose”,
},
success: function(result) {
var results = result.d.results;
var count = 0;
for(var i = 0; i < results.length; i++){
var lastModified = new Date(results[i].Modified);
var todaysDate = new Date(‘2018-01-01T20:51:31Z’);
if(lastModified < todaysDate){
deleteOldHistory(results[i].ID);
}
}
},
error: function (error) {
console.log(JSON.stringify(error));
}
});
Delete Old History Function
function deleteOldHistory(id){
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + “/_api/Web/Lists/GetByTitle(‘NintexWorkflowHistory’)/Items(“+id+”)”,
type: “POST”,
headers: {
“ACCEPT”: “application/json;odata=verbose”,
“content-type”: “application/json;odata=verbose”,
“X-RequestDigest”: $(“#__REQUESTDIGEST”).val(),
“IF-MATCH”: “*”,
“X-HTTP-Method”: “DELETE”
},
success: function (data) {
console.log(‘deleted’);
},
error: function (error) {
console.log(JSON.stringify(error));
}
});
}
To start, we will want to add the deleteOldHistory function in the Chrome console first as the ajax call requires this function to work. This function is essentially being fed list item IDs from the history list that it will use to delete each item.
Next, the ajax call is the most important part. There is one main variable that we want to pay attention to and edit per your need, todaysDate. The todaysDate variable defines the date in which you want to delete records up until. So if you wanted to delete all records currently present but preserve records that are newer than 09/18 then todaysDate would be set to ‘2018-09-18T00:00:00Z’.
This means that the Nintex Workflow History List would be purged of all records that have a modified date less than that of the 9/18 date. As a side note, you will notice that the query uses the query property $top=5000. In this case, the script deletes records in batches of 5000 and will most likely need to be run multiple times to clear the list completely. However, instead of taking 6+ hours per batch of 5000 it should only take about 2-5 minutes. Simply execute the same ajax command in the Chrome console until you’ve removed all desired records.
Checking the Current History List Count
Unlike other lists in SharePoint, the Nintex Workflow History List doesn’t give a readily available count of all the items it currently has. While still utilizing the Chrome console you can run a quick ajax query (as shown below) to pull back the current count of items. This will give you a good idea of how many records are left and how many more you have to delete.
Check History List Count
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + “/_api/Web/Lists/GetByTitle(‘NintexWorkflowHistory’)/ItemCount”,
type: “GET”,
cache: true,
contentType: “application/json;odata=verbose”,
headers: {
“accept”: “application/json;odata=verbose”,
},
success: function(result) {
console.log(result.d.ItemCount);
},
error: function (error) {
console.log(JSON.stringify(error));
}
});
From here, you should be finished, and your workflow history list will be clean. And hopefully, this helps you save some time on this administrative task. As a side note, it is still a good idea to purge records from SQL as per Nintex’s recommendation. This process can be found here.
Read Next: Enhancing Nintex Forms with Javascript
