Page 1 of 1

Hide Tab depending on condition

Posted: 12 Jun 2018
by CI_Jack
Has any one worked out how to hide a tab

I'm looking to hide / show tabs depending on the status field

many thanks in advance

J

Re: Hide Tab depending on condition

Posted: 12 Jun 2018
by Nikita Kurguzov
Dear Jack,
Please, check out the following article - https://spform.com/javascript-framework ... point-2010

Re: Hide Tab depending on condition

Posted: 12 Jun 2018
by CI_Jack
thanks,

I have used the following JS but it doesn't work, the field I am referring to internal name is Status, and its the 4th tab called Lost reason

// Enable or disable 'Resolution' tab
function setResolutionTab() {
var v = fd.field('Status').control().value();
if (v == 'Closed - Lost' || v == 'Closed - No Bid' ) {
$('#fd_tabcontrol-0').tabs('option', 'disabled', null); // Enable
} else {
$('#fd_tabcontrol-0').tabs('option', 'disabled', [3]); // Disable
}
}

// Subscribe on status change
fd.field('Status').control().change(function () {
setResolutionTab();
});

// Initialize
setResolutionTab();

Re: Hide Tab depending on condition

Posted: 12 Jun 2018
by Nikita Kurguzov
Dear Jack,
The code is used to disable the tab. You also need to have the following CSS to hide it:

Code: Select all

.ui-tabs .ui-state-disabled {
  display: none; /* disabled tabs don't show up */
}
If this doesn't work, check how many Tab controls you have. If you have more than one, then you'll need to replace #fd_tabcontrol-0 with #fd_tabcontrol-1 or #fd_tabcontrol-2. Also, check the internal name and values of Status field to make sure it's the same as the ones you use in the code.