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.
- 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.
- 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:
- 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.
- 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…).
- 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:
- 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.
- 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.
- 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]).
- 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.