Боковое меню с эффектом аккордеона для SharePoint 2013

Иногда боковое меню сайта SharePoint принимает просто угрожающие размеры. При этом пользователи разбивают пункты меню на подгруппы. Что правильно и совершенно логично.

Это делает меню более понятным визуально, но его юзабилити, а главное размер, по прежнему оставляют желать лучшего. Так как по умолчанию в SharePoint не поддерживается "эффект аккордеона", когда подпункты меню схлопываются в виде гармошки.

Здесь описан пример создания "эффекта аккордеона" на одном CSS, без применения JavaScript.

Это решение работает. Оно очень простое и эффективное. Однако стоит признать, что в целом поведение такой "гармошки", не такое классное, как хотелось бы.

По сути, всё решение сводится к добавлению в master page ссылки на css файл со следующим содержимым:

.ms-core-listMenu-verticalBox li.static {

    height: 2em;

    overflow: hidden;

}

.ms-core-listMenu-verticalBox li.static:hover {

    height: auto;

}

.ms-core-listMenu-verticalBox li > span.menu-item {

    cursor: pointer;

}

/* Format the headers */

.ms-core-listMenu-verticalBox li > span.menu-item {

    cursor: pointer;

    background: #0171C6;

    color: white;

    border: solid #fff;

    border-width: 1px 0;

}

/* Format the headers */

.ms-core-listMenu-verticalBox li > span.menu-item {

    cursor: pointer;

    background: #0171C6;

    color: white;

    border: solid #fff;

    border-width: 1px 0;

}

/* Format the header hover, list item hover and currently selected item */

.ms-core-listMenu-verticalBox li > span.menu-item:hover, /*Header */

.ms-core-listMenu-verticalBox a.selected, /* Selected */

.ms-core-listMenu-verticalBox a.menu-item:hover /* List item */{

    color:#FFF;

    background:#073D7D;

}

Определение Edit Mode страницы с помощью JavaScript

В SharePoint 2013 есть такая штука как Publishing Pages. С точки зрения рядового пользователя, это веб-страницы, которые он может создавать прямо в браузере, в стиле WYSIWYG. Достаточно создать новую страницу публикации (Publishing Page), затем открыть её в режиме редактирования и можно сразу набивать контент, при этом особо не запариваясь относительно стилей и получаемой разметки. Вещь удобная и пользуются ей, как говорится, направо и налево.

Впрочем увлёкшись WISIWIG вы всё ещё можете остановиться и взглянуть на полученную HTML-разметку. И даже отредактировать её, дабы наполнить не передаваемым шармом в духе HTML5. Для чего на панели инструментов предусмотрена кнопка "Изменить источник".

А что если мы решим зайти дальше в нашем стремлении сделать контент страницы более интерактивным и насыщенным, и добавим на страницу публикации веб-часть "Редактор сценариев". А в этот редактор сценариев поместим JavaScript, который, используя jQuery и добавленную нами на страницу HTML-разметку, создаёт интерактивный и кувыркающийся Коллаж из фотографий и лозунгов, рождённый воспалённой фантазией вашего дизайнера и PR-менеджера, слившихся в творческом экстазе.

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

Вот только когда вас попросят добавить в коллаж новый лозунг, и вы вновь откроете страницу в режиме редактирования, то увидите что вся ваша HTML-разметка "пляшет" и "кувыркается" по воле JavaScript'a из веб-части "Редактор сценариев". А стоит вам сохранить страницу, как вся эта чехорда "впечатается" в контент страницы на мертво и JavaScript уже будет не в состоянии её оживить.

Дело в том, что когда вы открыли страницу на редактирования, то JavaScript в веб-части
"Редактор сценариев" начнёт выполняться, как ни в чём не бывало. При этом он будет, искать в содержимом страницы определённую HTML-структур (например, див внутри которого находится список, каждый элемент которого является сложным описанием одной из страниц слайда). Найдя её, он оживит её самым чудесным образом, динамически внося изменения в этот кусок HTML кода. Однако SharePoint понятия не имеет кто вносит изменения в разметку, Вы или ваш JavaScript. По этому когда вы сохраните страницу, он с чистой совестью сохранит всю необходимую HTML разметку, включая исковерканную вашим же JavaScript'ом. После чего она будет разительно отличаться от той, что нужна JavaScript'у для оживления коллажа.

Выход есть! Необходимо, чтобы перед тем как пытаться оживлять коллаж, JavaScript проверил в каком режиме находится страница публикации. И если страницы открыта в режиме редактирования контента, то JavaScript прекращает работу ни как не влияя на разметку.

<script type="text/javascript">

        (function ($) {

            $(document).ready(function () {

                // Проверям режим страницы

                var InEditMode = false;

                try{

                InEditMode = SP.Ribbon.PageState.Handlers.isInEditMode();

                } catch(e){}

               

                if (InEditMode) {return;}

                // Каруселить список клиентов

                // btnNext и btnPrev - указывают на кнопки вперёд/назад

                // visible - скорлько элементов карусели будет показано единовременно

                // circular - зациклить карусель по кругу

                $(".clients-list").jCarouselLite({

                    btnNext: "#gon",

                    btnPrev: "#pon",

                    visible: 5,

                    circular: true

                });

            });

        })(jQuery);

    </script>

Многострочные строки в JavaScript или аналог @ в C#.

В языке C# есть так называемые буквальные строковые литералы.

Пример буквальных строковых литералов:

