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.