Введение

Обновление (26 августа 2020 г.)

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

Функциональность

Ссылка на образец

https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-graph-cascading-managed-metadata

Оригинальная статья

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

Структура таксономии

Преобразовано в раскрывающийся список

Это должно было быть сделано на стороне клиента, поэтому это было сделано с использованием HTML, JSOM и jQuery.

Кредиты

Есть отличные блоги профессионалов SharePoint, которые очень помогли мне выполнить это требование.

Блог Вардхамана Дешпанде о работе с таксономией и javascript великолепен и помог мне начать работу с получением необходимых данных. Убедитесь, что вы читаете и другие блоги, написанные им. Они классные.

Команда Office Dev PnP придумывает интересные вещи, которые вы можете делать с SharePoint. В этом посте используется метод кэширования, предоставленный командой PnP. Взгляните на Страницу Office Dev PnP, где вы найдете отличные видеоролики и публикации о разработке SharePoint.

Блоги Скотта Хиллиера — это круто. Одна из многих вещей, которые мне нравятся в его блогах, это то, что они предоставляют отличную информацию о том, как писать javascript в целом для SharePoint. Я использовал фрагменты из некоторых его блогов, чтобы написать необходимый сценарий.

Элио Стройф ведет фантастические блоги о поиске в SharePoint. Я использовал информацию из некоторых его блогов, связанных с уточнениями поиска, чтобы создать вторую часть требования.

Сценарий

Этот сценарий запрашивает управляемые метаданные и получает пути ко всем терминам в требуемом наборе терминов и сохраняет пути в массиве. Пути хранятся в файле cookie, чтобы можно было избежать каждый раз запросов к службе управляемых метаданных.

Примечание. Это не единственный способ хранения данных о терминах. В зависимости от количества данных механизм может варьироваться.

Затем на этот сценарий ссылаются в файле HTML, который затем добавляется в качестве источника веб-части редактора содержимого.

Я объяснил блоки скрипта отдельно ниже. Весь сценарий можно найти здесь.

Используемые переменные

Фрагмент ниже показывает используемые массивы и другие переменные. Комментарии поясняют, что каждый из них представляет.

Используемые функции

Документ готов

Эта функция проверяет, является ли файл cookie нулевым, если он нулевой, то получает данные набора терминов после загрузки SP.Taxonomy.js. Если файл cookie не нулевой, вызывается функция загрузки данных континента.

Получить данные набора терминов

Эта функция получает данные набора терминов на основе предоставленного идентификатора. «Include (PathOfTerm)» гарантирует, что загружается только путь к терминам. Каждый путь помещается в массив. После этого массив сохраняется в куки.

Привязка данных к выпадающим спискам

Когда данные находятся в массиве, они привязываются к раскрывающемуся списку. Первые функции связывают данные континента, а следующие две функции связывают данные со страной и регионом. (Получение данных в эти массивы объясняется позже).

Обработчик изменений раскрывающегося списка континентов и стран

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

Функции cookie от PnP

Эти функции, предоставляемые PnP, просты для понимания и функционируют в соответствии со своим названием.

HTML

И, наконец, HTML-код, который ссылается на сценарий и является источником веб-части редактора содержимого. HTML также ссылается на пользовательский интерфейс Office Fabric, который делает пользовательский интерфейс Office похожим.