Sergey Belskiy Technical Blog

All about SharePoint

How to work with async methods in React using SharePoint as data container

Привет всем.

Сегодня хотел бы поделиться интересным исследованием как можно работать с ассинхронными методами в React для получения и загрузки данных в контролы из SharePoint списка.

Для этого мы будем использовать office-ui-fabric-react c его компонентами SpinnerLoading, TaxonomyPicker, sp-pnp-js, react-dom, react.

С чего начать, а начнем мы непосредственно с создания необходимого проекта и нужных нам файлов. Я уже об этом рассказывал в предыдущей статье https://blogs.msdn.microsoft.com/sergey_belskiy_technical_blog/2017/08/10/how-to-develop-for-sharepoint-on-premise-using-sp-pnp-core-js-node-js-and-visual-studio-code-on-mac/

Для начала нам необходимо создать метод, которым мы будем забирать данные из SharePoint.

loadSubscriptionData(){
setup({
headers: {
“Accept”: “application/json;odata=verbose”,
}
});
let w = new Web(“https://sharepoint.com”);
w.lists.getByTitle(“List”).items.top(5000).select(“Title”, “ID”).get().then((items) =>{
let Qualifications = [];
items.map(function(item) {
Qualifications.push({
“label” : item.Title,
“value” : item.ID.toString()
});
});
this.setState({QualificationData: Qualifications, isLoading: false});
})
}
Далее нам необходимо вызвать этот метод в специальном методе react
componentWillMount(){
this.loadSubscriptionData();
}
Этот метод вызывается перед методом Render и прорисовкой компонентов на странице. Более детально можно ознакомиться с этим методом здесь https://facebook.github.io/react/docs/react-component.html#componentwillmount.
Но все равно у нас нет столько времени ожидания, так как список не успеет подгрузится в ассинхронном методе. Для этого нам на помощь приходит спинер.
render() {
return (
<div>
{ this.state.isLoading &&
<SpinnerLoading />
}
{ !this.state.isLoading &&
<div>
<TaxonomyPicker
name=”Qualification”
displayName=”Qualification:”
defaultOptions={this.state.QualificationData}
multi={true}
placeholder=”Qualification”
className = “ms-font-xs ms-fontWeight-regular ms-fontSize-xs”
onPickerChange = {this.changedQualification.bind(this)}
/>
<PrimaryButton
data-automation-id=’dataSubmit’
text=’Create’
className = “ms-font-xs ms-fontWeight-regular ms-fontSize-xs”
onClick = {this.addItem}
/>
</div>
}
</div>
);
}
То есть другими словами, пока данные не подгрузятся у нас спинер будет крутиться и пользователь будет ожидать пока появится комбобокс с данными из списка SharePoint.