// Буквальные строковые литералы воспринимают всё написанное буквально, кроме кавычек. Что бы задать кавычки необходимо воспользоваться специальной управляющей последовательностью - двойные кавычки, т.е. вот так: ""

string s = @"C:\Windows";

s = @"Роман ""Война и мир"""; // Роман "Война и Мир"

Кроме того, буквальный строковый литерал позволяет отказаться от использования управляющей последовательности \n новая строка.
Т.е. вместо того чтобы писать так:

string s = "Переход на новую строку.. \n.. новая строка";

Можно записать так:

string s  = @"Переход на новую строку..
.. новая строка";

А результат будет одним и тем же.

В JavaScript нет своего буквального строкового литерала, но есть возможность задавать многозначные строки, хотя это и считается недостатком текущей реализации интерпритатора, а не возможностью языка JavaScript:

var multiLine = '\
Первая строка \
Вторая строка \
Третья строка \
';
alert(multiLine);

Как добавить в форму создания нового элемента списка пункт "Вложить файл"

Иногда, необходимо дать пользователю дополнительный намёк, о том что он может прикрепить файл к элементу списка. Причём для этого нам даже не понадобиться сильно изгаляться над формой Создания нового элемент списка. Достаточно проделать следующие не хитрые шаги.

1) Открываем на редактирование страницу с формой создания нового элемента списка.

2) Добавляем новую веб-часть "Редактор контента". Самый простой способ сделать это, просто выбрать Insert -> Text:

3) Затем вставляем в веб-часть следующую разметку:

<div>

  <a title="Attach File" class="ms-toolbar" accesskey="I" onclick="javascript:UploadAttachment();" href="javascript:UploadAttachment()">

     <img width="16" height="16" align="absMiddle" alt="Attach File" src="/_layouts/images/attachtb.gif" style="border-width: 0px;"/>

  </a>

  <a id="ctl00_m_g_7df5d998_1390_4e67_8fc4_2da066cbcf7d_ctl00_ctl01_ctl00_toolBarTbl_RptControls_diidIOAttach{generate-id()}" href="javascript:UploadAttachment()" style="visibility: hidden;">

  </a>

  <a class="ms-toolbar" id="ctl00_m_g_7df5d998_1390_4e67_8fc4_2da066cbcf7d_ctl00_ctl01_ctl00_toolBarTbl_RptControls_diidIOAttach_LinkText" accesskey="I" onclick="javascript:UploadAttachment();" href="javascript:UploadAttachment()">

    Attach File

  </a>

</div>

Делается это через пункт меню "Изменить источник"...

... вот в таком диалоговом окне.

И в результате получаем:

4) И в итоге получаем следующий результат

Как в тело письма, которое генерируется в SingleTask activity, добавить ссылку на задачу?

Долго искал как делается этот трюк, пока знающие люди не подсказали. :-)

Суть вопроса такова. Необходимо c помощью Visual Studio создать в SharePoint 2013 новый рабочий процесс (Workflow 4). В рамках этого рабочего процесса мы используем Single Task activity, чтобы создать новую задачу и назначить её на некоего пользователя. Single Task activity позволяет нам не только назначить задачу на сотрудника, но и тут же отправить ему на почту оповещение о том, что ему назначена новая задача. При этом мы можем отредактировать как тело письма, так и его тему.

Как видно, тело письма это обычный HTML.
Единственный минус в том, что по умолчанию, в теле письма нет ссылки на эту самую, новую назначенную задачу и пользователь несколько теряется, не понимая что же ему делать дальше.

Как оказалось, решить данную проблемы чрезвычайно просто. Достаточно добавить в тело письма вот такую вот ссылку:

 <a href='%TaskSpecial: TaskUrl%'>%Task: Title%</a>  

Вот как это будет выглядеть в итоге:

А вот так будет выглядеть письмо, пришедшее пользователю:

Тут можно найти и другие токены, которые могут вам пригодиться:

	Name	Description
	AssignedTo	Replace the %Task: AssignedTo% token with the individual or group to whom the task is currently assigned.
	Description	Replace the %Task: Body% token with the description of the task.
	DueDate	Replace the %Task: DueDate% token with the date the task is due.
	RegularFormat	The regular format for the token replacement.
	RelatedItemTitle	Replace the %TaskSpecial: RelatedItemTitle% token with the title of the task’s related item.
	RelatedItemUrl	Replace the %TaskSpecial: RelatedItemUrl% token with a link to the task’s related item.
	SpecialFormat	The special format for the token replacement.
	TaskUrl	Replace the %TaskSpecial: TaskUrl% token with a link to the task.
	Title	Replace the %Task: Title% token with the title of the task.

Как скрыть заголовок страницы SharePoint?

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

При этом у нас нет ни какого желания выпиливать заголовок ото всюду. То есть мы вовсе не хотим удалять соответствующий контрол из master page.
Наиболее простой способ решения поставленной задачи, заключается в том, чтобы найти и HTML-тег отвечающий за отображение заголовка и скрыть его с помощью CSS.
Вот правило, которое нам нужно:

<style type="text/css">
     #pageTitle {

            display: none;

     }
</style>

Остаётся придумать, как расположить его непосредственно на главной странице (т.е. на странице приветствия). Важно чтобы это CSS правило применилось только в отношении страницы приветсвия, а не всех страниц сайта.
Пожалуй самый "кошерный" способ провернуть такое, это использовать веб-часть "Редактор сценариев".

Шаг номер Раз :-)

Шаг номер два ;-)

Шаг номер три..

И результат: