Repeating Section Rows Resizing With Hidden Controls

  • 26 September 2018
  • 12 replies
  • 6 views

Badge +4

REPEATING SECTION INFO:
Repeating Section has three (3) label and three(3) input text controls with 'Hide' Rules. 
The 'Hide' Rules are dependent on the value selected from another dropdown/CHOICE control.

EXAMPLE:
The “AcntAssignment” dropdown/CHOICE control has a selection of four (4) options:  K, F, A P: 
WHEN “K” is selected, then nothing is required, and all of the below fields should be Hidden!!

Otherwise, there is basically two rules for each of the three controls:

A Hide Control:  AcntAssignment !=='F'
A Validate Control:  AcntAssignment == 'F' && isNullOrEmpty({Control:Self})
Message:  Internal Number Entry Required

A Hide Control:  AcntAssignment !== 'A'
A Validate Control:  AcntAssignment == 'A' && isNullOrEmpty{Control:Self})
Message:  Asset Number Entry Required

A Hide Control:  AcntAssignment !== 'P'
A Validate Control:  AcntAssignment == 'P' && isNullOrEmpty({Control:Self})
Message:  Project Number Entry Required


ONE ITEM OUTCOME:
Repeating Section looks and operates fine when there is one (1) item.


MULTI ROW OUTCOME:
Problem occurs when “Add Item” link is clicked, the Repeating Section gets all garbled when there are multiple items.


RULE CHANGE SCENARIO RESULT:
Changing the rules from 'Hide' Rules to 'Disabled' Rules alleviates the 'garbled' issue with the multiple items/rows within the Repeating Section but that is not a solution for the fields need to be 'Hidden' rather than 'Disabled'.


CONTROL PLACEMENT:
The placement of the controls are overlaid on top of one another to give it a single area effect although this has no bearing on the ‘hide’ rule working or not.  The controls were laid out side by side for testing purposes and it had no impact.


DESIRED OUTCOME:
A solution to have the 'Hide' Rule work properly or another solution to hide the controls and/or validate them when required.


12 replies

Userlevel 5
Badge +14

