Недавно я столкнулся с задачей, связанной с быстрым редактированием списка SharePoint. Нам нужно было добавить какое-то настраиваемое поведение. В частности, что-то вроде каскадных выпадающих списков. Я был удивлен, обнаружив, что нет подходящих статей или документации, связанных с такого рода задачами. Я потратил некоторое время на поиск документации и копание в исходном коде, прежде чем закончил. В связи с этим я решил оставить здесь несколько заметок и образцов. Возможно, это сэкономит кому-то уйму времени. В любом случае, я думаю, у тебя всегда есть рыба побольше, чтобы пожарить :)
Итак, основная цель публикации - поделиться примерами быстрой настройки SharePoint. Конечно, в посте мы сможем охватить только наиболее частые сценарии, такие как каскадный выбор данных, проверка, добавление настраиваемых типов полей, заполнение полей, обработка событий и т. Д. Я думаю, в большинстве случаев этого будет достаточно. .
Не хочу отвлекаться, но несколько слов о быстром редактировании с точки зрения пользователей. Понятия не имею, почему им нравится функция быстрого редактирования, но это так. Они часто им пользуются. Я предполагаю, что это потому, что им это кажется простым, в частности, они могут управлять данными, как в знакомом Excel. Пришло время перейти к делу.
Элемент управления JSGrid
Под капотом функциональности быстрого редактирования SP используется элемент управления JSGrid. Быстрое редактирование - одно из самых популярных мест, где используется этот элемент управления. По правде говоря, я не припомню никаких других сценариев OOTB, в которых он использовался.
В общем, как разработчик, вы можете использовать этот элемент управления где угодно (например, как описано в этом сообщении). В то же время я считаю, что в большинстве случаев вы сможете найти множество отличных альтернативных инструментов и фреймворков (например, this или this, если вы используете React) для выполнения ваших задач, связанных с представлением сетки, в более эффективный способ, но мяч на вашей стороне. С другой стороны, говоря о быстром редактировании, выбора нет. Особенно, если мы хотим доставить наше решение заказчику в разумные сроки. JSGrid очень гибкий, и его API отличный, вы можете контролировать широкий спектр деталей, связанных с визуализацией данных. Но основная проблема здесь в том, что это один из самых недокументированных средств контроля.
Представим, что у нас есть следующая структура данных на нашем портале SP.
Наш целевой список - магазины, мы собираемся настроить его режим быстрого редактирования.
Первое, что я хотел бы реализовать, - это каскадный поиск. Проще говоря, когда я выбираю страну, в поле города я хочу иметь возможность выбирать только города этой страны.
Мы должны начать с получения нашего элемента управления сеткой, для этого используется следующий код.
Не вдаваясь в подробности, мы получаем наш элемент управления сеткой и добавляем несколько обработчиков (preInit
иpostInit
). Надеюсь, их цель ясна из их названия. Кроме того, я добавил константы по ходу дела.
Следующее, что я собираюсь сделать, это переопределить метод GetItems
для поля города и вернуть только те города, которые принадлежат выбранной стране, или все города, если страна еще не указана. Я изменил метод postInit
следующим образом.
Как видите, здесь используются некоторые методы, которые не были описаны ранее, а именно toJsGridProperty
и getMappings
. Код getMappings
method можно найти ниже. Этот метод просто создает новое свойство JSGrid из title
и value
.
А код метода getMappings
можно найти здесь. В этом методе нет ничего примечательного, он просто возвращает информацию обо всех странах и городах в следующем формате:
{ <Country_1 ID>: [ { id: <City ID>, title: <City Title>, population: <City Population> }, ... ], ... }
Вот как это работает сейчас.
Здесь есть одна проблема. Когда мы меняем страну, нам нужно очистить выбранный город, если этот город не принадлежит к этой стране. Это ясно показано выше. Кроме того, мы хотели бы автоматически заполнять поле Population
, как только город будет выбран. Более того, мы хотим поддерживать все эти вещи для существующих записей, а также для записи записи. Давайте реализуем это поведение. Я добавил в postInit
handler следующий код.
Вот тогда в игру вступают события. Здесь я использую OnPropertyChanged
и OnEntryRecordPropertyChanged
. Вы можете прочитать больше о мероприятиях JSGrid здесь. Пожалуйста, найдите реализацию методов attachEvent
и onPropertyChanged
ниже.
Несколько слов об этих методах. attachEvent
method позволяет прикреплять некоторые события к элементу управления JSGrid. Я использую обходной путь блокировки, чтобы предотвратить рекурсию, потому что мы изменяем другие свойства в обработчике OnPropertyChanged. Метод onPropertyChanged
выполняет всю основную работу. Здесь я определяю, что свойство было обновлено, при необходимости обновляя другие поля. Полный код текущего этапа можно найти здесь. Вот как это работает сейчас.
Последнее, что я собираюсь реализовать, - это валидацию. Я хотел бы продемонстрировать реализацию нескольких уровней проверки, в частности, уровня столбца и уровня строки. Проверка на уровне столбца полезна, когда вы хотите, чтобы значение в одной ячейке удовлетворяло определенным ограничениям. Например, вы хотите проверить, соответствует ли значение в ячейке некоторому регулярному выражению. В то же время проверку на уровне строк следует использовать, когда ваша проверка основана на значениях нескольких ячеек.
Что касается проверки на уровне столбца, я собираюсь проверить поле Dimensions
. В частности, мне бы хотелось, чтобы его значение соответствовало следующему формату: {length}-{width}-{height}
, где длина, ширина и высота - целые числа. Найдите реализацию ниже.
И давайте посмотрим, как это работает.
Мы близки к завершению, поэтому последнее, что я собираюсь реализовать, - это проверка на уровне строк. Например, здесь я хочу гарантировать, что значение поля Rent Price ($ / month)
составляет менее 10% населения города. С этой целью я добавлю следующий код в postInit
method.
Здесь я использую OnCellEditCompleted
event и добавляю ошибки строк в элемент управления JSGrid, если условия не выполняются. Давайте в последний раз посмотрим, как это работает.
Вот и все! Полный код можно найти здесь. Несколько слов об установке. Вы можете хранить исходный код где угодно, все, что вам нужно, это добавить ссылку на страницу представления. Что касается меня, я сохранил исходный код в библиотеке SiteAssets и добавил ссылку через JSLink веб-части. Кстати, отлично работает в современном стиле и в IE 10+. Статья кажется лучше, чем я ожидал, я полагаю, это потому, что у нас есть много случаев, которые мы должны учитывать при работе с быстрым редактированием SP. В любом случае мы ничего не можем с этим поделать. Это все, спасибо, что прочитали.