cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Vinay_Katuri
Nintex Newbie

Create Dynamic Repeating section

Hello All,

I am here to share my experience on creating dynamic repeating section in the nintex form.

We will call the RestAPI to the List and get the data from the list and fill the fields dynamically in the repeating section.

firstly we have to create another list with Data , for example: "KPI" 

KPI is the list that we have created and use that list to get the data to the form fields in our Dynamic repeating section. 

  • Create the css class for the repeating section and also for the fields in the repeating section
  • CSS class name for repeating section(KPIData), CSS class names for the fields in the repeating section(KPINumber,Objective,Topic,Target,Period,Score0,Weight,Rating,Record)

Please look at the code below

//-----------------------------------------------------//
function GetKPI()
{
var result;
var RestUrl;
var hostweburl;
var appweburl;
var hostweburl1;
var appweburl1;
var pollSP;
var Dept = NWF$('#' + DeptVar).val();
var DeptFrom = NWF$('#' + DeptFormVar).val();
var Period = NWF$('#' + PeriodVar).val();


if(fn-Or(,)){ //editmode, display mode
pollSP = setInterval(checkSPLoad, 500);
}
function checkSPLoad() {
if (clientContext) {
window.clearInterval(pollSP);
GetActionDetails();
}
}
function GetActionDetails() {
hostweburl1 = "List Url";
appweburl1 = decodeURIComponent(Utils.getQueryStringParameter('SPAppWebUrl'));
//alert("App web URL: " + appweburl1)
getSomethingWithRESTAction();
}
function getSomethingWithRESTAction() {

Period = Period.replace("#", "%23");
// alert("Fetching KPI Data...! " +Period);
var context;
var factory;
var appContextSite;
var listName = "KPI"; // SharePoint list Name
context = new SP.ClientContext(appweburl1);
factory = new SP.ProxyWebRequestExecutorFactory(appweburl1);
context.set_webRequestExecutorFactory(factory);
appContextSite = new SP.AppContextSite(context, hostweburl1);
var executor = new SP.RequestExecutor(appweburl1);
RestUrl = "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('" + listName + "')/items?$select=No,Objective,Topic,Target,Period,Score0,Score1,Score2,Score3,Score4,Score5,Wt,DeptRating,KPIRecord &$orderby= No asc &$filter=Dept eq Software &@target='" + encodeURIComponent(hostweburl1) + "'";
var URLL = appweburl1 + RestUrl;
executor.executeAsync({
url: URLL,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function (data) {
redrawRepeatingTable();
var obj = JSON.parse(data.body);
var results = obj.d.results;
var i = 0;
for(i=0;i<=results.length;i++)
{

NWF$(".KPIData .nf-repeater-row:last").find('.KPINumber input').val(obj.d.results[i].No);
NWF$(".KPIData .nf-repeater-row:last").find('.Objective input').val(obj.d.results[i].Objective);
NWF$(".KPIData .nf-repeater-row:last").find('.Topic input').val(obj.d.results[i].Topic);
NWF$(".KPIData .nf-repeater-row:last").find('.Target input').val(obj.d.results[i].Target);
NWF$(".KPIData .nf-repeater-row:last").find('.Period input').val(obj.d.results[i].Period);
NWF$(".KPIData .nf-repeater-row:last").find('.Score0 input').val(obj.d.results[i].Score0);
NWF$(".KPIData .nf-repeater-row:last").find('.Score1 input').val(obj.d.results[i].Score1);
NWF$(".KPIData .nf-repeater-row:last").find('.Score2 input').val(obj.d.results[i].Score2);
NWF$(".KPIData .nf-repeater-row:last").find('.Score3 input').val(obj.d.results[i].Score3);
NWF$(".KPIData .nf-repeater-row:last").find('.Score4 input').val(obj.d.results[i].Score4);
NWF$(".KPIData .nf-repeater-row:last").find('.Score5 input').val(obj.d.results[i].Score5);
NWF$(".KPIData .nf-repeater-row:last").find('.Weight input').val(obj.d.results[i].Wt);
NWF$(".KPIData .nf-repeater-row:last").find('.Rating input').val(obj.d.results[i].DeptRating);
NWF$(".KPIData .nf-repeater-row:last").find('.Record input').val(obj.d.results[i].KPIRecord);


if(i==(results.length-1))
{
alert("KPI Data fetching completed...!");

}

if(i!=(results.length-1))
{
//add next row
NWF$(".KPIData").find('a').click();
}
}

// remove last, empty row
NWF$(".KPIData .nf-repeater-row:last").find('.nf-repeater-deleterow-image').click();


},
error: function (err) {
alert(JSON.stringify(err));
},
});
};

 


//function used to delete existing rows in repeating table leaving it as new
function redrawRepeatingTable() {
//delete all existing repeating table rows, then build them again
NWF$(".KPIData .toRemoveOnReload").each(function () {
NWF$(this).find('.nf-repeater-deleterow-image').click();
});
}
var Utils = {
getQueryStringParameter: function (param) {
var params = document.URL.split('?')[1].split('&');
var strParams = '';
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split('=');
if (singleParam[0] == param) {
return singleParam[1];
}
}
},
};
}

 

