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

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

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

Элемент управления JSGrid

Под капотом функциональности быстрого редактирования SP используется элемент управления JSGrid. Быстрое редактирование - одно из самых популярных мест, где используется этот элемент управления. По правде говоря, я не припомню никаких других сценариев OOTB, в которых он использовался.

В общем, как разработчик, вы можете использовать этот элемент управления где угодно (например, как описано в этом сообщении). В то же время я считаю, что в большинстве случаев вы сможете найти множество отличных альтернативных инструментов и фреймворков (например, this или this, если вы используете React) для выполнения ваших задач, связанных с представлением сетки, в более эффективный способ, но мяч на вашей стороне. С другой стороны, говоря о быстром редактировании, выбора нет. Особенно, если мы хотим доставить наше решение заказчику в разумные сроки. JSGrid очень гибкий, и его API отличный, вы можете контролировать широкий спектр деталей, связанных с визуализацией данных. Но основная проблема здесь в том, что это один из самых недокументированных средств контроля.

Представим, что у нас есть следующая структура данных на нашем портале SP.

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

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

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

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

Следующее, что я собираюсь сделать, это переопределить метод GetItems для поля города и вернуть только те города, которые принадлежат выбранной стране, или все города, если страна еще не указана. Я изменил метод postInit следующим образом.

Как видите, здесь используются некоторые методы, которые не были описаны ранее, а именно toJsGridProperty и getMappings. Код getMappingsmethod можно найти ниже. Этот метод просто создает новое свойство JSGrid из titleи value.

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

{
  <Country_1 ID>: [
    {
      id: <City ID>,
      title: <City Title>,
      population: <City Population>
    },
    ...
 ],
 ...
}

Вот как это работает сейчас.

Здесь есть одна проблема. Когда мы меняем страну, нам нужно очистить выбранный город, если этот город не принадлежит к этой стране. Это ясно показано выше. Кроме того, мы хотели бы автоматически заполнять поле Population, как только город будет выбран. Более того, мы хотим поддерживать все эти вещи для существующих записей, а также для записи записи. Давайте реализуем это поведение. Я добавил в postInithandler следующий код.

Вот тогда в игру вступают события. Здесь я использую OnPropertyChanged и OnEntryRecordPropertyChanged. Вы можете прочитать больше о мероприятиях JSGrid здесь. Пожалуйста, найдите реализацию методов attachEvent и onPropertyChanged ниже.

Несколько слов об этих методах. attachEventmethod позволяет прикреплять некоторые события к элементу управления JSGrid. Я использую обходной путь блокировки, чтобы предотвратить рекурсию, потому что мы изменяем другие свойства в обработчике OnPropertyChanged. Метод onPropertyChanged выполняет всю основную работу. Здесь я определяю, что свойство было обновлено, при необходимости обновляя другие поля. Полный код текущего этапа можно найти здесь. Вот как это работает сейчас.

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

Что касается проверки на уровне столбца, я собираюсь проверить поле Dimensions. В частности, мне бы хотелось, чтобы его значение соответствовало следующему формату: {length}-{width}-{height}, где длина, ширина и высота - целые числа. Найдите реализацию ниже.

И давайте посмотрим, как это работает.

Мы близки к завершению, поэтому последнее, что я собираюсь реализовать, - это проверка на уровне строк. Например, здесь я хочу гарантировать, что значение поля Rent Price ($ / month) составляет менее 10% населения города. С этой целью я добавлю следующий код в postInitmethod.

Здесь я использую OnCellEditCompletedevent и добавляю ошибки строк в элемент управления JSGrid, если условия не выполняются. Давайте в последний раз посмотрим, как это работает.

Вот и все! Полный код можно найти здесь. Несколько слов об установке. Вы можете хранить исходный код где угодно, все, что вам нужно, это добавить ссылку на страницу представления. Что касается меня, я сохранил исходный код в библиотеке SiteAssets и добавил ссылку через JSLink веб-части. Кстати, отлично работает в современном стиле и в IE 10+. Статья кажется лучше, чем я ожидал, я полагаю, это потому, что у нас есть много случаев, которые мы должны учитывать при работе с быстрым редактированием SP. В любом случае мы ничего не можем с этим поделать. Это все, спасибо, что прочитали.