Set default value of multiple-selection list lookup control

D
Badge +4

I've seen other similar posts but I have never done Javascript before so I don't know where to start. 

 

I want the end user to be able to select a Department from a drop-down which filters on which checkboxes appear for the Security Groups control. I have accomplished this part. However, I want the value of the Department drop-down to set the default value of the checkboxes. In addition to setting the default checked boxes, I also want the end user to be able to select more checkboxes if desired. I have read many forum threads and it seems as though this can only be accomplished with javascript. Below are the details of what I have so far. Can someone direct me as to what variables I need to create, where to add the javascript and a sample of javascript code?

 

I have a Nintex Form with the following controls: 

  • Department - connected to "Department" column which is a Choice drop-down.
  • SecurityGroups - connted to "Security Groups" which is a Lookup column
    • control settings: 
    • 6900i374CB0FB5954BAC1.png

The List that it looks up is called Security Groups and looks something like this: 

6901i492398D350EF30F5.png

When a user selects Sales from the Department drop-down on the nintex form, I want some of the checkboxes from the lookup column to be pre-checked. (sorry for the bad screenshot, I had to block out sensitive information). 

6902i7BA9D6C80FFE12F8.png

15 replies

MegaJerk
Userlevel 5
Badge +14

This seems pretty straight forward, but I have a few questions before I write anything up (so that I can get it right!). 


If you were to select a different department, let's say, changing from Sales to Marketing, and the user had checked a few additional boxes, should those values be cleared (leaving only the default 'All Users' checked), or should the values be left to what they were before the Department was changed? 


Is the Choice Control type for Distribution Group a Checkbox style (allowing multiple choices), or an Option Buttons style (allowing only (1) choice)? 




IF it's a Checkbox with Multiselect, if a user selects something other than 'All Users' for the Distribution Group, say, 'Contractors' (or one of the other options that are hidden), should All Users still be checked? 

Thank you for your time! 

D
Badge +4

Sorry for the late reply! Telework got me in a weird state of mind that I totally forgot I posted this. I think I checked it for a few days after I posted it but then stopped checking.  :)


 


I hadn't really thought that far out. I would say, yes if they change departments then we should clear the boxes back to the default. 


 


The distribution group is a check box (multiple-select). Once user selects the Department, I want certain boxes to auto select and then the user has the option to check additional boxes and the default will still be selected as well. So for example if the default for "Sales" is "Sales All Users" and the user selects the "Sales Contractors" checkbox, the "Sales All users" should remain selected. :)

MegaJerk
Userlevel 5
Badge +14

After the outbreak I was away from the office for several months, and am just now getting back to being able to help around here. I haven't forgotten about this, but won't be able to take it apart further until tomorrow. Sorry for the incredibly long wait!


 


I should have an answer soon.

D
Badge +4

No worries! I'm actually surprised you remembered at all. This pandemic has sure thrown everyone in a loop hasn't it. Looking forward to hearing your wisdom.

R
Badge +1

We are trying to do the exact same thing. Was a solution found? 

E
Badge +3

Hello -- Our team is trying to do the same thing and are having a hard time finding a solution that works.  I will continue to check back to see if there is a solution.  Thanks! 

MegaJerk
Userlevel 5
Badge +14

Well that took longer than expected. I was working on a critical NodeJs project, and it ate up every bit of my time. 

Here, finally, is a darn answer! 

First thing first. Let's take a look at the Test Form that I made: 



 


Simple enough. I have a choice control named "control_Department" that contains only two values - Sales and Marketing



 


As well as a List Lookup Control named "control_SecurityGroups" that is pointing to a list which contains a few entries (specifically the ones you show in your table in your original post). Note that this control is being filtered by the value of the Department choice control (pictured above).



 


Now that we have the controls out of the way, let's put in our first bit of JavaScript. Go to your Settings:



 


And expand the Custom Javascript area: 



 


Copy the code below, and paste it at the top of that text area. If you already have code in there, it should be alright to just drop it down a few lines and paste this posted code above it: 


var NCU = (function(NCU) {
NCU.FormVariables = (function(FormVariables) {

FormVariables.formType = (function(formTypeText) {
formTypeText = formTypeText.replace(/([^/]*(?=/))/|..+/gi, "");
return {
IsEditMode: formTypeText === "EditForm",
IsDisplayMode: formTypeText === "DispForm",
IsNewMode: formTypeText === "NewForm",
IsPreviewForm: formTypeText === "PreviewNintexForm"
};
}(_spPageContextInfo.serverRequestPath || window.location.href));

return FormVariables;

}(NCU.FormVariables || {}));

return NCU;
}(NCU || {}));


Save your Settings. This is going to create a global variable (NCU) that we'll use in a Formatting Rule.


 


Speaking of Rules, is your Rule Panel Open?



 