Labels: (1)
0 Kudos
Reply
1 Reply
allan
Nintex Newbie

Re: Create Dynamic Repeating section

You can format your code if you want Smiley Wink

function GetKPI() {
  var result;
  var RestUrl;
  var hostweburl;
  var appweburl;
  var hostweburl1;
  var appweburl1;
  var pollSP;
  var Dept = NWF$('#' + DeptVar).val();
  var DeptFrom = NWF$('#' + DeptFormVar).val();
  var Period = NWF$('#' + PeriodVar).val();

  if (fn - Or()) { //editmode, display mode
    pollSP = setInterval(checkSPLoad, 500);
  }

  function checkSPLoad() {
    if (clientContext) {
      window.clearInterval(pollSP);
      GetActionDetails();
    }
  }

  function GetActionDetails() {
    hostweburl1 = "List Url";
    appweburl1 = decodeURIComponent(Utils.getQueryStringParameter('SPAppWebUrl'));
    //alert("App web URL: " + appweburl1)
    getSomethingWithRESTAction();
  }

  function getSomethingWithRESTAction() {
    Period = Period.replace("#", "%23");
    // alert("Fetching KPI Data...! " +Period);
    var context;
    var factory;
    var appContextSite;
    var listName = "KPI"; // SharePoint list Name
    context = new SP.ClientContext(appweburl1);
    factory = new SP.ProxyWebRequestExecutorFactory(appweburl1);
    context.set_webRequestExecutorFactory(factory);
    appContextSite = new SP.AppContextSite(context, hostweburl1);
    var executor = new SP.RequestExecutor(appweburl1);
    RestUrl = "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('" + listName + "')/items?$select=No,Objective,Topic,Target,Period,Score0,Score1,Score2,Score3,Score4,Score5,Wt,DeptRating,KPIRecord &$orderby= No asc &$filter=Dept eq Software &@target='" + encodeURIComponent(hostweburl1) + "'";
    var URLL = appweburl1 + RestUrl;
    executor.executeAsync({
      url: URLL,
      method: "GET",
      headers: {
        "Accept": "application/json; odata=verbose"
      },
      success: function(data) {
        redrawRepeatingTable();
        var obj = JSON.parse(data.body);
        var results = obj.d.results;
        var i = 0;
        for (i = 0; i <= results.length; i++) {
          NWF$(".KPIData .nf-repeater-row:last").find('.KPINumber input').val(obj.d.results[i].No);
          NWF$(".KPIData .nf-repeater-row:last").find('.Objective input').val(obj.d.results[i].Objective);
          NWF$(".KPIData .nf-repeater-row:last").find('.Topic input').val(obj.d.results[i].Topic);
          NWF$(".KPIData .nf-repeater-row:last").find('.Target input').val(obj.d.results[i].Target);
          NWF$(".KPIData .nf-repeater-row:last").find('.Period input').val(obj.d.results[i].Period);
          NWF$(".KPIData .nf-repeater-row:last").find('.Score0 input').val(obj.d.results[i].Score0);
          NWF$(".KPIData .nf-repeater-row:last").find('.Score1 input').val(obj.d.results[i].Score1);
          NWF$(".KPIData .nf-repeater-row:last").find('.Score2 input').val(obj.d.results[i].Score2);
          NWF$(".KPIData .nf-repeater-row:last").find('.Score3 input').val(obj.d.results[i].Score3);
          NWF$(".KPIData .nf-repeater-row:last").find('.Score4 input').val(obj.d.results[i].Score4);
          NWF$(".KPIData .nf-repeater-row:last").find('.Score5 input').val(obj.d.results[i].Score5);
          NWF$(".KPIData .nf-repeater-row:last").find('.Weight input').val(obj.d.results[i].Wt);
          NWF$(".KPIData .nf-repeater-row:last").find('.Rating input').val(obj.d.results[i].DeptRating);
          NWF$(".KPIData .nf-repeater-row:last").find('.Record input').val(obj.d.results[i].KPIRecord);

          if (i == (results.length - 1)) {
            alert("KPI Data fetching completed...!");
          }
          if (i != (results.length - 1)) {
            //add next row
            NWF$(".KPIData").find('a').click();
          }
        } // remove last, empty row
        NWF$(".KPIData .nf-repeater-row:last").find('.nf-repeater-deleterow-image').click();
      },
      error: function(err) {
        alert(JSON.stringify(err));
      },
    });
  };
  //function used to delete existing rows in repeating table leaving it as new
  function redrawRepeatingTable() {
    //delete all existing repeating table rows, then build them again
    NWF$(".KPIData .toRemoveOnReload").each(function() {
      NWF$(this).find('.nf-repeater-deleterow-image').click();
    });
  }

  var Utils = {
    getQueryStringParameter: function(param) {
      var params = document.URL.split('?')[1].split('&');
      var strParams = '';
      for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split('=');
        if (singleParam[0] == param) {
          return singleParam[1];
        }
      }
    },
  };
}
Reply