Gandjustas' blog

Фильтр по тегу: js


10 вещей, которые надо знать при использовании jQuery в SharePoint

Для чего нужен jQuery в SharePoint? Обычно его используют для четырех целей:

  • Вызывать код JavaScript в момент загрузки страницы с помощью $(document).ready.
  • Использовать Ajax функции для доступа к данным на сервере.
  • Использовать готовые плагины,такие как tooltip или tabs, для того, чтобы расширить функционал сайта.
  • Проводить некоторые манипуляции с объектной модели документа (DOM).

Если Вы собираетесь использовать jQuery на страницах SharePoint, то вам нужно знать следующие вещи:  

 

1. Используйте mQuery и RequestExecutor в простых случаях

Если у вас простой случай, то Вы можете использовать библиотеку mQuery для манипуляции DOM и RequestExecutor для ajax запросов. Кроме того, вместо Ajax запросов гораздо выгоднее использовать JSOM и TypeScript для клиентской разработки. Об этом я писал ранее.

Если Вы, все таки, решили использовать jQuery, то вам нужно помнить следующее:

2. jQuery(document).ready срабатывает не вовремя

Это происходит потому, что $(document).ready взрывается при событии DOMContentLoaded. А это события создано для тех случаев, когда весь контент страницы загружается с сервера. Оно происходит после того как браузер скачал всю страницу, связанные файлы и всё распарсил. SharePoint использует механизмы динамического формирования страницы, когда скрипты в теле страницы запускаются и формируют части страницы. В этом случае использовать DOMContentLoaded, отрабатывает до того как сформирована страница. Гораздо более надежный способ вызова п...

читать дальше...
добавлено: 03 авг 16 просмотры: 1295, комментарии: 0



Загрузка скриптов в SharePoint

В прошедшем недавно семинаре про клиентской разработке в SharePoint (записи – по ссылке) я показывал как сделать клиентский скрипт, который выполняет некоторый код после окончания загрузки страницы в SharePoint.

Эта, казалось бы, простая задача далеко не тривиально реализуется в SharePoint.

Причины

    1. SharePoint формирует интерфейс динамически. Многие блоки добавляются на страницу по событию body.onload. Это событие возникает позже, чем DOMContentLoaded. Именно это событие перехватывает jQuery.ready. Поэтому использование jQuery часто не приводит к хорошему результату. Подробнее об использовании jQuery в SharePoint.
    2. Minimal Download Strategy (MDS), появившийся в SharePoint 2013, загружает страницу один раз, потом обновляет блоки страницы, поэтому нужно выполнять дополнительные действия, чтобы скрипт выполнился после загрузки страницы под MDS.
    3. Механизм загрузки скриптов, о котором я писал ранее, требует чтобы скрипт самостоятельно оповещал об окончании выполнения.

Для скриптов в виртуальной файловой системе SharePoint

Чаще всего скрипты SharePoint деплоятся как файлы в виртуальной файловой системе. Это прекрасно работает как в on premises, так и в online.

Для размещения скриптов на странице используется контрол ScriptLink, в таком виде:

<SharePoint:ScriptLink Name="autofill.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />

или с помощью CustomAction ScriptLink в элементе решения

<CustomAction Location="ScriptLink" ScriptSrc="~site/Extension...
читать дальше...
добавлено: 26 июл 16 просмотры: 988, комментарии: 0



7 способов улучшить поля в формах SharePoint 2013

Кастомизация форм – очень больная тема в SharePoint. InfoPath фактически умер, новые способы кастомизации появятся не раньше следующего релиза (назначенного на конец 2015 года), а для использования SPServices нужен jQuery старой версии, что само по себе несет проблемы, так еще и требует знания отображаемых имен полей, что делает решение ненадежным. Подробнее в моем курсе по клиентской разработке SharePoint.

Создавая TypeScript-определения для клиентской библиотеки SharePoint  сделал несколько примеров полей. Недавно я провел большой рефакторинг и выделил кастомные поля в отдельные, повторно используемые функции.

Все функции содержатся в файле typescripttemplaes.ts. Тем, кто не пользуется TypeScript (зря!), можно скачать .js файл в том же каталоге.

Как пользоваться typescripttemplates:

  1. Скачать файл и добавить .js в проект
  2. Сделать свой файл скрипта для полей, такого вида:
    module _ {
        function init() {
            CSR.override()
                .lookupAddNew("Master", "Add New Master item", true)
                .register();        
        }
    
        SP.SOD.executeOrDelayUntilScriptLoaded(init, "typescripttemplates.ts");
    
        SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~site/YOUR_SCRIPT_PATH.js"), init);
        }, "sp.js");
    } 
  3. Вписать адрес скрипта в ReplaceUrlTokens и вызовы функций между .override() и .register()
  4. В атрибут JSLink поля\формы\типа контента вписать стро...
читать дальше...
добавлено: 13 июл 16 просмотры: 843, комментарии: 0



7 способов улучшить поля в формах SharePoint 2013

Кастомизация форм – очень больная тема в SharePoint. InfoPath фактически умер, новые способы кастомизации появятся не раньше следующего релиза (назначенного на конец 2015 года), а для использования SPServices нужен jQuery старой версии, что само по себе несет проблемы, так еще и требует знания отображаемых имен полей, что делает решение ненадежным. Подробнее в моем курсе по клиентской разработке SharePoint.

Создавая TypeScript-определения для клиентской библиотеки SharePoint  сделал несколько примеров полей. Недавно я провел большой рефакторинг и выделил кастомные поля в отдельные, повторно используемые функции.

Все функции содержатся в файле typescripttemplaes.ts. Тем, кто не пользуется TypeScript (зря!), можно скачать .js файл в том же каталоге.

Как пользоваться typescripttemplates:

  1. Скачать файл и добавить .js в проект
  2. Сделать свой файл скрипта для полей, такого вида:
    module _ {
        function init() {
            CSR.override()
                .lookupAddNew("Master", "Add New Master item", true)
                .register();        
        }
    
        SP.SOD.executeOrDelayUntilScriptLoaded(init, "typescripttemplates.ts");
    
        SP.SOD.executeOrDelayUntilScriptLoaded(function () {
            RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~site/YOUR_SCRIPT_PATH.js"), init);
        }, "sp.js");
    } 
  3. Вписать адрес скрипта в ReplaceUrlTokens и вызовы функций между .override() и .register()
  4. В атрибут JSLink поля\формы\типа контента вписать стро...
читать дальше...
добавлено: 21 сен 15 просмотры: 1906, комментарии: 4



Видеозаписи встречи юзер-группы по SharePoint 16.10.2014

16 октября прошла встреча юзер-группы по SharePoint в новом формате. Вместо привычных одного-двух докладов по часу с длинными вступлениями и демонстрациями было 6 коротких выступлений с регламентом по 15 минут на один доклад.
Доклады были такие:
  • Александр Ульмаскулов — "Разработка форм SharePoint с помощью KnockoutJS"
  • Денис Молодцов — "Отладка исходного кода SharePoint  с помощью Reflector"
  • Борис Журкин — "Как подружить формы SharePoint и AngularJS"
  • Евгений Трифонов — "AvePoint DocAve Backup"
  • Антон Бастюченко — "Как обращаться к серверному коду из App Web"
  • Станислав Выщепан — "Особенности логирования в SharePoint 2013"
В тайминг не уложился никто, кроме Дениса :)
Плейлист с записями:

Для выкладывания записей с юзер-групп и встреч Office 365 day создал канал на YouTube - http://www.youtube.com/user/office365day. Подписывайтесь.
Материалы докладов будут выложены в группе на Facebook - https://www.facebook.com/groups/sharepointrussian/
Следующая встреча состоится 6 ноября, в таком же формате 15-минутных выступлений. Желающие выступить – пишите в комменты, в личку на facebook или просто мне на почту – stanislav.v@outlook.com
читать дальше...
добавлено: 15 авг 15 просмотры: 651, комментарии: 0



10 вещей, которые надо знать при использовании jQuery в SharePoint

Для чего нужен jQuery в SharePoint? Обычно его используют для четырех целей:

  • Вызывать код JavaScript в момент загрузки страницы с помощью $(document).ready.
  • Использовать Ajax функции для доступа к данным на сервере.
  • Использовать готовые плагины,такие как tooltip или tabs, для того, чтобы расширить функционал сайта.
  • Проводить некоторые манипуляции с объектной модели документа (DOM).

Если Вы собираетесь использовать jQuery на страницах SharePoint, то вам нужно знать следующие вещи:  

 

1. Используйте mQuery и RequestExecutor в простых случаях

Если у вас простой случай, то Вы можете использовать библиотеку mQuery для манипуляции DOM и RequestExecutor для ajax запросов. Кроме того, вместо Ajax запросов гораздо выгоднее использовать JSOM и TypeScript для клиентской разработки. Об этом я писал ранее.

Если Вы, все таки, решили использовать jQuery, то вам нужно помнить следующее:

2. jQuery(document).ready срабатывает не вовремя

Это происходит потому, что $(document).ready взрывается при событии DOMContentLoaded. А это события создано для тех случаев, когда весь контент страницы загружается сервера. Оно происходит после того как браузер скачал всю страниц, связанны файлы и всё распарсил. SharePoint использует механизмы динамического формирования страницы, когда скрипты в теле страницы запускаются и формируют части страницы. В этом случае использовать DOMContentLoaded, отрабатывает до того как сформирована страница. Гораздо более надежный способ вызова после...

читать дальше...
добавлено: 20 май 14 просмотры: 2486, комментарии: 0



Автокомплит в SharePoint 2013: пошаговое руководство

Данный функционал был найден Антоном Вишняковым и описан в посте в его блоге. Большая часть контента данного поста взята из его блога с его разрешения.

Вы уже видели новый элемент управления для выбора людей в SharePoint 2013? Этот элемент управления был сильно улучшен по сравнению с предыдущей версией SharePoint. Теперь этот элемент можно использовать в клиентском коде и спокойно внедрять на своих страницах. Кроме того появился отличный функционал автозаполнения.

070713_0434_LeveragingS1[1]

Замечательная новость: вы можете использовать функционал автозаполнения с любым текстовым полем. Эту функцию реализует контрол  SPClientAutoFill. Он находится в файле autofill.js в _layouts/15. Давайте посмотрим как сделать решение с его помощью.

Шаг первый: разметка и стили

Для того чтобы использовать SPClientAutoFill вам потребуется следующая разметка:

<div style='position: relative;'>
    <input type='text' id='autofillElement' />
    <div class='sp-peoplepicker-autoFillContainer' 
            id='autofillContainer' />
</div>

Обязательно position:relative для внешнего элемента, иначе будут проблемы с позиционированием подсказок.

Второй шаг: подключение библиотеки

По-умолчанию autofill.js не зарегистрирован как Script On Demand. Зарегистрировать скрипт можно тремя способами:

  • Вызовом функции SP.SOD.registerSod в JavaScript
  • Серверным контролом <SharePoint:ScriptLink /> на странице
  • В свойстве JSLink

Внимание. Не рекомендуется добавление непосредственно тега scr...

читать дальше...
добавлено: 01 янв 14 просмотры: 1301, комментарии: 0



SharePoint и Ajax

Как вы думаете, сколько способов сделать ajax запрос в SharePoint? А без jQuery и дополнительных библиотек? Нет, XMLHttpRequest руками писать на надо.

Sys.Net.WebRequest \ Sys.Net.WebRequestExecutor

Эти классы находятся в библиотеке MicrosoftAjax. Она подгружается на каждой странице SharePoint и вы можете использовать её на своих страницах.

Класс Sys.Net.WebRequest описывает параметры запроса, а Sys.Net.WebRequestExecutor, вернее его наследник, выполняет запрос с указанными параметрами. Можно создавать свои реализации WebRequestExecutor, например для тестирования или для проксирования запросов.

Недостаток этих классов в чрезмерной многословности.

var request = new Sys.Net.WebRequest();         
request.set_url(url);
request.set_httpVerb("GET");         
request.add_completed(function(executor, eventArgs) {             
    if(executor. get_responseAvailable()) {
        //do stuff
    }
});

request.invoke(); 

Вот так придется писать на каждый запрос. Семантически похоже на то, что есть в C#, но после jQuery выглядит страшно. Тем не менее этот api является базовым для всего, что работает в SharePoint.

Ссылки на MSDN:
Sys.Net.WebRequest - http://msdn.microsoft.com/en-us/library/bb310979(v=vs.100).aspx
Sys.Net.WebRequestExecutor- http://msdn.microsoft.com/en-us/library/bb397434(v=vs.100).aspx

SP.PageRequest

Этот класс находится в библиотеке sp.js и доступен с SharePoint 2010.

У нем есть два статических метода doGet и doPost.

SP.PageRequest.doGet...
читать дальше...
добавлено: 02 сен 13 просмотры: 1498, комментарии: 0



Связанные элементы в SharePoint 2013

Вам наверное часто в решениях требовалось сделать возможность связать один элемент с другим. Причем не просто лукап сделать, а так чтобы можно было произвольно выбрать элемент и создать связь с ним.

Копая JSOM, я недавно обнаружил, что в SharePoint 2013 есть такой функционал.

“Изкаропки” он доступен в списке задач. У каждой задачи есть “связанные элементы”.

image

При нажатии на “добавить связанный элемент” появляется стандартный asset picker

image

Можно выбирать любой элемент в пределах коллекции сайтов.

Внутренности “связанных элементов”

“Связанные элементы” это кастомное поле с ID равным значению Microsoft.SharePoint.SPBuiltInFieldId.RelatedItems. Это поле скрытое и добавить его в список из интерфейса не получится. Но в решении вы совершенно спокойно можете добавить это поле в тип контента.

Сам касс поля определен в сборке Microsoft.SharePoint и доступен, в том числе, в Foundation. Для работы с полем доступны только клиентские API, серверный класс для них помечен как internal.

На клиенте можно обращаться с помощью классов SP.RelatedItemManager в sp.js (http://msdn.microsoft.com/en-us/library/jj838582.aspx) и Microsoft.SharePoint.Client.RelatedItemManager в сборке Micrsosoft.SharePoint.Client (http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.client.relateditemmanager.aspx).

Если интересна реализация поля, то смотрите с помощью IlSpy класс Microsoft.SharePoint.RelatedItemManager в сборке Microsoft.SharePoint. Рендеринг поля описан в файле sp.ui.relateditems.js

Реализаци...

читать дальше...
добавлено: 22 авг 13 просмотры: 1769, комментарии: 0



SharePoint Script On Demand

В SharePoint 2013 довольно богатая клиентская библиотека. Ранее я уже писал об аналоге jQuery и об Ajax библиотеках. Одна из важнейших частей для разработки масштабного JavaScipt приложения – загрузчик скриптов. Такое тоже есть в SharePoint.

Почему необходимо управлять загрузкой скриптов

Исторически управление загрузкой скриптов появилось для увеличения быстродействия. Вы наверное знаете, что тег script в теле страницы заставляет браузер останавливать отрисовку страницы. Поэтому скрипты надо загружать как можно позже. Кроме того, в сложных приложениях, все скрипты не нужны на каждой странице, поэтому выгодно загружать их по требованию.

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

Обе причины особенно важны в SharePoint. Страницы SharePoint тяжелые, и лучше загружать скрипты как можно позже. Сами же страницы строятся из кучи независимых компонент (созданных разными разработчиками), поэтому модульность скриптов важна как нигде.

В мире веб-разработки фактически стандарт для управляемой загрузки скриптов – библиотека requirejs. Но в ней есть критический недостаток, её придумал не Microsoft, поэтому в SharePoint своя библиотек для загрузки скриптов. Называется она Script On Demand.

Script On Demand

Вся библиотека содержится в классе SP.SOD в файле init.js. Script On Demand спроектирован ...

читать дальше...
добавлено: 11 авг 13 просмотры: 1766, комментарии: 0