If not, using the Ribbon, click on the Rules Button to make it visible



 


With the Rule Panel Open, select your Security Groups Lookup Control, and then click on Add New Rule. I've named my Rule "DefaultGroup". The Rule Type should be set to Formatting (if it isn't already), and once you're done with that, click on the 'F of X' function symbol (f(x)) to open the code editor:



 


Once inside of the Formula Builder dialog, copy the below code into the Formula textarea: 


(function(formControlCall, department) {

"use strict";

/* Just initializing any of the variables we might use. */
var formControlID;
var targetControl;
var targetTable;
var tableDataCount;
var setTheControl = false;
var isDisabled = false;
var isHidden = false;
var defaultOption = "";

/*
Because it's easier and less confusing to do it now, let's
set the defaultOption value that you'd like to be checked whenever
the "control_Department" control is of a certain value.

As you can see from the below block, if the department control
is equal to "Sales" then the default option we want checked will
be "Sales All Users". Likewise, if the Department Control is set
to "Marketing" then we'll select "Marketing All Users" as the default
Distribution Group to check.

You can change these values to suit your needs!
*/
if (department === "Sales") {
defaultOption = "Sales All Users";
} else {
defaultOption = "Marketing All Users";
}

/*
If the form isn't in display (view) mode then we can continue.
*/
if (!NCU.FormVariables.formType.IsDisplayMode) {

/*
Boilerplate stuff to get the Distribution Group Lookup Control
that this Rule is firing on.
*/
formControlID = formControlCall.split("'")[1] || "";
targetControl = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control");

/*
Lookup Controls that are setup for Multi-Select Checkboxes use a
table to arrange the checkboxes (and their labels).
If you're seeing this, and are using a differently configured Lookup
control, you should probably assume that anything here referencing a
table should likely be changed!
*/
targetTable = targetControl.find("table");

/*
If no Department is set, then we won't have any Distribution Groups to
to choose, so let's count how many checkboxes there are.
Hint: If there are none, then we know no work needs to be done!
*/
tableDataCount = targetTable.find("td").length;

/*
Nintex Form Controls can be Hidden or Disabled by other rules.
If they are, then we likely do not want to set any values on a control
that isn't enabled. isDisabled and isHidden will return true if
the control in question has been Disabled or Hidden, respectively.
*/
isDisabled = Boolean(targetControl.data("DisableCounter"));
isHidden = Boolean(targetControl.data("HideCounter"));


/* !!!Now comes the pain!!! */


/*
A 'data-formcontroltypeid' of 'c0a89c70-0781-4bd4-8623-f73675005e15' the
controltypeid of a Lookup Control. This is just checking to see if that's
the type of control we're looking at here
*/
if (targetControl.attr("data-formcontroltypeid") === "c0a89c70-0781-4bd4-8623-f73675005e15") {

/*
Does our Lookup Control (Checkboxes // Multiple-Selection) actually
even have anything to select? If it does then continue.
*/
if (tableDataCount > 0) {

/*
We also need to make sure that this control isn't hidden or disabled
*/
if (!isDisabled && !isHidden) {

/*
When the Form is initialized, this rule can be ran by way of the Nintex
code that gets the form all setup. Checking to see if the 'event' variable
exists is a good way to check whether or not this rule is being ran because
of something a user did, or just by way of startup junk
*/
if (event !== undefined) {


/*
Every time you change the filter control to a Lookup, which forces the control
to recalculate its values, this rule will FIRST fire with an event.type of 'change',
which happens BEFORE the new values have been pulled down and set!
It will fire again with the event.type of 'readystatechange' AFTER the new values
have been put into place.
Because we wanna set the default value of the NEW values, we need to make sure that
we wait for THIS event.type!
*/
if (event.type === "readystatechange") {

/*
If we've made it this far then it's safe to say that we should set the value of the control
*/
setTheControl = true;
}
}
}
}
}
} else {

/*
If you aren't using a lookup control, then this is where you'll end up
Because I don't know which control you *are* using, I'll just assume that
you want to do work on it and will set the rule to process stuffs...

You should probably figure out whether or not you actually want that to happen!

This is only for people who might come to this thread at a later date / time.
*/

if (!isDisabled && !isHidden) {
setTheControl = true;
}
}

/*
if setTheControl === true,
then we know we should set the value of the control!
*/
if (setTheControl) {

/*
Using the 'contains' operator (*=) for the attribute 'data-nfchoicevalue'
we search for the string that our defaultOption has been set to (way up at the top),
and proceed to drill into the <input> element where we will set the 'checked'
property to true, subsequently checking the box!
*/
targetTable.find("td span[data-nfchoicevalue*='" + defaultOption + "'] input").prop("checked", true);
}


/* Because we don't want this format rule to ever actually change anything
on our form, we'll return false */
return false;
}("{Control:Self}", control_Department))

 


