SharePoint Online からデータを照会する Web パーツを作成しています。返されたデータは DetailsList コンポーネントを使用して表示されます。問題は、結果を返すのに時間がかかるクエリであり、Web パーツが取得できません。更新され、「空」のページにとどまります。
1 ~ 2 秒かかる高速クエリの場合、Web パーツが更新され、結果が正常に表示されます。
また、 displayLoadingIndicator()を使用して Web パーツがビジーであることを示すフィードバックをユーザーに提供したいのですが、これを機能させることができません。
ここに私のコードがあります(簡単にするために省略されています):
-NavigatorWebPart.ts
export default class NavigatorWebPart extends BaseClientSideWebPart<INavigatorWebPartProps> {
protected onInit(): Promise<void> {
this.context.statusRenderer.displayLoadingIndicator(this.domElement, "Querying items...");
return super.onInit();
}
public render(): void {
const element: React.ReactElement<INavigatorProps> = React.createElement(Navigator, {});
ReactDom.render(element, this.domElement);
}
- Navigator.tsx
let listItems : any[] = [];
const listColumns : IColumn[] = [... // shortened for brevity
export default class Navigator extends React.Component<INavigatorProps, IListMembers> {
constructor(props) {
super(props);
this.queryLists();
// this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.state = {
items : listItems,
columns : listColumns,
compactMode : false
};
}
public render(): JSX.Element {
const { items, columns, compactMode } = this.state;
return (
<div>
<div className='ms-SearchBoxSmall'>
<CommandBar
isSearchBoxVisible={ true }
items={ [] }
farItems={ this.listFarItems }
/>
</div>
<br />
<div>
<DetailsList
items={ items }
columns={ columns }
compact={ compactMode }
layoutMode={ DetailsListLayoutMode.justified }
selectionMode={ SelectionMode.none }
onColumnHeaderClick={ this._onColumnClick }
/>
</div>
</div>
);
}
public async queryLists() {
await sp.web.lists
.filter("Hidden eq false")
.expand('RootFolder')
.get()
.then( response => {
response.forEach( (item, index) => {
var newData = new Date(item.LastItemModifiedDate).toLocaleDateString() + ' ' + new Date(item.LastItemModifiedDate).toLocaleTimeString();
listItems.push({
"ID" : index,
"URL" : item.RootFolder.ServerRelativeUrl,
"Icon" : item.BaseTemplate,
"Title" : item.Title,
"Total" : item.ItemCount,
"Modified" : newData
});
});
});
}