Twitter Bootstrap і SharePoint. Як змусити Bootstrap коректно працювати під SP

Навіщо використовувати Bootstrap?
Розробляючи і допрацьовує рішення на основі SharePoint, я все більше став стикатися з підвищеними очікуваннями від стандартних форм створення і редагування елементів. Всіх оточують такі зручні і звичні Яндекс, Gmail, Facebook, VK та інші. Симпатичні, швидкі і зрозумілі інтерфейси стали нормою. Багато очікують інтерфейси такого рівня і в корпоративних системах.

Залишу осторонь порівняння бюджетів на розробку інтерфейсів середнього інтегратора, або невеликого відділу розробки у великій компанії, з одного боку, і софтверних і веб-гігантів з іншого, однак, зазначу, що користувачу і замовнику ці тонкощі зазвичай не цікаві. Цікавий сам результат. У розробників, які використовують front-end фреймворки, зазвичай цей результат задовольняє замовників. Однак залишається питання, чому саме Bootstrap? Для цього розглянемо типові «хотілки»:

  • Можливість безболісно заповнити форму з мобільного пристрою (починаючи з IPad, закінчуючи Android смартфонами з роздільною здатністю 800х600 пікселів);
  • Сучасне оформлення — всім дуже набрид стандартний інтерфейс SharePoint;
  • Складні, складові контроли.
Якщо перевести ці бажання на технічний мову, вийде наступне:
  1. Адаптивна верстка;
  2. Передвстановлені стилі, теми і т. д.;
  3. Складні контроли, зазвичай це купа логіки на JS + CSS.
Для вирішення цих завдань я провів невелике дослідження поточних front-end фреймворків. Вибір припав на Twitter Boostrap з кількох причин. Зазначу лише ті, які стосуються до ситуації:

  1. найпопулярніший — зазвичай, це означає, що на всі питання вже дані відповіді;
  2. Відмінна документація та приклади;
  3. Реалізуючи розмітку на бутстрапе, ми не займаємося створенням стилів, HTML розмітки і т. д., по суті, ми беремо готові блоки і вставляємо в нашу форму;
  4. Немає потреби писати свої складні модулі і контроли, можна брати вже готові скрипти, підключати на сторінку і використовувати відповідно до документації розробника;
  5. Низький поріг входження — достатньо розуміти базові принципи HTML JS, CSS і ви вже можете почати використовувати всі можливості бутстрапа.
Конкретно по задачам:

  1. Адаптивна верстка — для наочності — http://www.youtube.com/watch?v=5wMk4iXnpG0#t=75 (справедливості заради, адаптивність, зараз, стандарт для сучасних фронт-енд фреймворків);
  2. Крім того, що бутстрап сам по собі виглядає сучасно, на його основі створено тисячі тем, у тому числі безкоштовних, наприклад — http://ironsummitmedia.github.io/startbootstrap-sb-admin/index.html;
  3. Для бутстрапа написано безліч плагінів і бібліотек, відшукати готове рішення праці не складе, інша справа, що їх, швидше за все доведеться доопрацьовувати, але це загальна хвороба open source рішень.
І найголовніше, що потрібно розуміти. Використовуючи бутстрап ви отримуєте потужний, апробований багатотисячним ком'юніті фронт-енд розробників інструмент, завдяки якому ви спростите собі життя, замовнику і своєму начальнику. Замовник буде користуватись сучасним і зручним інтерфейсом, ви будете швидко отримувати гідний результат, а начальник скорочувати витрати не на шкоду якості.

Завдання
Необхідно за короткий проміжок часу реалізувати форму у вигляді візарда з кастомних валідацією. Заповнювати її будуть користувачі, в т. ч. з мобільних пристроїв. В організації зустрічаються всі види браузерів, IE8+ і т. д. Одна з головних вимог — «щоб виглядало сучасно».

Вивчивши приклади, вирішив спробувати реалізувати. Результат відмінний:

1

Але якщо придивитися, видно проблеми:

2

Вивчивши питання, з'ясувалося, що Bootstrap використовує стиль — box-sizing: border-box, застосовує його до всього документа і, таким чином, ламає верстку SharePoint, де значення box-sizing:content-box. У першому варіанті при розрахунку положення елемента межа вважається всередині елемента, а в другому — зовні. Рекомендую ознайомитися: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

У бутстрапе застосовується саме border-box, оскільки це спрощує розрахунок кінцевої ширини блоків системи адаптивної верстки.

В повний зріст постало питання: і як? Відмовитися від bootstrap? Ні! Одне з перших рішень — це використовувати кастомный Masterpage (під 2013, під 2010). У цього рішення є як плюси, так і мінуси:

[+] Бутстрап працює без всяких хитрувань;

[+] Будь-які теми і фрагменти взяті з мережі встають швидко і добре виглядають;

[-] Це кастомный мастерпейдж, не завжди є можливість його встановити;

[-] Якщо застосовується кастомный мастерпедж — доведеться доопрацьовувати і цей.

Рішення
В моєму випадку реалізація з кастомным мастепейджем не працювала. Для того, щоб Boostrap не ламав верстку SharePoint, я вирішив використовувати обхідні рішення, а саме:

  • Створив форк і нову гілку проекту Bootstrap на гітхабі (https://github.com/dimkk/bootstrap/tree/bootstrap-scoped;
  • Вніс зміни в LESS файли + поправив стилі до Body і Html;
  • Скомпілював і поклав у папку /scoped/ цієї гілки;
  • Тепер для того, щоб стилі бутстрапа заробили, достатньо реалізувати наступну розмітку:

    <div class='bootstrap-scope'>
    <div class='bootstrap-html'>
    <div class='bootstrap-body'>
    [Тут працюємо як з звичайним бутстрапом]
    </div>
    </div>
    </div>
    
Підключив цей файл на свій проект, стало ок, але не зовсім! Так як даний візард для прикладу я брав bootsnipp, там використовуються додаткові стилі, які теж необхідно «заскоупить» на наші стилі бутстрапа. Результат виявився дуже навіть непоганий:

3

Оригінал цього додатка доступний за посиланням: https://github.com/dimkk/sharepoint.app.bootstrap

На жаль, цей спосіб теж не панацея. Має свої плюси і мінуси:

[+] Легкість реалізації — підключив, додав розмітку, і працюй в будь-якому місці SP без ризику зламати решту верстку;

[-] Якщо копіювати готові рішення, доведеться доопрацьовувати під верстку специфічний «scope», однак, треба сказати, що, деколи зустрічаються готові рішення, які задовольнять найвимогливіших замовників, тоді, у випадках, коли masterpage використовувати не вдасться — цей спосіб буде реальним вирішенням проблем.

Для розгортання приклад:

  • У разі Sharepoint Online :
  • У центрі адміністрування SharePoint створити приватна колекція сайтів, вибрати шаблон — сайт розробника, інші параметри як зазвичай.
  • Відкрити скачаний проект в студії, клацнути по проекту, натиснути F4 — у вікні властивостей в полі Site URL ввести URL тільки що створеного сайту
  • Натиснути Deploy — подивитися на результат
  • У разі On-Premise SharePoint 2013:
  • У випадку, якщо у Вас не розгорнута Apps інфраструктура, необхідно її розгорнути, наприклад, з цього керівництва: Текст Відео
  • Відкрити викачане рішення, так само ввести Site Url — розгорнути рішення
P.S. найближчим часом планую розповісти про те, як зібрати логіку до цієї формі, використовуючи Angular, а так само про способи тестування коду Angular під Visual Studio. Більш детально зупинюся на деплое Аппа.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.