WARNING: You will need to make ONE change to this code in your environment! Specifically, you'll need to set the reference to your Department Control, whatever it may be called. As noted earlier, the choice control for Department was named "control_Department". The code you just copied has the literal text "control_Department" at the very end, but Nintex Forms doesn't recognize as meaningful. You'll have to erase that value, and insert the Named Control reference as shown: 


 



 



 



 


Once you have done that, you should be good to go! Click on the OK button to save this Rule. 


The last thing left to do is to test the Form. You can go to your Form Preview to see if things are working. When the form is loaded, the Email Distribution Group will be empty, as no Department has been selected: 



 


However, when you make a selection, the default option is automatically checked.



 



 


That just about wraps it up. Sorry this all took so long and is so crazy. Lookup Controls just happen to be a little more involved than regular Choice Controls. At some point in the near future, I'd like to finally release a little library of JavaScript that I've been working on which should go a long way in helping people to accomplish stuff like this without having to add so much scaffolding. 

If you have any questions about the code specifically, I have left lots of comments in there to show what's happening, however I will also gladly answer any specific questions any of you may have in regards to something. 

Hope this solves the problem! 

Over and out!


 


 


 


 


 


 

MegaJerk
Userlevel 5
Badge +14

Additionally, if anyone wants that Rule's code without the comments, here it is: 


(function(formControlCall, department) {
"use strict";

var formControlID;
var targetControl;
var targetTable;
var tableDataCount;
var setTheControl = false;
var isDisabled = false;
var isHidden = false;
var defaultOption = "";

if (department === "Sales") {
defaultOption = "Sales All Users";
} else {
defaultOption = "Marketing All Users";
}

if (!NCU.FormVariables.formType.IsDisplayMode) {
formControlID = formControlCall.split("'")[1] || "";
targetControl = sourceContext.find("[formcontrolid='" + formControlID + "'].nf-filler-control");
targetTable = targetControl.find("table");
tableDataCount = targetTable.find("td").length;
isDisabled = Boolean(targetControl.data("DisableCounter"));
isHidden = Boolean(targetControl.data("HideCounter"));

if (targetControl.attr("data-formcontroltypeid") === "c0a89c70-0781-4bd4-8623-f73675005e15") {
if (tableDataCount > 0) {
if (!isDisabled && !isHidden) {
if (event !== undefined) {
if (event.type === "readystatechange") {
setTheControl = true;
}
}
}
}
}
} else {

if (!isDisabled && !isHidden) {
setTheControl = true;
}
}

if (setTheControl) {
targetTable.find("td span[data-nfchoicevalue*='" + defaultOption + "'] input").prop("checked", true);
}

return false;
}("{Control:Self}", control_Department))
E
Badge +3

@MegaJerk  Thank you! Before I try this, I wanted to get your thoughts -- we are trying to do something very similar to what the original poster wanted.  We want to select from a Look up list drop down and have it pre-populate a multi-select with the same value (and then the user can also select more options)  I have a thread here started, but still having a hard time with getting anything to work:


 


  https://community.nintex.com/t5/Nintex-for-SharePoint/Set-Multi-Select-field-value-based-on-Look-Up-List-drop-down/td-p/115391

MegaJerk
Userlevel 5
Badge +14

It will be similar in terms of what I would recommend (making a rule on the controller that you're going to set, instead of trying to use the RegisterAfterReady form event), but I won't be able to setup an example for a few more hours. 

Should have something later on though. I'll move all discussion about this over to the post you've linked. 

E
Badge +3

@MegaJerk Thank you very much, hoping to have time tomorrow to look back into this one.  

E
Badge +3

@MegaJerk I'm sorry to keep bugging you, I have tried this and I'm getting the error "'NCU' is undefined"  Am I supposed to put NCU somewhere as a variable?  Thanks so much. 

MegaJerk
Userlevel 5
Badge +14

You'll notice that in the instructions, the first block of code that I say should go into your settings in the Custom Javascript textarea, is for the NCU stuff. Once you do that, it should be good to go. However, again, everything posted below that really isn't going to work for what you're trying to do. 

D
Badge +4
@MegaJerk. I never said THANK YOU! for your reply to this!!!! What an amazing amount of work you put into coming up with a solution to my post. Our company ended up putting the email distro section no the form on hold for the time being so I haven't had an immediate need to try out your solution. But I love what your solution looks like so I can't wait to try it out some day!
MegaJerk
Userlevel 5
Badge +14

Not a problem! We're all here to learn and help when we can! Glad to see that the answer was comprehensive and useful, even if you're not going to implement it with the problem originally intended, it may still be useful for solving other related problems somewhere down the road. 


 


Let us know if you run into other issues and keep coming back! 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings