Комплексное руководство: привязка данных из списка в виде раскрывающегося списка в SharePoint Online

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

Метод 1. Использование SharePoint Designer
SharePoint Designer — это мощный инструмент для настройки сайтов SharePoint. Выполните следующие действия, чтобы связать данные из списка в виде раскрывающегося списка с помощью SharePoint Designer:

  1. Откройте SharePoint Designer и подключитесь к своему сайту SharePoint Online.
  2. Перейдите на нужную веб-страницу или форму, в которую вы хотите добавить раскрывающийся список.
  3. Вставьте раскрывающийся список на страницу или форму.
  4. Выберите раскрывающийся список и нажмите «Источник данных» на ленте.
  5. Выберите «Список SharePoint» в качестве источника данных и выберите нужный список.
  6. Укажите поля, которые вы хотите отобразить в раскрывающемся списке.
  7. Сохраните и опубликуйте изменения.

Метод 2: использование JavaScript и REST API
Если вы предпочитаете настройку на стороне клиента, вы можете использовать JavaScript и REST API SharePoint для привязки данных из списка в виде раскрывающегося списка. Вот пример фрагмента кода:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('YourListName')/items",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose"
        },
        success: function(data) {
            var dropdown = $("#yourDropdownId");
            $.each(data.d.results, function(index, item) {
                dropdown.append("<option value='" + item.Id + "'>" + item.Title + "</option>");
            });
        },
        error: function(error) {
            console.log(JSON.stringify(error));
        }
    });
});
</script>

Метод 3: использование SharePoint Framework (SPFx)
Если вы работаете с современной разработкой SharePoint, вы можете использовать SharePoint Framework (SPFx) для привязки данных из списка в виде раскрывающегося списка. Вот пример кода с использованием SPFx:

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
private async getListItems(): Promise<any[]> {
  const url: string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('YourListName')/items?$select=Title`;
  const response: SPHttpClientResponse = await this.context.spHttpClient.get(url, SPHttpClient.configurations.v1);
  const data: any = await response.json();
  return data.value;
}
private renderDropdownList(items: any[]): void {
  const dropdown: HTMLSelectElement = this.domElement.querySelector('#yourDropdownId');
  items.forEach(item => {
    const option: HTMLOptionElement = document.createElement('option');
    option.value = item.Id;
    option.text = item.Title;
    dropdown.appendChild(option);
  });
}
public render(): void {
  this.getListItems()
    .then(items => {
      this.renderDropdownList(items);
    });
}

В этой статье мы рассмотрели три различных метода привязки данных из списка в виде раскрывающегося списка в SharePoint Online. Вы можете использовать SharePoint Designer, JavaScript и REST API или SharePoint Framework (SPFx) в зависимости от ваших потребностей в настройке и подхода к разработке. Выберите метод, соответствующий вашим требованиям, и реализуйте его, используя предоставленные примеры кода.

Не забудьте тщательно протестировать свое решение и убедиться, что для доступа к данным списка предоставлены необходимые разрешения. Удачной настройки SharePoint!