@Dazler- With the second option you posted only one widget is needed. The widget is used to control which "tab" is selected. All the variables are created normally within the record producer thus allowing you to use UI policies and/or Client scripts as you would normally. (depending on requirements you might need to get a little creative)
The basic idea behind it is that you start with hiding all the variables.
The current_section variable holds the index number of the tab that would be selected; default first tab
The widget that holds the tab selectors populates the hidden current_section variable with the corresponding tab number
A Client script is used to show/hide variables based on the value in current_section (tab index number)
I'll add some screenshots of a mock up I did that includes using a variable that is mandatory in it's variable setup and a variable that is made mandatory via a UI policy based on a variable value that is in a different tab.
In my mock I changed some things to make it a little more clear (I hope) than what is presented in the link you posted.
Record Producer Variable setup:
Catalog Client Script setup:
Client Script: Initial Display
//Initial Display OnLoad
function onLoad() {
g_form.setDisplay('variable1_tab1', true);
g_form.setDisplay('variable2_tab1', true);
}
Client Script: Variable Controller
//Variable Controller OnChange (current_section)
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}
if (newValue == '0' || newValue == '1') {
//display variables for tab 1
g_form.setDisplay('variable1_tab1', true);
g_form.setDisplay('variable2_tab1', true);
//variables that should not dipslay on tab 1
g_form.setDisplay('variable1_tab2', false);
g_form.setDisplay('variable2_tab2', false);
}
if (newValue == '2') {
//display variables for tab 2
g_form.setDisplay('variable1_tab2', true);
g_form.setDisplay('variable2_tab2', true);
//variables that should not display on tab 2
g_form.setDisplay('variable1_tab1', false);
g_form.setDisplay('variable2_tab1', false);
}
}
UI Policies:
Variable with type Custom holding the custom widget to control the tabs
For the widget I didn't get fancy. I simply used what is already in Service Portal. But below is the widget setup.
Body HTML Template
<div>
<button ng-click="setTabIndex('1',$event)" class="btn btn-primary" data-tab-index="1">Tab 1</button>
<button ng-click="setTabIndex('2', $event)" class="btn btn-default" data-tab-index="2">Tab 2</button>
</div>
Client Controller
api.controller = function($scope) {
/* widget controller */
var c = this;
//g_form is avaiable via the page from $scope. Making it shorter here.
var gform = $scope.page.g_form;
$scope.setTabIndex = function(index, $event) {
var oldValue = gform.getValue('current_section');
if (index == '2') {
mandatoryCheck('variable2_tab1', oldValue, index, $event);
return;
}
gform.setValue('current_section', index);
$event.target.classList.remove('btn-default');
$event.target.classList.add('btn-primary');
setActiveButton();
}
function setActiveButton(){
var activeTab = gform.getValue('current_section');
$('[data-tab-index="' + activeTab + '"]').removeClass('btn-default').addClass('btn-primary');
$('[data-tab-index]').filter(function(){
return $(this).attr('data-tab-index') != activeTab;
}).removeClass('btn-primary').addClass('btn-default');
}
function mandatoryCheck(variableName, oldValue, newValue, $event) {
if (gform.isMandatory(variableName) && gform.getValue(variableName) == "") {
gform.showErrorBox(variableName, "Populate Mandatory field before moving on");
gform.setValue('current_section', oldValue)
return;
}
gform.setValue('current_section', newValue);
$event.target.classList.remove('btn-default');
$event.target.classList.add('btn-primary');
setActiveButton();
}
};
Again, I didn't get fancy with the code. It's simple so that it should be clear. It could be more optimized I'm sure but I'm sure you have specific requirements and if you use this it would be up to you to take the concept in modify to your needs.
Here is a working example of the functionality:
I only made four tabs here but the concept is the same for six or more. Here are the four UI Policies
Here is policy number one. If the tab_index is equal to 1 make the visibility for the item for tab one true and the rest false.
Here is policy two basically doing the same thing except the value is 2 and the variable that should show on tab two, its visibility is true and the rest false.
And policy three the same. Item(s) visibility for tab 3 should be true and the rest false.
Note: All of them Reverse if false is unchecked because there is more than just two scenarios.
Also note that this can be done with just hiding and showing containers instead of messing with all the variables you would just control the visibility of the containers.
