The Tab container organizes form content in tabs.
You can add as many tabs as you need. To add a new tab, simply click on the plus symbol:
This page contains a detailed description of the container properties and JavaScript samples that you can use with this container.
Here you can find properties specifically related to the Tabs container.
A unique identifier for the container.
JavaScript
The Name property allows to work with the container via JavaScript code, like this:
fd.rendered(function(){
//hide container
fd.container('TabControl1').hidden = true;
});
The property defines the width of the container in pixels.
If left blank, the container takes up the entire available width in the current grid cell.
The property defines tabs position relative to the content inside.
Select tabs position form the dropdown:
Top:
Left:
Bottom:
In this section, you can find basic examples of how to work with the containers using JavaScript.
If you are not familiar with the JavaScript framework, get started with the JavaScript basics.
Note
The container is only accessible once the form is rendered, so all calls to the containers must be inside fd.rendered event:
fd.rendered(function(){
//hide the container
fd.container('Container1').hidden = true;
//show the container
fd.container('Container1').hidden = false;
});
Access HTML element inside the container.
//access container's HTML var htmlcontainer = fd.container('Container1').$el;
Hide a container from a user.
//hide container fd.container('Container1').hidden = true; //show container fd.container('Container1').hidden = false;
The property holds tabs of the container as an array of objects. Can be used to get tabs and their properties.
fd.container('Container1').tabs
Execute a function when a user switches between tabs:
fd.container('Container1').$watch('currentTab', function(newIndex, prevIndex) {
alert('Previous tab: ' + prevIndex);
alert('Current tab: ' + newIndex);
});
Disable or enable a tab:
//disable the second tab
fd.container('Container1').tabs[1].disabled = true;
//enable the second tab
fd.container('Container1').tabs[1].disabled = false;
Hide or show a tab dynamically using a combination of JavaScript code and CSS.
Disable the tab:
//disable the second tab
fd.container('Container1').tabs[1].disabled = true;
//enable the second tab
fd.container('Container1').tabs[1].disabled = false;
Add CSS styling to hide the disabled tab:
.fd-form .tabset .disabled{
display: none; /* hide disabled tabs */
}
Highlight specific tab using CSS:
/* set the second tab background */
.fd-form .tabset li:nth-child(2) a {
background-color: crimson !important;
color: white !important;
}
/* set the second tab background when it is opened */
.fd-form .tabset li:nth-child(2) a.active {
background-color: gold !important;
color: black !important;
}
Get the index of the currently opened tab:
//returns integer
fd.container('Container1').currentTab;
Open the next or previous tab:
//open next tab
fd.container('Container1').nextTab();
//open previous tab
fd.container('Container1').previousTab();
Open a tab by index:
//open the first tab
fd.container('Container1').setTab(0);
//oepn the last tab
fd.container('Container1').setTab(
fd.container('Container1').tabs.length -1
);
Get or set tabs position:
//returns the current tabs position
fd.container('Container1').orientation;
//set tabs position
fd.container('Container1').orientation = 'left';