Tabify… Tabify? Is that a word? Spellcheck says no, but there are plenty of Google search results that use the word, so we’ll go with “maybe”.
Anyway, I’ve got a couple of blog posts that have been quite popular; one for placing SharePoint Web Parts into jQuery UI tabs (http://www.markrackley.net/2015/08/16/sharepoint-tabbed-web-partshillbillytabs-3-0/) and the other for modifying the out of the box SharePoint forms (http://www.markrackley.net/2013/08/29/easy-custom-layouts-for-default-sharepoint-forms/). It struck me, why not combine these two posts and create a simple script that would allow users to easily place their fields in a SharePoint form into jQuery UI tabs without the need to write any HTML templates or even specify which fields to move.
And that’s what I did.
Using the script in this blog post you can take any of your SharePoint forms and break them up into tabs. This way you don’t have that one long, ugly, un-styled SharePoint form that drives users crazy. Now you’ll have a well organized, stylized form that drives users crazy.
So, let’s walk through this. the steps you’ll need to follow should be super easy if you’ve ever used one of my previous solutions:
- Take the sample script below and tweak as necessary (I promise, it’s easy)
- Upload the script to a document library in SharePoint
- Put a Content Editor Web Part on the SharePoint Form in question
- Link the Content Editor Web Part to the script you uploaded in step 2.
- Ta.. and… da…
Below is the script you’ll be uploading to your document library. The only thing you need to do is specify the titles of the tabs you want and the number of fields you want in each tab in the “tabInfo” array. You can have as many or as few tabs as you’d like. Also, if there are any “leftover” fields they will just appear below the tabs. That’s all there is to it. If you want to change the order of your fields you’ll need to do that from SharePoint itself.
For instance if you wanted to have 5 tabs with 3 fields each you would configure the “tabInfo” array as follows
var tabInfo = [
Still confused? Just watch the video below which walks you through the entire process.
thanks again for stopping by and enjoy!?!
Want even more form goodness??? Be sure to check out our free tool StratusForms to create powerful, responsive, dynamic business forms in SharePoint.