cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

How to Show Panel on Button Click


I want to display a panel when a button is clicked in my Nintex Form.

 

I've set up a hidden field and can populate this via Custom JavaScript when the button is pressed, I've created a rule for the Panel that works when the hidden field contains the value.

 

All well so far, the problem I have is that when the button is pressed the hidden field displays the value but the panel display does not update, If I go into the hidden field and press enter the panel displays so it looks like I'm missing a postback when the field is populated by the Custom JavaScript. Can anyone point me in the right direction for how to get the field to update so it registers the new value and fires the rule controlling the display.

 

I don't want to use a checkbox to initiate the action as I have other buttons that submit and cancel, this option is to capture some additional info before the form is submitted.

Labels: (2)
Reply
7 Replies
Not applicable

Re: How to Show Panel on Button Click

Figured this out now - The answer was to add a trigger to the custom JavaScript.

 

A bit of research on jQuery did the trick!

0 Kudos
Reply
zik500
Nintex Newbie

Re: How to Show Panel on Button Click

​hey,

could you please put your example

regards

0 Kudos
Reply
Highlighted
Not applicable

Re: How to Show Panel on Button Click

How to Show/Hide a Panel based on Button click

In my case I’m showing a Panel when a Close button is clicked, change the names/id’s to suit your scenario

Create a Single Line Textbox

1.png

Set the Default Value = 0 and set ‘Store Client ID in JavaScript variable’ to Yes and give the variable a suitable name - Hide the textbox by Sending it behind another field in the form.

Create a rule for the Panel you are trying to Show/Hide

2.png

Set the condition so that the Panel is hidden unless the Textbox has a value of 1

In the form Custom JavaScript create 2 functions

function showPanel()

{

NWF$('#' + closingID).val(1).trigger('blur');

}

function hidePanel()

{

NWF$('#' + closingID).val(0).trigger('blur');

}

The key bit here is the trigger('blur') otherwise the value sets but the rule won't fire

Finally on the Button to show the Panel, set the Button Action to JavaScript and call the ShowPanel function on the Client Click

3.png

If you want to re hide the Panel  - call the hidePanel function on another Button

0 Kudos
Reply
zik500
Nintex Newbie

Re: How to Show Panel on Button Click

thanks for your example it's work for me

0 Kudos
Reply
clxwas3
Nintex Newbie

Re: How to Show Panel on Button Click

NWF$('#'+closingID).toggle();

try it.

0 Kudos
Reply
marisar
Nintex Newbie

Re: How to Show Panel on Button Click

Thanks, worked perfectly for what I needed.

Reply
debosmita03
Nintex Newbie

Re: How to Show Panel on Button Click

How to do this in the O365 responsive forms? Responsive form does not support JavaScript.

0 Kudos
Reply