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.

Setting up the Form

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 titles “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).

Adding The Functionality

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

  • 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”

  • 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.

For this example the whole function would appear as follows:

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

  • 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.

  • 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:

var rolesArray = [ROLE1,ROLE2,ROLE3,...];
$.tabsetController = FCF.initTabsetController("#TABSETID");
if(rolesArray.indexOf(player.roleId) != -1) {
$.tabsetController.linkCheckboxToButton("#DATACHECKBOXID", TabIndex);

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 (tabs 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:

$.tabsetController.linkCheckboxToButton("#tabChk", 1);
$.tabsetController.linkCheckboxToButton("#tabChk", 2);

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:

var rolesArray = [1000];
$.tabsetController = FCF.initTabsetController("#tabset");
if(rolesArray.indexOf(player.roleId) != -1) {
$.tabsetController.linkCheckboxToButton("#tab2Chk", 1);
  • 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.

  • This document will walk you through how you can use the clevr Form Editor to configure show/hide...

    Continue reading
  • This document will address how to restrict date pickers, how to specify the length between them in terms of days, how to prevent users from picking dates which aren’t congruent with the specified length, and how to throw errors/a warning to the user...

    Continue reading
  • This function uses one or more field values to create a custom description for a record...

    Continue reading