Tabs in SharePoint form

Опишу краткий пример как добавить функционал jQuery UI к формам SharePoint на примере табов.
Каких то особых изменений при добавлении на обычную страницу не имеется.
Создайте новую форму просмотра.
Добавьте на нее html перед таблицей с полями:

<div id="tabs">
    <ul>
        <li><a href="#FieldGroup1">Поле 1 и 2</a></li>
        <li><a href="#FieldGroup2">Поле 3 и 4</a></li>    
    </ul>
    <div id="FieldGroup1"></div>     
    <div id="FieldGroup2"></div>
</div>

Потом сделайте ссылки на необходимые файлы В нашем случае это сама библиотека jQuery, библиотека jQuery UI и на CSS:

<script type="text/javascript" src="/ScriptLibrary/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery-ui-1.10.4.min.js"></script>
<link href="/ScriptLibrary/jquery-ui-1.10.4.min.css" rel="stylesheet">
<script type="text/javascript">
function myOnload(){
    $('#tabs').tabs();
}
_spBodyOnLoadFunctionNames.push("myOnload");
</script>

Как результат Вы увидите табы. Теперь необходимо в них добавить поля. Представим что в нашем списке 2 поля: Title; Title2. Добавьте в div c id="FieldGroup1" html:

<div id="FieldGroup1">
<table border="0" cellspacing="0" width="100%">    
 <tr>
  <td width="190px" valign="top" class="ms-formlabel">
   <H3 class="ms-standardheader">
    <nobr>Title<span class="ms-formvalidation"> *</span>
    </nobr>
   </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
   <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
   <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
  </td>
 </tr>
</table>

а в div c id="FieldGroup2" html:

<div id="FieldGroup2">
<table border="0" cellspacing="0" width="100%">    
 <tr>
  <td width="190px" valign="top" class="ms-formlabel">
   <H3 class="ms-standardheader">
    <nobr>Title2<span class="ms-formvalidation"> *</span>
    </nobr>
   </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
   <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title2" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title2')}"/>
   <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title2" ControlMode="New"/>
  </td>
 </tr>
</table>

Для скриншотов я использовал вариант с 4 столбцами: Title,Title2,Title3,Title4.

Все нажатия кнопки "сохранить" все данные удачно попадают в список.

Должен Вас заранее предупредить, что Вам придется самим реализовать механизм, который будет подсвечивать вкладки, в которых имеются незаполненные, но обязательные к заполнению поля. В противном случае пользователь подумает что форма сломалась.