Особенности кастомизации портала SCSM 2012 (R2)

В рамках многих проектов по SCSM 2012 (R2) я сталкивался с необходимостью изменения дизайна портала самообслуживания, без осуществления программирования компонентов Silver Light и SharePoint.

В данной статье я расскажу про некоторые HINTs, которые помогут Вам улучшить визуализацию.

Так выглядит портал в состоянии "по-умолчанию", без  изменения цветовой гаммы и только с добавлением иконок.

А вот так после изменений

 

Для начала разберёмся с компонентами, которые входят в состав SharePoint и не используют SilverLight. Они представляют собой два фрейма слевой стороны и сверху, в которых размещаются другие элементы: список меню, различные поля, управление SPS(F), имя пользователя и т.д.

Данные разделы можно очень эффективно изменять, используя дебаггер IE, SharePoint Designer и CSS стили Sharepoint.

Для этого:
1. Запускаем дебаггер IE кнопкой F12
2. Нажимаем стрелку в левом углу
 

3. Наводим её на интересующий нас компонент портала и нажимаем LMB (в данном примере s4-Leftpannel-content), после этого в левой стороне окна дебагера мы увидим имя компонента и дерево его настроек

4. Нажимаем в правом окне дебаггера Отслеживать Стили и ищем интересующую нас настройку, в данном случае это Background-colur;

5. В данном примере у меня уже переопределён и применён к порталу мой собственный CSS CustomSMPortal.CSS, о чём свидетельствует перечёркнутнутая настройка цвета фона выше и надпись !important;
6. Чтобы ещё раз переопределить стиль, мы открываем SharePoint Designer и загружаем родительский сайт, в данном случае это https://spf01:444

7. Далее переходим в раздел All Files/Style Library/Themable и создаём собственный CSS, как это сделано у меня.

8. Открываем пустой созданный файл стиля (выбрав файл нажмите Edit file) 

9. Открываем исходный MasterPage или файл стиля портала самообслуживания - он нам понадобиться для поиска компонентов и их описаний (SMPortalCSS.CSS).
10. Теперь найдём в нём нужный компонент s4-Leftpannel-content

 

11. Копируем содержимое кода в наш файл CSS и правим его, как на рисунке ниже.

 

Это задаст белый цвет для панели меню.

Аналогичным образом мы можем переопределить другие элементы портала, реализованные на SPS(F). Вы можете добавлять, убирать (скрывать) различные элементы по собственному желанию.

ВНИМАНИЕ! Для того, чтобы Ваш стиль CSS применился, в MasterPage файле портала самообслуживания необходимо вставить следующую строку, где имя CSS файла - это имя созданного Вами шаблона.
.

 
ПРИМЕЧАНИЕ! После того, как вы добавили новую строку в CSS и сохранили файл, перед тем, как посмотреть изменения на портале выполните отчистку кэша браузера средствами debugger'a. В противном случае будет применяться закешированная настройка.

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

Плюс данного подхода с созданием собственного файла стилей в том, что те изменения, которые вы сделали на стенде, вы можете без труда перенести в производственную среду портируя стиль CSS на портал самообслуживания SCSM 2012 (R2).

Теперь разберёмся с компонентом SilverLight в центральной части портала. К сожалению, "из коробки", данный компонент достаточно плохо поддается кастомизации.

В первую очередь нас интересует файл Settings.XML, который можно найти в C:\inetpub\wwwroot\System Center Service Manager Portal\ContentHost\Clientbin

В данном файле вы можете изменить следующие настройки компонента SilverLight портала самообслуживания:

• Цвета компонентов и шрифтов;
• Размеры шрифтов;
• Вес шрифтов;
• Стиль шрифтов;
• Количество строк на странице;
• Количество статей баз знаний на странице;
• Количество запросов на обслуживание на странице;

и некоторые другие параметры.

Так же, в статье "На портале самообслуживания SCSM 2012 не отображаются предложения сервисов" я писал о проблемме при отображении услуг портала на разных языках.

Решение проблемы предложенное коллегами "из-за бугра" не совсем комфортно.

Есть другое решение. Для исправление этой проблемы необходимо прибегнуть к редактированию файла настроек SilverlightModule_StringResources.ru.resx, находящемуся в C:\inetpub\wwwroot\System Center Service Manager Portal\ContentHost\Clientbin\ru (в моём случае на англоязычном портале SCSM 2012, услуги с локализацией ru-RU не отображались).

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

Исходный код выглядит следующим образом:

<resheader name="writer">
    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
  </resheader>

Проблема заключалась в параметре строки, который я выделил жёлтым цветом.

После приведения кода к следующему виду:

<resheader name="writer">
    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=ru-Ru, PublicKeyToken=b77a5c561934e089</value>
  </resheader>

Отображение услуг на портале для языков английского и русского стало работать корректно.