Microsoft постоянно развивает средства клиентской разработки в SharePoint. В предыдущей версии появилась объектная клиентская объектная модель, в текущей версии интерфейс пользователя создан с помощью JavaScript. Но многие разработчики SharePoint не используют эти возможности, создавая интерфейс "по-старинке", теряя возможность быстрой разработки, создавая некачественные решения и блокируя возможность развертывания решений в облаке.
Причины этому две - недостаток документации и использования языка JavaScript. Не секрет, что JavaScript недолюбливают многие программисты C# за динамическую типизацию и неочевидные особенности языка.
Я и сам раньше плохо относился к JavaScript и предпочитал создавать решения в серверном коде. Но недавно Microsoft выпустил типизированную версию языка JavaScript - TypeScript, который дает все преимущества компилируемого языка, сохраняя высокую скорость создания решений для SharePoint.
Теперь большую часть решений для SharePoint я создаю с использованием языка TypeScript. Для облегчения этого процесса были созданы определения типов для наиболее часто используемых клиентских библиотек SharePoint.
Я решил поделиться с вами накопленным опытом разработки с использованием TypeScript и JavaScript для SharePoint.
17 июля 2014 года пройдет семинар, посетив который вы научитесь:
Создавать и разворачивать приложения с клиентскими скриптами.
Применять популярные клиентские библиотеки jQuery и AngularJS в решениях для SharePoint.
Использовать клиентскую объектную модель для работы с объектами SharePoint на клиенте.
Кастомизировать интерфейсы для работы со списками и библиотеками SharePoint.
На семинаре будем разбирать конкретные примеры приложений и инструменты, повышающие эффективность разработчиков.
Стоимость участия - 3500 рублей при регистрации до 10 июля и 5500 рублей с 11 июля. Для тех, кто не сможет присутствовать лично - будет веб-трансляция.
В прошедшем недавно семинаре про клиентской разработке в SharePoint (записи – по ссылке) я показывал как сделать клиентский скрипт, который выполняет некоторый код после окончания загрузки страницы в SharePoint.
Эта, казалось бы, простая задача далеко не тривиально реализуется в SharePoint.
Причины
SharePoint формирует интерфейс динамически. Многие блоки добавляются на страницу по событию body.onload. Это событие возникает позже, чем DOMContentLoaded. Именно это событие перехватывает jQuery.ready. Поэтому использование jQuery часто не приводит к хорошему результату. Подробнее об использовании jQuery в SharePoint.
Minimal Download Strategy (MDS), появившийся в SharePoint 2013, загружает страницу один раз, потом обновляет блоки страницы, поэтому нужно выполнять дополнительные действия, чтобы скрипт выполнился после загрузки страницы под MDS.
Механизм загрузки скриптов, о котором я писал ранее, требует чтобы скрипт самостоятельно оповещал об окончании выполнения.
Для скриптов в виртуальной файловой системе SharePoint
Чаще всего скрипты SharePoint деплоятся как файлы в виртуальной файловой системе. Это прекрасно работает как в on premises, так и в online.
Для размещения скриптов на странице используется контрол ScriptLink, в таком виде:
Внутри скрипта нужно выполнить следующие действия:
Оповестить SharePoint об окончании загрузки.
Добавить функцию, которую необходимо вызывать после загрузки страницы, в массив _spBodyOnLoadFunctions.
Добавить зарегистрировать скрипт в системе MDS.
Код:
// IIFE для изоляции
(function () {
"use strict";
// Имя скрипта должно совпадать с тем, что указано в ScriptLink
var scriptLink = "~site/Scripts/myscript.js";
// Код здесь будет выполняться ДО окончания загрузки страницы
if (_spBodyOnLoadCalled) {
// Если событие body.onload уже обработано
// напрмиер при LoadAfterUI="true" или OnDemand="true"
// то сразу вызываем функцию init
init();
} else {
// Иначе добавляем функцию в массив
_spBodyOnLoadFunctions.push(init);
}
function init() {
// заменяем токены "~site" и "~sitecollection" на реальные URL
// с помощьюв SPClientRenderer.ReplaceUrlTokens
// но эта функция доступна после загрузки CSR
// поэтому нужно выполнить зарузку CSR и дождаться её окончания
// если CSR уже был загружен, то функция выполнится сразу
SP.SOD.executeFunc("clientrenderer.js", "SPClientRenderer.ReplaceUrlTokens", function() {
// тепрь регистрируем скрипт в MDS
RegisterModuleInit(SPClientRenderer.ReplaceUrlTokens(scriptLink), init);
});
// Код здесь будет выполняться ПОСЛЕ окончания загрузки страницы
}
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs(scriptLink);
})();
Если вы сами деплоите страницу, на которой будет работать ваш скрипт, то можете воспользоваться библиотекой mQuery и функцией m$.ready. Эта функция делает тоже самое, что и блок if\else в коде выше.
Для скриптов в layouts
Если вы размещаете свой скрипт в _layouts, то есть несколько особенностей:
При добавлении скрипта надо указывать только имя файла.
SOD автоматически регистрирует в MDS вызов функции с именем $_global_имя_файла_без_js
Код для файла в _layouts
"use strict";
// эта функция должна быть в глобальном пространстве имен
function $_global_myscript() {
// Код здесь будет выполняться ПОСЛЕ окончания загрузки страницы
}
if (_spBodyOnLoadCalled) {
// Если событие body.onload уже обработано
// напрмиер при LoadAfterUI="true" или OnDemand="true"
// то сразу вызываем функцию init
init();
} else {
// Иначе добавляем функцию в массив
_spBodyOnLoadFunctions.push(init);
}
// этот вызов автоматически добавит регистрацию в MDS
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("myscript.js");
Универсальные скрипты
Если ваши скрипты будут вызываться вне страниц SharePoint, то обращение к “пространству имен” SP вызовет ошибку. Кроме того есть свой механизм оповещения о загрузке скриптов в MsAjax библиотеке, поэтому в конце скрипта надо использовать такой блок:
// Оповестить MsAjax об окончании загрузки
if (typeof Sys != "undefined" && Sys && Sys.Application) {
Sys.Application.notifyScriptLoaded();
}
// Оповестить SharePoint об окончании загрузки
if (typeof SP != "undefined" && SP && SP.SOD) {
SP.SOD.notifyScriptLoadedAndExecuteWaitingJobs("myscript.js");
}
Заключение
Более подробно о загрузке скриптов, TypeScript, особенностях SharePoint и Client Side Rendering можете узнать подробнее, посмотрев записи семинара - http://gandjustas.justclick.ru/order/spclient/