(update 1: So it would seem that sometimes when you're used to having to write crazy solutions to simple problems, you forget that there are simple solutions also... Please see my updated way of accomplishing this without any code in the reply below! I am not going to erase this answer (so that maybe others can learn to slow it down... or maybe just so that I remember to Keep It Simple (Stupid)), but the 'Correct Answer' should be removed from this, or ignored by any future people... sorry!) 

(update 2: Apparently using my new proposed "simple" answer way below this doesn't work in all cases (as OP pointed out), so if you try it but to bad results, you can always use this more complex method of doing things and obtaining the desired results... hopefully! Good Luck!)

To hide small Controls inside of a Repeating Section, I personally feel like it's best to write up a small css rule that will hide the Control to prevent triggering the resizing / repositioning of other Form Elements (as would typically happen in a Formatting Rule). 

There is a little setup to this, but it's reusable in lots of interesting ways. 

The Form Setup

The Form Consists of a Repeating Section, and (4) Controls. There are also (2) Panels shown but they are not particularly important: 

219277_pastedImage_4.png

(Note: The Control Names of each control is shown highlighted here. While "AccountAssignment" is the only control we're worried about in this example, I have shown all of the names for clarity)

The Choices for the AccountAssignment Choice Control are as follows: 

219284_pastedImage_6.png

(simply: A,F,K,P)

The CSS Setup

Copy the following css rule: 

.hideMe.nf-filler-control {  
  visibility: hidden !important;
}‍‍‍‍‍‍

And paste it into your Form Settings' Custom CSS textarea (or in your standalone css file if you're using one).

219276_pastedImage_1.png

All this does is allow us to apply the class "hideMe" to a Control, and when the Control is rendered on the Form, it will be hidden automatically. Not entirely useful on its own, but that's where Javascript comes in. 

Select all of the Controls (and Labels) that you wish to hide (as shown):

219285_pastedImage_11.png

Using the Top Ribbon, select the CSS Class input and type in our special class name - hideMe:

219286_pastedImage_12.png

All (3) of our Controls, and (3) of our Labels now have the hideMe class applied to them. 

The Form Rules Setup

Now that we have have applied our class to all of the controls that we want to be hidden when the Form loads, we can start adding in our Formatting Rules that will take care of toggling the visibility of the Controls. In total there will be (3) Rules, or, (1) Rule per Label / Input pair. 

Selecting the First Pair of Controls: 

219287_pastedImage_18.png

Create a Formatting Rule:

219288_pastedImage_19.png

(Note: I have named my rule "HideInternalOrderNum". Notice that I am NOT selecting the Disable or Hide option! Besides the name and a few aspect of the rule changing, this will be how each Rule is setup)

As for the Condition, click on the 'f(x)' formula button, and paste the following code: 

(function(formControlCall, isHidden) {
  "use strict";
  var formControlID = formControlCall.split("'")[1] || "";
  var targetControl = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control");

  if (isHidden && !targetControl.hasClass("hideMe")) {
    targetControl.addClass("hideMe");
  } else if (!isHidden && targetControl.hasClass("hideMe")) {
    targetControl.removeClass("hideMe");
  }
 
  return false;
}("{Control:Self}", AccountAssignment !== "F"))
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Now you'll notice in the above screenshot that I the term "AccountAssignment" is in red. That's because it's an actual Reference and should be replaced with the Named Control Reference of whatever you have named your Choice Control (which in the example I have given, is named 'AccountAssignment')!! The final result will look exactly as shown:

219289_pastedImage_144.png

You're going to do the same thing for the other controls, the only change being the portion at the end that indicates which value to hide on. 

For the Asset Number Control and Label: 

219290_pastedImage_149.png

The Rule : 

219291_pastedImage_150.png

(notice how we've changed the last condition to {AccountAssignment} !== "A")

For the Project / CPAR Number Control and Label: 

219293_pastedImage_152.png

The Rule:

219292_pastedImage_151.png

(notice how we've changed the last condition to {AccountAssignment} !== "P")

The End Results

When we generate a Form, if no Value or "K" has been selected: 

219294_pastedImage_159.png

219295_pastedImage_160.png


But for the other options: 

219296_pastedImage_161.png

219297_pastedImage_162.png

219298_pastedImage_163.png

Adding a new row = No Problem:

219299_pastedImage_164.png

Outro

I hope this helps you do what it is you're looking to do. There were a few different approaches to solving the problem, and while this one may seem long-winded, it also (from my perspective) seemed like the easiest to understand at a glance. Additionally, if you want to overlay your controls so that they only occupy one space on the form, you can do that! The only reason I have them separated out here is for clarity. 

Badge +4

N M‌ Fantastic solution and extremely clear to understand.  Greatly appreciated the education of how the Repeating Section row items work within Nintex Forms and the solution to the encountered problem. 

Userlevel 5
Badge +14

Heck yeah! I'm glad that it worked! 

Don't forget to mark your answer as solved so that other people with the same issue can search and filter this for a possible solution!


Badge +4
Upgraded Nintex Forms to version 2.11.4.10 and the forms (NewForm, DispForm, EditForm) no longer load; they completely error out.  It appears that the culprit is the code that is causing the issue on the form as for a test when I remove the rules, the form loads and does not error out. 
IE Dev Console
Userlevel 5
Badge +14

I assume that you can still Edit the form. If you remove the custom Rule that we made from all of the controls, will it then work? 

Badge +4

The NewForm, DispForm, EditForm will not load with the rules in place.  I have to delete the rules for the form to load. 

Userlevel 5
Badge +14

So I wanted to write up a little reply here to better show code examples. Essentially it seems that just using the basic '{Control:Reference} !== "Value"' will indeed work for the Formatting Rule, but when the Rule above is added, you're back to erroring out. 

I propose that we test, in a small way first, to see just how far we get before the Form will no longer Generate a Preview. 

Get rid of all of your rules, except for one. Check the Disable checkbox, and input the following formula: 

true;


Attempt to Generate a Preview. If it works, the Control should be Disabled. 

If that works, let's try this: 

(function(){return true;}())

That should do the same thing, but will establish that we can at least use a function. Did it work? If so, let's try...:

(function(){
  "use strict";
  return true;
}())


Did that work? If so, let's add: 

(function(formControlCall){
  "use strict";
  return true;
}({Control:Self}))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Now let's try: 

(function(formControlCall){
  "use strict";
  return true;
}("{Control:Self}"))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

(notice the Quotes around the {Control:Self}. You should be able to just copy / paste the above text as is. Don't worry about using Referenced Controls just yet)

Now let's try: 

(function(formControlCall){
  "use strict";
 
  var formControlID = formControlCall.split("'")[1] || "";
  return true;
}("{Control:Self}"))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Now let's try:

(function(formControlCall){
  "use strict";
 
  var formControlID = formControlCall.split("'")[1] || "";
  var targetControl = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control");

  return true;
}("{Control:Self}"))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If we've made it this far, that's rather hopeful. Let's try to go on and add in our Named Reference Control for {AccountAssignment}:

(function(formControlCall, isHidden){
  "use strict";
 
  var formControlID = formControlCall.split("'")[1] || "";
  var targetControl = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control");

  return true;
}("{Control:Self}", {AccountAssignment} !== "F"))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you can Generate a Preview of that, it seems like we might be getting close to where the problem is. Go on and make sure that you can also see the form once you publish it and attempt to go at it the way a normal user would (just in case). Afterwards, we can add in the rest:

(function(formControlCall, isHidden){
  "use strict";
 
  var formControlID = formControlCall.split("'")[1] || "";
  var targetControl = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control");

  if (isHidden && !targetControl.hasClass("hideMe")) {
   
  } else if (!isHidden && targetControl.hasClass("hideMe")) {

  }

  return true;
}("{Control:Self}", {AccountAssignment} !== "F"))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If that works... it means we're almost back to the rule that we had up there... which is neat. If not, that's alright, however for the sake of completion, here is the last iteration: 

(function(formControlCall, isHidden){
  "use strict";
 
  var formControlID = formControlCall.split("'")[1] || "";
  var targetControl = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control");

  if (isHidden && !targetControl.hasClass("hideMe")) {
    targetControl.addClass("hideMe");
  } else if (!isHidden && targetControl.hasClass("hideMe")) {
    targetControl.removeClass("hideMe");
  }

  return true;
}("{Control:Self}", {AccountAssignment} !== "F"))‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

If you can Generate a Preview, Publish this, and see it like a normal user, that at least will give some good feedback as to maybe what to do next. I'm going to stop for now, and hopefully some of this will help us to figure out just how broken things are, and if there is a work around. 

Thank you for your time. 

Badge +4

It bombed, the minuted I added:

(function(formControlCall){
  "use strict";
  return true;
}({Control:Self}))

Incidentally, when I took the {Control:Self} out, it worked...

(function(formControlCall){
  "use strict";
  return true;
}())

And I should comment that when {Self} name control is referenced instead, the same errors occur and the form does not work.

Further investigation uncovers that the {Self} named control cannot be referenced in neither a Validation Rule or a Formatting Rule as the Form breaks/errors when utilized without any IE Dev Console errors or SharePoint log contributions.  There must be a bug in the Oct 4 Nintex Forms release version 2.11.4.10 !

Userlevel 5
Badge +14

Well, do I ever feel silly. 

Ignore everything above in my first take on this. I have found that apparently something I thought didn't work (for who knows why), does totally work!


Setup the Rules to your Controls as you had them in the old days: 
219532_pastedImage_3.png

219533_pastedImage_4.png 219534_pastedImage_5.png 219535_pastedImage_6.png

Throw all of your control and labels into a Panel inside of your repeating section. 

219530_pastedImage_1.png

(Note: I have given my Panel a Green border so that it's easier to see which panel I'm talking about) 

Make sure that you turn off Automatic Resizing in the Settings: 

219531_pastedImage_2.png

From here, you should be good to go! You'll need to make sure that all of your Controls are Aligned on the TOP of that panel (meaning, that you should not have one Control that is slightly above the other ones) as shown:

219536_pastedImage_8.png

219537_pastedImage_9.png

Results: 

219538_pastedImage_10.png

Give that a shot and see if it works! 

Badge +4

This was originally tried and tested and never worked properly. 

Nintex support confirmed and was not able to get this to work either in my scenario. 

Badge +4

I ended up using a calculated value for the label with a IF runtime function which allows for html code to format the label accordingly (great!).  The IF statement allowed me to write the various conditions for the different needed labels.  I then used the named controls within the JS and that solved my issue.  Meanwhile, Nintex Support is working on a Hotfix for the latest release. 

Userlevel 5
Badge +14

Well I'm glad that you got it fixed and working, it's difficult to pin these things down being on a different version (2016) and all, so any workaround is awesome!

Also, Nintex confirmed that their update was broken? 

At least now we both know that we're not crazy! 

Reply