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

Using a Checkbox as a "Confirm you understand"

Hi all,

We've all seen forms around the internet where you have to explicitly click a check box to say you've read and understood the terms and conditions and it won't let you continue until you do....

Basically, I want to do the same on my (Responsive) form.

I have a checkbox (not connected to any backing field) which is used in a Rule for the Submit button... the rule only seems to allow one of two ways to work:- 

Option 1. I can  disable the button ignoring any clicking on it   .. however the button has no "state" differentiation and still shows the same as if it was enabled... users will wonder "Why doesn't this button work"

Option 2. I can hide the button but then the users will ponder "How on earth do I save this form"

Neither of which provide a look and feel that I am happy with.... Ideally, I want option 1 but I want the button to go "dim" to show that its not clickable and then they can scan the form to check they've done all they should.

Any suggestions welcome please.

Thanks.

Labels: (3)
0 Kudos
Reply
3 Replies
Automation Master
Automation Master

Re: Using a Checkbox as a "Confirm you understand"

Being that you're using Responsive Forms, it's more difficult to provide any type of solution that will stand the test of time because Nintex has chosen to no longer support easy css / javascript changes. So, while I can provide a solution that works now, there is no telling if it will continue to work as I am not familiar with how they plan on changing things in the future (especially with Universal Forms / Rules around the corner). 

So, if you upgrade, make sure that you TEST the Form before committing to it.

Now that we have that out of the way... 

Here's the Form Controls in question:

Here are the settings on the Yes/No Control: 

Now... Select the 'Save' Button and create a New Rule button in the Ribbon at the top of your screen:

The Rule Editor should open up from the Right Side of your screen. I have mine configured as seen:

The Copy / Paste javascript is: 

(function(formControlCall, checkBox, opacityValue){
  "use strict";
  var formControlID = formControlCall.split("'")[1] || "";
  var targetControl = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control");
  var internalElement = targetControl.find("[formcontrolid][id]");
  internalElement.css({opacity: ((checkBox) ? 1 : opacityValue)});
  return !checkBox;
}("{ControlSmiley Frustratedelf}", {someCheckbox}, .25));

Please Note: You will need to replace the bottom value {someCheckbox} with the Named Reference that shows in Red:

Resulting in the following looking reference in your formula.

Previewing the Form, you can see it with the checkbox left unchecked:

and Checked:

I hope that this helps. If you want to change the opacity, you can just change the numeric value that is in the 3rd argument position (which I have set to .25 initially). Opacity only ranges from 0 (fully invisible) to 1 (fully visible), so you can change the range 0, .01, .02....~1.00 

Reply
bo55vxr
Nintex Newbie

Re: Using a Checkbox as a "Confirm you understand"

Wow ... that's some reply ... I will give that a try ... I didn't know you could by JS in the "when" section but I can totally see what's going on..

Very elaborate solution...

0 Kudos
Reply
Automation Master
Automation Master

Re: Using a Checkbox as a "Confirm you understand"

If you're interested in learning more about the subject, I have written a detailed guide on how to utilize JavaScript inside of the Rule System here:  


It's an incredibly helpful thing to know in situations such as this!

Reply