cancel
Showing results for 
Search instead for 
Did you mean: 
themos
Nintex Newbie

Hide Choice Control option programmatically

Hey guys,

I'm using a button-rendered Choice control to create a Navigation Menu, like so:

I also used CSS to format the selected/unselected buttons using the predefined classes:

.Navigation .ui-state-default {

.Navigation .ui-state-active {

My question is, is there a way to use Javascript to programmatically hide one of the options in the Navigation Menu?

I tried using the following:

var pageToHide = 'Test Key Code Validation';

if (ActivePage.val() != pageToHide) {

    HideFromNavigation(pageToHide);

}

and the function:

function HideFromNavigation(pageName) {

    Navigation.find('input[value=\'' + pageName + '\']').prop('visible', false).change();

}

But no matter what I do, the specific input choice is not hidden!

I can't even seem to be able to change its CSS, e.g. use .css('border', '3px solid red');

Any ideas?!

Labels: (2)
0 Kudos
Reply
9 Replies
Not applicable

Re: Hide Choice Control option programmatically

Instead of .prop('visible', false).change(); try .hide();

Reply
themos
Nintex Newbie

Re: Hide Choice Control option programmatically

Hey Jeff,

Already tried it, it didn't work...

The selector retrieves an HTMLInputElement, and you can't set CSS on it (which is what .hide() does)!

I'm now checking to see if I can detect and hide its parent element instead!

0 Kudos
Reply
Not applicable

Re: Hide Choice Control option programmatically

You're right. Upon further review, these buttons are not rendered as straight input's - they are actually placed within span's.

Capture1.PNG

So to hide a certain value, this would be the syntax:

NWF$('span[data-nfchoicevalue=\'Test Keycode Validation\']').hide();

Of course, subbing in your variable instead of hard-coded like I did.

Capture.PNG

Reply
themos
Nintex Newbie

Re: Hide Choice Control option programmatically

I had done it slightly different than you, using

NWF$('span .ui-button-text:contains(' + this.value + ')').addClass('navigation-completed');

But I like your approach better!

0 Kudos
Reply
themos
Nintex Newbie

Re: Hide Choice Control option programmatically

Jeff,

Instead of hiding the choice option, have you tried changing its CSS style/class e.g. to set a different background?

Your approach seems to change the background color BEHIND the button, whereas the "span .ui-button-text" selector works correctly!

The problem, however, is that the new CSS class that I add to it seems to override the styles for the .ui-state-active selector, even though I do not use !important...

So if I change the bg-color for the first 3 buttons (e.g. to indicate flow completion status), then click on one of them (thus triggering the .ui-state-active selector), I only see the background from the NEW class and NOT the background defined in state-active (which is set using !important)!

Any thoughts/ideas on how I could make that work?

0 Kudos
Reply
Not applicable

Re: Hide Choice Control option programmatically

I'm sorry, I'm not following what it is you're trying to do.

Hiding the button should just remove the button - there's no reason for it to change any backgrounds.

So you want the active tab to be highlighted, is essentially what you're after?

0 Kudos
Reply
themos
Nintex Newbie

Re: Hide Choice Control option programmatically

Hey Jeff,

This has nothing to do with hiding the button, I'm talking about having e.g. 10 buttons in the Choice control, the first 3 to (programmatically) have a different background color/CSS class, but still display the .ui-state-active formatting if one of them is clicked!

This is how I add the new class programmatically:

NWF$('span .ui-button-text:contains(' + this.value + ')').addClass('navigation-completed');

.navigation-completed {

    color: white !important;

    background-color: mediumseagreen;

}

.ui-state-active {

    color: white !important;

    background-color: #E06149 !important;

}

However, the formatting specified in this new .navigation-completed class is always being used in the buttons in question, even if one of those buttons is clicked (and its state becomes ui-state-active!)

I was able to bypass this issue by using a background-url in .navigation-completed (instead of changing the bg-color), but I was curious if we could make it work with the bg-color as well!

0 Kudos
Reply
Not applicable

Re: Hide Choice Control option programmatically

Sorry I just want to understand the goal:

The user completes the data in each tab, when the button is active it gets the .ui-state-active class, when the data has been completed then that button gets the .navigation-completed class?

0 Kudos
Reply
themos
Nintex Newbie

Re: Hide Choice Control option programmatically

I check each tab's status as soon as the form loads, and add the new class to the completed pages (e.g. the first 3).

However, the user is free to click on ANY of the buttons in the navigation menu, and the active/selected button should have a specific background, regardless of completion status

0 Kudos
Reply