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

добавлено: 21 сен 15
понравилось:0
просмотров: 3133
комментов: 4

теги:

Автор: gandjustas

Кастомизация форм – очень больная тема в 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 поля\формы\типа контента вписать строку такого вида: “~site/PATH/typescripttemplates.js|~site/YOUR_SCRIPT_PATH.js”.

Итак сами функции:

№1 Установка начального значения поля в формах

CSR.override()
   .setInitialValue("FieldInternalName", ANY_VALUE)
   .register();      

Пригодится когда значения полей передаются в Url или через локальный кеш. Значение нужно передавать во внутреннем формате, который использует CSR.

№2 Скрытие поля

CSR.override()
   .makeHidden("FieldInternalName")
   .register();      

Скрывает поле на форме, в представлении, и даже в режиме редактирования таблицы.

№3 Установка поля в Read-Only в формах

CSR.override()
   .makeReadOnly("FieldInternalName")
   .register();      

Заменяет контрол ввода на контрол отображения. Пока не работает в для поля выбора пользователя.

№4 Вычисляемое значение поля

CSR.override()
   .computedValue("Title", function(x) {return SPClientTemplates.Utility.ParseLookupValue(x).LookupValue; }, "SOME_LOOKUP_FIELD")
   .register();      

Автоматически задает значение поля при изменении в связанном поле.

№5 Добавление ссылки на добавление нового элемента в Lookup

CSR.override()
   .lookupAddNew("Master", "Add New Master item", true)
   .register();      

Добавляет рядом с Lookup-полем ссылку, которая открывает форму добавления в связанный список. Последний параметр задает открывать ли форму в диалоге или переходом на страницу формы

№6 Фильтрация Lookup

CSR.override()
   .filteredLookup("Master", '<BeginsWith><FieldRef Name ="Title" /><Value Type = "Text" >{Title}</Value></BeginsWith>')
   .register();      

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

№7 Lookup на основе поиска

CSR.override()
   .seachLookup("LookupFieldInternalName")
   .register();      

Заменяет стандартный элемент выбора на компонент autofill, входящий в SharePoint. Для получения связанных элементов используется поиск. Будет работать даже для очень больших списков. В ближайшее время будет добавлена возможность указывать запрос, который выполняется при получении элементов.

Для этого поля надо в JSLink добавить ссылки на файлы autofill.js и sp.search.js – “~site/PATH/typescripttemplates.js|~site/YOUR_SCRIPT_PATH.js|autofill.js(d)|sp.search.js(d)”

Заключение

Качайте, пользуйтесь, пишите фидбек здесь и на сайте проекта - http://sptypescript.codeplex.com/workitem/list/basic. Кроме указанных выше готовых контролов, есть еще куча хелперов, которые вам помогут делать свои шаблоны полей.

Если хелперы будут популярны, то я выложу библиотеку в NuGet.

Комментарии


  • у меня вопрос: вы пишите "Вписать адрес скрипта в ReplaceUrlTokens и вызовы функций между .override() и .register()".
    Вот "вызовы функций между .override() и .register()" - где это? куда именно нужно прописать адрес скрипта?

  • Это разные действия. Адрес надо заменть в вызове RegisterModuleInit.

    Между .override и .register надо вызовы функций переопределения вписать.

  • Понятно. Но у меня не работает, может делаю что-то не так. Делаю через js. Скачал файл typescripttemplaes.js, поместил его на сайт по адресу ~site/_catalogs/masterpage/typescripttemplaes.js.
    Создал свой файл myscript.js и поместил его туда же.
    В моем скрипте:
    (function () {
    alert ('Hello');

    function init() {
    CSR.override()
    .makeHidden("StageChangeComment")
    .register();
    }

    SP.SOD.executeOrDelayUntilScriptLoaded(init, "typescripttemplates.js");

    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
    RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~site/_catalogs/masterpage/myscript.js"), init);
    }, "sp.js");

    })();

    Алерт хэлло выводится, а дальше ничего не происходит.

  • А как скрипт вы подключаете?



Необходимо войти на сайт, чтобы оставлять комментарии