Skip to main content
Nintex Community Menu Bar
Solved

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

  • July 18, 2023
  • 4 replies
  • 256 views
  • Translate

Forum|alt.badge.img+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!

Best answer by bgarvey

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);
		});
}

 

View original
Did this topic help you find an answer to your question?

4 replies

bamaeric
Forum|alt.badge.img+13
  • Apprentice
  • 464 replies
  • July 18, 2023

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)

Translate

Forum|alt.badge.img+8
  • Author
  • Scholar
  • 57 replies
  • July 19, 2023

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.

Translate

Forum|alt.badge.img+8
  • Author
  • Scholar
  • 57 replies
  • July 19, 2023

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">

 

Translate

Forum|alt.badge.img+8
  • Author
  • Scholar
  • 57 replies
  • Answer
  • July 20, 2023

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);
		});
}

 

Translate

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings