Solved

Using rule or custom javascript to set panel css (specifically background color)

  • 18 July 2023
  • 4 replies
  • 165 views
B
Userlevel 1
Badge +8

Classic designer.  Client would like the panel background color to change once a combination of values is set to provide a quick visual clue.  I know how to set CSS in HTML via jQuery, just looking for a Nintex Form equivalent.  Basically looking for the setting of 5 or so radio buttons (Nintex Choice form fields).

Of course, if there is a non custom solution (like a form rule that can alter the CSS)< I am all for that as well.

I have always used responsive, so have no idea where to start as far as where to store scripts - can I call a newer version of jQuery than what is baked in?

Thanks for any guidance!

icon

Best answer by bgarvey 20 July 2023, 21:10

View original

4 replies

bamaeric
Userlevel 5
Badge +13

This blog post might get you the results you are wanting.

CSS - How Do I Change the Background Color of a Panel? | Community (nintex.com)

B
Userlevel 1
Badge +8

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.

B
Userlevel 1
Badge +8

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$('input[type=radio][name=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">

 

B
Userlevel 1
Badge +8

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):

  1. In the Advanced configuration of the Choice control, create a Client ID JavaScript variable name, in this case I used TLinePendFRChoice.
  2. 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.
  3. 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);
		});
}

 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings