В SharePoint Online привязка данных из списка в виде раскрывающегося списка является общим требованием для многих настроек и решений. В этой статье мы рассмотрим несколько методов достижения этой функциональности на примерах кода.
Метод 1. Использование SharePoint Designer
SharePoint Designer — это мощный инструмент для настройки сайтов SharePoint. Выполните следующие действия, чтобы связать данные из списка в виде раскрывающегося списка с помощью SharePoint Designer:
- Откройте SharePoint Designer и подключитесь к своему сайту SharePoint Online.
- Перейдите на нужную веб-страницу или форму, в которую вы хотите добавить раскрывающийся список.
- Вставьте раскрывающийся список на страницу или форму.
- Выберите раскрывающийся список и нажмите «Источник данных» на ленте.
- Выберите «Список SharePoint» в качестве источника данных и выберите нужный список.
- Укажите поля, которые вы хотите отобразить в раскрывающемся списке.
- Сохраните и опубликуйте изменения.
Метод 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!