Unique Repeater Values

  • 25 November 2015
  • 33 replies
  • 15 views

Badge +3

Hello,

 

Been building a repeater for taking in multiple issue items for my company.  Ran into a problem that I need one of the fields to be unique for each section of the repeater.  Anybody have any direction on how to do this?


Ben.


33 replies

Badge +7

Hi Ben,

Do you just need to number the rows? If that's it you can use a calculated value control in your repeating section and use formula currentRowNumber. See the attached link with Manfred Lauer's comment at the bottom of the page, Nintex Forms - Numbering a Repeating Section - Vadim Tabakman

Jan

Badge +3

Thanks for the suggestion Jan.

Sadly this is nothing that simple.


The idea is that the users can enter in a brief description of an item.  That description needs to be unique for each item.  So they could do something like...

Item A - Desc 1

Item A - Desc 2

Ben.

Badge +5

Hi Ben.

You should be able to use jquery to achieve this.

-assign a css class for the repeater control

- assign a css class for the control that needs to have unique value in the repeater control

-in your jquery code, On Repeater control change loop through the values already entered in the control and ensure they are all unique

if one value is duplicated then disable the submit button and have a onscreen error or show a error label.

Thomas

Badge +3

Thomas,

Thanks for the reply. That makes a lot of sense and sounds exactly like I need to do. Still learning the in's and outs of Nintex and repeaters in general.  Can I get an example of what kind of code I would need?  I learn best when I can see examples and adapt them.

Ben.

Badge +5

Hi Ben.

 

See below for my quick proof of concept.

 

Nintex Form Settings:

148579_pastedImage_0.png

Custom Javascript to include:

NWF$(document).ready(function()

{

  //event will be fired every time the new repeater textbox value is entered

  NWF$(".myTextboxValue").keyup(function() {

       EnsureUniqueValue()

     });

});

 

 

 

 

function EnsureUniqueValue()

{

  var duplicateValueFound=false;

  var rpArray= NWF$(".myTextboxValue .nf-textbox-wrapper input")

  var rpArrayValues=[]

 

//Push all non-empty values from repeating section to another array

  for (var i = 0; i < rpArray.length; i++)

  {

  if(rpArray.value !="")

  {

  rpArrayValues.push(rpArray.value)

 

  }

  }

//sort the array

  var sortedRpArrayValues = rpArrayValues.sort();

 

 

//check for duplicate values in the sorted array

    for (var i = 0; i < sortedRpArrayValues.length - 1; i++)

  {

     if (sortedRpArrayValues[i + 1] == sortedRpArrayValues)

  {

        alert("duplicate values not allowed: "+sortedRpArrayValues);

  duplicateValueFound=true;

      }

    }

 

//Hide new item add link and any other buttons (eg save button) you want hidden if duplicate values are found

  if(duplicateValueFound)

  {

  NWF$(".nf-repeater-addrow").hide()

  }

  else

  {

  NWF$(".nf-repeater-addrow").show()

  }

}

 

End result:

 

148580_pastedImage_19.png

 

Badge +3

You sir, are amazing.

Thank you so much!

Userlevel 5
Badge +13

Hey Thomas,

I'm trying to use array.length() in one of my forms, but keep getting the error that items.length is not a valid function. I'm sure I'm missing something simple, perhaps you can assist? The relevant code looks like this:

var options = [];
function showMe() {
{
var items = NWF$('#' + multiChoices + ' :checkbox:checked');
console.log(items);
var count = items.length();

for (i = 0; i < count; i++)
{
     var currentValue = items[i];
     console.log(currentValue);

     if (currentValue.endsWith(0))
     {
     options.push(1);
     }
     else if (currentValue.endsWith(1))
     {
     options.push(2);
     }

I was doing like your example and just having for (i=0; i < items.length(); i++) and only declared the count variable to see if that helped anything. I'm in O365 if that makes a difference.

I have a question going here   and Aaron has been helping, but I didn't know if you could assist on the .length() not working.

Userlevel 5
Badge +14

length is a property, not function.

so until you write your own length() function you should use it without braces.

JavaScript Array length Property 

Badge +5

I have responded to your original question happy.png

Yeah, as ‌ mentioned, .length is what you need is you want to check the length of an array. 

Userlevel 5
Badge +13

Yep, I realized that shortly after I asked the question. Thank you! This is my first Javascript adventure, so I was figuring it was something silly and then I finally found it.

Userlevel 5
Badge +13

Yep, I realized that shortly after I asked the question. Thank you! This is my first Javascript adventure, so I was figuring it was something silly and then I finally found it. Thanks for the help on my original question, Thomas!

Badge +4

Great sample, 

Can you advise of how to provide such script over the below form, Note that the radio button on the left is a SQL Request control that is displayed as radio option.

Also this value (radio) on the repeating section needs to be unique.

Note, I tried to cross the script in the link : 

https://community.nintex.com/thread/11579#comment-38579 

but seem I could not detect a single value for the radio option.

202734_pastedImage_2.png

here the portion of what I merged

 NWF$(document).ready(function()
{
//event will be fired every time the new repeater textbox value is entered
NWF$(".myBudget").change(function() {
EnsureUniqueValue()
});
});

function EnsureUniqueValue()
{
var duplicateValueFound=false;
var rpArray= NWF$(".myBudget input[type=radio]")
var rpArrayValues=[]
Badge +5

Hi shaker alzo3bi

In your case you need to adjust the code where it gets the existing repeated choice control values as they are rendered a bit differently from text controls.

You need to loop through your choice control values and add the radio button values that are selected. 

I am assuming you have assigned the cssclass myBudget to your SQL request choice control within your repeating section. 

Code Snippets below should do the trick.

NWF$(document).ready(function()
{
  //event will be fired every time the new repeater textbox value is entered
  NWF$(".myBudget input").change(function() {
       EnsureUniqueValue()
     });
});




function EnsureUniqueValue()
{
  var duplicateValueFound=false;
  var rpArray= NWF$(".myBudget input")
  var rpArrayValues=[]

//Push all non-empty values from repeating section to another array
  for (var i = 0; i < rpArray.length; i++)
  {
  if(rpArray[i].checked ==true)
  {
  rpArrayValues.push(rpArray[i].value)

  }
  }
 
 
  //remaining code should remain as is
 
  ....
 
  ....
 
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Badge +4

Thanks Thomas Xu it almost works..

but still allow on submit for two duplicate lines per the repeating section.

Is there a code that do the deletion for the detected duplicated line. instead of promt the eerro message.

Or how to run on the submit (Save) the duplication , by rerun the EnsureUniqueValue

function.

Regards,

shaker

Badge +5

Hishaker alzo3bi‌. 

Please kindly mark my answer as helpful it they are happy.png 

You can modify the following part of my original code to delete the duplicate row. You may want to modify the popup message so that user knows the duplicate row will be deleted automatically.

You need to add a cssclass to your repeating section , i have used .rpSection in my example below. And then replace the cssclass name in the code below with yours.

if(duplicateValueFound)
  {
  //NWF$(".nf-repeater-addrow").hide()
var indexToDelete=NWF$(".rpSection .nf-repeater-deleterow-image").length-1
NWF$(".rpSection .nf-repeater-deleterow-image")[indexToDelete].click()
  }
  else
  {
  NWF$(".nf-repeater-addrow").show()
  }
Badge +4

unfortunately it does not worksad.png

Badge +4

hi Thomas Xu as long as only two rows will be duplicated only out of n.. rows, then

if you know how to disable the (submit & save) action, on the form level, then this will be a great workaround, rather than the deleting the duplicated row.

Badge +5

Did you assign a CSS class to your repeating section and updated the code as I mentioned? I have tested in in my demo environment and it works.

Badge +5

Yeah ,

NWF$(".yourSubmitButtonCssClassName").hide()

Badge +4

This is disable the buttom on the form with specific class; great.

but not on the upper 

202824_pastedImage_2.png

how to disable this as well?

Badge +5

From memory there should be a property on the button setting itself that lets you conditionally show/hide the image button on the ribbon.

I don't have access to a computer at the moment to verify which property it is.

Badge +4

I got it on Design time, but needs by script time. happy.png

202825_pastedImage_1.png

Badge +4

BTW, is there a well known NWF$ scripting reference that can be used to to know all methods events,... for Nintex forms and controls.

Badge +9

Thomas Xu,

I have a form with a repeating section that has choice column. I want the repeating row to be automatically deleted, or show validation error, or a pop up while trying to save if duplicate choice. Could you please share a code for that works on any layout?

Badge +2

I have a similar validation request. In my case I have a list lookup control in a repeating section and my goal is to make sure that only one time it was selected. But I cannot find a way how to pull selected value of the control. I try to use NWF$(".FieldCss").options.selectedIndex);. Did anyone had this issue? How you got selected values of the lookup

Thomas Xu‌ 
Thank you for any help in advance!

Reply