Bootstrap + SharePoint 2013 ItemForm (NewForm, EditForm, DispForm)

Сегодня я расскажу, как можно изменить дизайн форм элемента SharePoint используя Bootstrap.

Для начачала нужно скачать Bootstrap и jQuery и сохранить в библиотеке SharePoint, я сохранил в SiteAssets.
Далее открываем форму элемента и добавляем вебчасть «Редактор сценариев» и добавляем следующий код:

 После этого наша форма не изменится (немного поедет общая разметка, но об этом позже)
Для того, что бы форма изменилась, нужно к элементам добавлять классы Bootstrap и для этого прибегнем к javascript.

NewForm и EditForm

// изменение класса кнопок
$("[id*='diidIOSaveItem']").attr("class", "btn btn-success ms-ButtonHeightWidth");
$("[id*='diidIOGoBack']").attr("class", "btn btn-primary ms-ButtonHeightWidth");

Уже что-то, но не совсем то, что нужно, все дело в том, что SharePoint перекрывает часть стилей Bootstrap и нужно их переопределить.

.btn
{
font-size:14px !important;
}
.btn-primary
{
color:#fff !important;
background-color: #337ab7 !important;
border-color: #2e6da4 !important;
}
.btn-success
{
color:#fff !important;
background-color:#5cb85c !important;
border-color: #4cae4c !important;
}

Далее добавим стиль к полям          

>//Меняем стиль полей
$("[id$='TextField']").attr("class", "ms-long ms-spellcheck-true form-control");

 Получаем

 Поправляем CSS

.form-control{
line-height: normal!important;
display: inline-block !important;
height: inherit !important;
padding: 5px 5px 5px 5px !important;
}
.ms-long{
width: 384px!important;
}

 Добавляем проверку поля и Alert

function PreSaveAction()
{
if ($("input[id^='Field']").val() == '') // поле пусто

{

$("[id^='Field']").closest('span').append('

 Error:Внимание! Нужно заполенить это поле
')

return false;
}
else
{
$("[id^='AlertField']").alert('close')
return true;
}
}

так же нужно поправить CSS

.alert
{
margin-bottom:5px;
width: 345px !Important;

}
.close
{
min-width:0px;
}

Теперь об косяках в общем макете SharePoint

это можно поправить

*{
box-sizing: content-box;
}

Я сохранил все это в два файла js и CSS и добавил ссылки в форме.

вот итоговый код js

$(document).ready(function() {
 // изменение класса кнопок 
 $("[id*='diidIOSaveItem']").attr("class", "btn btn-success ms-ButtonHeightWidth");
 $("[id*='diidIOGoBack']").attr("class", "btn btn-primary ms-ButtonHeightWidth");
 
 // добавляем текст в поле 
 $("[id^='Field']").attr("placeholder", "Введите текст…");
 
 //изменение названия
 $("input[id^='Title']").val("Новый элемент"); 

 //только чтение
 $("[id^='Title']").attr("disabled", "disabled");
 
 //Меняем стиль полей
 $("[id$='TextField']").attr("class", "ms-long ms-spellcheck-true form-control");
});
   function PreSaveAction()   
   {
    $("[id^='AlertField']").alert('close') 

  if ($("input[id^='Field']").val() == '')
    {
   $("[id^='Field']").closest('span').append('

 Error:Внимание! Нужно заполенить это поле
')     
   return false;   
  }
    else
  {
   $("[id^='AlertField']").alert('close')
   return true;
  }
    
   }

Вот файл CSS 

.alert
{
 margin-bottom:5px;
 width: 345px !Important; 
 
}
.close
{
 min-width:0px;
}
.btn
{
 font-size:14px !important;

}
.btn-primary
{ 
 color:#fff !important;
 background-color: #337ab7 !important; 
 border-color: #2e6da4 !important;
}
.btn-success
{
 color:#fff !important;
 background-color:#5cb85c  !important;
 border-color: #4cae4c !important; 
}
*{
box-sizing: content-box;
}

.form-control{
 line-height: normal!important;
 display: inline-block !important;
 height: inherit !important;
 padding: 5px 5px 5px 5px  !important;
}
.ms-long{
 width: 384px!important; 

}

DispForm

там все аналогично

$(document).ready(function() {
// изменение класса кнопок 
 $("[id*='diidIOGoBack']").attr("class", "btn btn-primary ms-ButtonHeightWidth");
 
 //меняем стиль таблицы
 $("table.ms-formtable").attr("class", "ms-formtable table table-hover");
 
});