We have a request by a client to add “Next” buttons to the bottom of SharePoint 2013 and SharePoint Online forms with tabs to allow the user to advance to the next tab. Once the user reaches the last tab, the Next button should disappear and the Save button should be displayed.
Virto Forms Designer’s features can be extended with additional css and javascript coding. The described use case can be implemented with the following code inserted to Javascript editor.
$( document ).ready(function() { $(“.fd_save_td input”).val(‘Next’); PreSaveAction = function () { var allLi = $(‘.nav-tabs li’) var currentLi = allLi.index($(‘.nav-tabs li.active’)) if(currentLi != allLi.length-1){ var nextTab = currentLi + 1; $(allLi[nextTab]).find(‘a’).tab(‘show’); if(nextTab == allLi.length-1){ $(“.fd_save_td input”).val(‘Save’); } return false; }else{ return true; } } $(‘.nav-tabs li a:last’).click(function(){ $(“.fd_save_td input”).val(‘Save’); }); $(‘.nav-tabs li a:not(:last)’).click(function(){ $(“.fd_save_td input”).val(‘Next’); }); });
You can apply this code, for example, to SharePoint list edit form.
Now you can add all required info to the edit form, click Next to proceed to the next tab, and save the form on the last tab.
You can also apply distinct fields view permissions and use different form layouts to show the specific form views to users or user groups. Learn more about SharePoint form layouts in this article.
Tatiana Sushchenko is the product owner at VirtoSoftware. She started her IT career with the famous ABBYY Lingvo back in 2006 in Moscow. Then she moved to Microsoft performing strongly in various marketing management roles across Visio, SharePoint, Office 365 and Project for almost 10 years. Tatiana is a graduate of the Institute of Business Studies and holds a mini-MBA degree. She also graduated from Microsoft marketing excellence university.