In this article you can find examples of how to use JavaScript to make your SharePoint forms more interactive by hiding, showing and modifying containers, particularly Tab Control, Accordion and Wizard.
This article includes some simple and easy to understand cases which can then be used as templates for your forms. You can find similar examples for manipulating fields in this article.
Let’s say we have a form for an issue the employee is working on, and we divide various pieces of information using containers.
Here is our form with tabs:
Resolved tab stores fields that an employee needs to fill out after he completes the task. It makes no sense for this tab to be available at all times, so we can disable it and only make clickable once the issue status is changed to ‘Resolved’ using this code:
fd.rendered(function() {
function enableOrDisableResolvedTab() {
if (fd.field('Status').value == 'Resolved') {
//enable the second tab, in our case Resolved tab
fd.container('Tab0').tabs[1].disabled = false;
} else {
//disable the second tab, in our case Resolved tab
fd.container('Tab0').tabs[1].disabled = true;
}
}
//call enableOrDisableResolvedTab when a user changes the status
fd.field('Status').$on('change',enableOrDisableResolvedTab);
//call enableOrDisableResolvedTab on form load
enableOrDisableResolvedTab();
});
Moreover, you can hide disabled tabs with CSS:
.tabset .disabled{
display: none; /* hide disabled tabs */
}
Also, we can set the active tab programmatically. For instance, we can make Resolved tab active once the issue gets a ‘Resolved’ status with this code:
//switch between tabs when a user changes the status
fd.field('Status').$on('change',function(value){
if(value == 'Resolved') {
//setting the second tab as active
fd.container('Tab0').setTab(1);
}
esle {
//setting the first tab as active
fd.container('Tab0').setTab(0);
}
});
Or we can add buttons to our tabs to switch to the next or previous tab when clicked. That will make it easier for users to switch between tabs when they contain a lot of content, and Tab container orientation is set to ‘top’.
Place this code inside ‘Click’ setting for the Next Tab button:
fd.container("Tab0").nextTab();
And this code for the Previous Tab button:
fd.container("Tab0").previousTab();
Let’s implement the same functionality, but this time for Accordion container.
Here is our form with Accordion:
Let’s disable Resolved section and make it enabled only when the status is set to ‘Resolved’ with this code:
fd.rendered(function() {
function enableOrDisableResolvedSection() {
if (fd.field('Status').value == 'Resolved') {
//enable the second section, in our case Resolved
fd.container('Accordion0').$children[1].disabled = false;
} else {
//disable the second section, in our case Resolved
fd.container('Accordion0').$children[1].disabled = true;
}
}
//call enableOrDisableResolvedSection when a user changes the status
fd.field('Status').$on('change',enableOrDisableResolvedSection);
//call enableOrDisableResolvedSection on form load
enableOrDisableResolvedSection();
});
Resolved section can also be hidden just like a tab with CSS:
.accordion .disabled{
display: none; /* hide disabled sections */
}
In case you want to expand Resolved section once the issue gets a ‘Resolved’ status, you can use the following code:
fd.field('Status').$on('change',function(value){
//expand the second section, in our case 'Resolved', when the status is changed to 'Resolved'
if(value == 'Resolved') {
fd.container('Accordion0').$children[1].open = true;
}
});
We can divide information using Wizard container and show/hide steps dynamically.
Here is our form with Wizard:
Let’s hide Resolved step and show it only when the issue status is set to ‘Resolved’ using this code:
function showOrHideResolvedStep(resolvedTab) {
if (fd.field('Status').value == 'Resolved' && resolvedTab !== null) {
//show the second step, in our case Resolved
fd.container('Wizard0').widget.tabs.splice(1, 0, tab2);
}
if(fd.field('Status').value != 'Resolved') {
//hide the second section, in our case Resolved
fd.container('Wizard0').widget.tabs.splice(1, 1);
}
}
fd.rendered(function() {
var resolvedTab = fd.container('Wizard0').widget.tabs[1];
//call showOrHideResolvedStep when a user changes the status
fd.field('Status').$on('change',function() {
showOrHideResolvedStep(resolvedTab);
});
//call showOrHideResolvedStep on form load
showOrHideResolvedStep(resolvedTab);
});
We can navigate from one step to another using the code. For instance, open Resolved step when the issue status is changed to ‘Resolved’.
fd.field('Status').$on('change',function(value){
//open the second step, in our case 'Resolved', when the status is changed to 'Resolved'
if(value == 'Resolved') {
//that doesn't trigger validation
fd.container('Wizard0').widget.changeTab(0,1);
}
});