Thanks - I have actually made progress. I can use jQuery to set the background color by adding a button to click (proof of concept). What I really need is a way to have it run a function on change of a choice field (radio buttons). I think my question is less “Nintexy” and more JS.
I learn by seeing examples and then modify them to my needs, so I was hopping someone could save me some googling/trial and error.
Thanks.
Here is the JS I am trying to use - I must have a syntax issue or the like (new to Nintex’s flavor of jQuery). At this point, when I add this JS, the form preview fails to load.
Any assistance is appreciated!
NWF$('inputptype=radio]iname=ctl00$PlaceHolderMain$ctl00$ctl00$ListForm2$formFiller$FormView$ctl22$ctl04$3a8b1fd8_b97b_499a_aaa2_8203b5f192ce]').change(function() {
if (this.value == "No FRD updates required, documentation reviewed") {
alert("No FRD");
}
else if (this.value == "Yes- Pending FRD updates performed, documentation reviewed") {
alert("Yes FRD");
}
else if (this.value == "N/A – No documentation") {
alert("N/A");
}
else if (this.value == "Clear Certification") {
alert("Clear!");
}
});
Here is an inspection of the radio button values:
<input id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl22_ctl04_3a8b1fd8_b97b_499a_aaa2_8203b5f192ce_0" type="radio" name="ctl00$PlaceHolderMain$ctl00$ctl00$ListForm2$formFiller$FormView$ctl22$ctl04$3a8b1fd8_b97b_499a_aaa2_8203b5f192ce" value="No FRD updates required, documentation reviewed" formcontrolid="51988316-5096-45fb-ae95-9f0eb628738e">
<input id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl22_ctl04_3a8b1fd8_b97b_499a_aaa2_8203b5f192ce_1" type="radio" name="ctl00$PlaceHolderMain$ctl00$ctl00$ListForm2$formFiller$FormView$ctl22$ctl04$3a8b1fd8_b97b_499a_aaa2_8203b5f192ce" value="Yes- Pending FRD updates performed, documentation reviewed" checked="checked">
<input id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl22_ctl04_3a8b1fd8_b97b_499a_aaa2_8203b5f192ce_2" type="radio" name="ctl00$PlaceHolderMain$ctl00$ctl00$ListForm2$formFiller$FormView$ctl22$ctl04$3a8b1fd8_b97b_499a_aaa2_8203b5f192ce" value="N/A – No documentation">
<input id="ctl00_PlaceHolderMain_ctl00_ctl00_ListForm2_formFiller_FormView_ctl22_ctl04_3a8b1fd8_b97b_499a_aaa2_8203b5f192ce_3" type="radio" name="ctl00$PlaceHolderMain$ctl00$ctl00$ListForm2$formFiller$FormView$ctl22$ctl04$3a8b1fd8_b97b_499a_aaa2_8203b5f192ce" value="Clear Certification">
I figured it out myself - the biggest stumbling block was how to determine the value of the selected radio button on change. Each time a form is generated, a unique html name for the form is created. Here are some instructions using jQuery and/or Nintex’s flavor of jQuery.
Note: for this example, I simply alerted the value on change - you could of course invoke another function as well.
Steps to implement (SharePoint for Nintex - SharePoint 2019):
- In the Advanced configuration of the Choice control, create a Client ID JavaScript variable name, in this case I used TLinePendFRChoice.
- In the Form Settings, add a call to jQuery in the Custom JS Includes section, like: https://code.jquery.com/jquery-1.12.4.min.js; or depending on what else you are doing, use Nintex's built in jQuery clone (NWF$ syntax) and omit this step. If you do, be sure to use the second block of code below.
- Add your choice of code blocks below into the Form Settings Custom JavaScript section.
Note: The _spBodyOnLoadFunctionNames.push is a more elegant version on jQuery's document ready function, which has a hard time with some SharePoint/Nintex timings. If you have a lot to do after the page loads, add it all in this function as you would a document.ready function.
I hope this helps someone!
//Using jQuery
_spBodyOnLoadFunctionNames.push("myCustomFunctionName");
function myCustomFunctionName() {
$('#'+TLinePendFRChoice).change(function(){
var value = $($('#'+TLinePendFRChoice).find("input:checked")).val();
alert(value);
});
}
//Using Nintex's built in jQuery
_spBodyOnLoadFunctionNames.push("myCustomFunctionName");
function myCustomFunctionName() {
NWF$('#'+TLinePendFRChoice).change(function(){
var value = NWF$(NWF$('#'+TLinePendFRChoice).find("input:checked")).val();
alert(value);
});
}