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

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

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

?

1 2 3

<script src="/SiteAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <link href="/SiteAssets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="/SiteAssets/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

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

NewForm и EditForm

?

1 2 3

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.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; }

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

?

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

 Получаем

 Поправляем CSS

?

1 2 3 4 5 6 7 8 9

.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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function PreSaveAction() { if ($("input[id^='Field']").val() == '') // поле пусто   {   $("[id^='Field']").closest('span').append('<div class="alert alert-warning in fade alert-dismissible" id="AlertField" role="alert"> <button aria-label="Close" class="close" data-dismiss="alert" type="button"><span aria-hidden="true">×</span></button> <span aria-hidden="true" class="glyphicon glyphicon-exclamation-sign"></span><span class="sr-only">Error:</span><b>Внимание! </b>Нужно заполенить это поле</div> ')   return false; } else { $("[id^='AlertField']").alert('close') return true; } }

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

?

1 2 3 4 5 6 7 8 9 10

.alert { margin-bottom:5px; width: 345px !Important;   } .close { min-width:0px; }

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

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

?

1 2 3

*{ box-sizing: content-box; }

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

$(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('<div class="alert alert-warning in fade alert-dismissible" id="AlertField" role="alert"> <button aria-label="Close" class="close" data-dismiss="alert" type="button"><span aria-hidden="true">×</span></button> <span aria-hidden="true" class="glyphicon glyphicon-exclamation-sign"></span><span class="sr-only">Error:</span><b>Внимание! </b>Нужно заполенить это поле</div> ')        return false;     }     else   {    $("[id^='AlertField']").alert('close')    return true;   }          }

Вот файл CSS 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

.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

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

?

1 2 3 4 5 6 7 8

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