Enable a Tab for a
Role Upon Trigger

The process of enabling tabs for a role based on a trigger can be broken down into 2 parts; disabling a tab or tabs upon a trigger, and conditional statements based on role. This document will outline how to have tabs be either enabled or disabled for specific roles based on a checkbox.

The first step in this process is to get the form elements set up. You will need to create the checkbox(es) you want to control the tab(s) and a set of checkboxes to store which tabs are to be loaded (This set must be outside of the tabset. It is recommended to apply the attribute/value pair of style/visibility:hidden;). The second set of checkboxes is necessary if there are triggers on tabs other than the first, as these triggers won’t load until those tabs are opened.

In this example the tab being controlled will be titled “Tab 2”, the checkbox controlling this tab will be labeled “Lock Tab 2”, and the checkbox storing which triggers are checked will be maintained in a blue container titled “Checks for Tabs”.

• The “Lock Tab 2” checkbox is a custom type Common: Checkbox | Label. (This will be referred to as the controlling checkbox from here on out).
• The “Checks for Tabs” checkbox is base type Check Box. (This will be referred to as the data checkbox from here on out).

Now that all the required elements are on the form, the functionality can be added.

1. First of all, the controlling checkbox needs to update the state of the data checkbox. In order to do this the data checkbox will require an id. Select the data checkbox and in the Options Table add the attribute id with an id of your choice as the value. For example “tab2Chk”

2. Now, in a text editor or coding environment (ex: https://jsfiddle.net/) construct a function which will update the data checkbox when the controlling checkbox is clicked. For this purpose the updateCheck() function should be used. This function takes a selector (in this case it will be the id of the data checkbox) and updates its value (true for checked, false for unchecked). The format is as follows:

In order to have the data checkbox maintain the same state as the controlling checkbox, an expression will be used in place of true/false:

This expression looks at the checkbox it is on, and if it is checked returns true, and if it is unchecked returns false.

3. Select the controlling checkbox, and in the Options Table apply the onchange attribute with the value being the previously constructed function.

4. Before moving to the next step, the tabset needs an id. Click on the tabset and add an id in the same manner as before.

5. Return to the text editor/coding environment and create a function which will enable/disable the tab(s) based on the status of the data checkbox. It will be a variation of the following:

Replace “TABSETID” with previously set id for the tabset.

The line: $.tabsetController.linkCheckboxToButton(“#DATACHECKBOXID”, 1); will have to be repeated and altered for each tab you want to control access to. DATACHECKBOXID will be replaced with the id of the data checkbox which controls the tab of the index of the following parameter (tab index’s start at 0/the second tab’s TabIndex is 1).

For example, if you had 1 checkbox controlling tab 2 and 3 you could have the following lines:

Inside of the “[ ]” of the rolesArray is where the role id number(s) will go. These will be the role id’s for the roles which will have access restricted based on the checkbox(es).

For the example in this document, assuming the role with restricted access had the id 1000, the following would be the function created:

Alternatively, changing the != to == in the line:

Will have the tab restricted for any role that isn’t in the [ ] of the rolesArray.

6. Return to the form and select the tabset again. This time the attribute after-tab-load needs to be added, using the previously constructed function as the value.

There are a few variables which can be altered in the above process in order to achieve the same results with different methods, the inverse result with the same or alternate methods, or a more complex system of steps involved with locking/unlocking a tabset.

1. First off, in place of a checkbox, any interactive element will work. For example, a button could be used that once clicked, would set the data checkbox to true using the following code on the onchange attribute.

2. If you want to have a button toggle access to the tab instead of simply unlocking it once clicked, you can replace “true” with an inverse bool of the data checkbox. If the data checkbox is checked, the function will say “false” if the data checkbox is not checked, the function will say “true”This can be done by using the following code in place of the simple line above:

3. Another method of control would be to have the tab lock/unlock based on a dropdown selection. There are a few ways to go about this, namely if there is anything at all selected by the drop down then lock/unlock the tab, if a specific option is selected in the dropdown then lock/unlock the tab, or depending on what is selected lock/unlock specific tabs. Again, all these methods will be placing code in the onchange attribute of the toggling element, in this case a drop down.
   1. The simplest of these methods is to enable the tab based on a simple check if any option has been selected. A use case of this would be to pair it with a custom disabling function so that once an option is selected in the dropdown, changes can no longer be made to the tab which has the dropdown on it, but access to a second tab is enabled. This would allow original information to be maintained while giving access to comment/update/edit fields.The code for locking the tab – which would go on the onchange attribute of the dropdown – would be similar to this:

Similar to the checkbox toggle, the same method is used, however in place of true/false it checks if the toggle has a value instead of checking if the toggle is checked. This function could be utilized in any onchange attribute of an element which can store data (text field, text area, dropdown, etc…).

2. In order to lock/unlock the tab based on a specific dropdown result the previous function will be used, however the result which you want to unlock the tab must be placed inside the closed quotations, and the comparison operator must be inverted (!== into ===). For example, if the result desired was “Option 2” then the following code could be used on the onchange attribute of the dropdown:

3. When control over access to multiple tabs is required, the process becomes more complicated. First off, for every tab to be controlled, a separate data checkbox is required. In this example 3 will be used. Each of them will require a unique id. For example, tab2Chk, tab3Chk, and tab4Chk

Along with this, the function described in Adding The Functionality step 5 will need to be altered. For this example, the tab will function the same for all roles, therefore the function will exclude the role check. The line:

will need to be repeated for each data checkbox, replacing #DATACHECKBOXID with the data checkbox id and the index of the tab which that checkbox should control. Remember that tab indexes start at 0.

The code block for this example would be as follows:

and this will go on the after-tab-load attribute on the tabset itself.

The final step is to set up a function which will toggle the specific data checkboxes based on the results of the dropdown. In this example, Option 1 will unlock tab 1, Option 2 will unlock tab 2, and Option 3 will unlock tab 2 and 3. Unless specified as being unlocked, the tabs will re-lock.

Note: if the dropdown to tab relationship is 1:1 then the following function will be unnecessary.

On the side of the form, outside of the tabset, a container to store the function must first be created. You could use the same container that stores the data checkboxes, or create a new one. In this example the container which holds the data checkboxes will be used. The attribute docready must be added, paired with the following lockCheck function:

This function will be used to determine which tabs should be unlocked based on the dropdown value. The element parameter refers to the drop down element, while the tabArray parameter will take in the drop down value(s) which will enable the tab. tabArray can either be a single string for one value, or an array of strings in order to handle multiple values.

Last but not least, the functions which directly toggle the data checkboxes must be created and added to the onchange attribute of the dropdown. In this example, the following code would be used:

Breaking down the above code, compared to the previously described methods to toggle the data checkboxes, in place of true or false is the lockCheck function.

The first line is for tab 2. The lockCheck function will return true only if the dropdown has a value of Option 1, therefore unlocking tab 2.

The second line is for tab 3. The lockCheck function will return true if the dropdown has a value of Option 2 or Option 3, therefore unlocking tab 3.

The third line is for tab 4. The lockCheck function will return true only if the dropdown has a value of Option 3, therefore unlocking tab 4.

In combination, these lines of code will only allow tab 2 to unlock if the dropdown is set to Option 1, only tab 3 will unlock if the dropdown is set to Option 2, and tab 3 and 4 will unlock if the dropdown is set to Option 3.

If the value to tab locking relationship is 1:1, then the following line can be used. This does not require the lockCheck function.

This line will have to be repeated for every data checkbox id. “DropDownValue” will be replaced with the value associated with the data checkbox of the indicated id.

4. If the desire is to invert the state of the tab from how it is controlled per the examples in this document, then a few changes will be made. Using the dropdown controlling different tabs example, the following will describe the steps needed to disable tabs when the data checkbox is checked.
   1. First off, a function to disable tabs based on if a data checkbox is checked must be created. Similar to the function before, in a container off to the side of the tabset, add the following code to the docready attribute.

The element parameter refers to the triggering checkbox (which will probably be this) and the tabList parameter is used for the tab index(es). tabList can either be a single number or an array of numbers (ex: [1,2,5]).

2. Secondly, the checkboxes themselves will need to call this function on the after-tab-load attribute and the onchange attribute. Use this as the element parameter, and the tab indexes the checkbox will control as the tabList parameter. In this example, the following lines are used for the checkboxes with the described ids:
   id: tab2Chk; This will lock tab 2 if it is checked:

id: tab3Chk; This will lock tab 3 if it is checked:

id: tab4Chk; This will lock tab 3 and 4 if it is checked.