1

I need to fetch data from document library which resides in SharePoint online and display in spfx client web part with filtering, paging and sorting features.

Tools: ReactJs, TypeScript, Visual Studio code, gulp

Any demo samples or references would be great.

Thanks in advance.

  • do a Google search for "SharePoint Framework Tutorial". You'll find a whole bunch. Try a couple of those, and if you get stuck on something come back here and ask a more specific question. If you've already tried some, tell us what you tried and where you got stuck. – Derek Gusoff Feb 22 '18 at 14:29
  • I retrieved list data from SharePoint online and displayed in a SPFx webpart . But How can I do the same with Document library? And If I select any item it should display Check-in/Check-Out option. If I check-out, the doc must become read-only to other users. Please suggest. – raju Feb 26 '18 at 7:13
  • Getting documets (items) from Document library is the same as getting items from list. There is one difference, Title of a document is FileLeafRef field. To find if the document is Checked Out use CheckoutUser field, that will tell you the user who checked out the document. – Lukas Nespor Feb 26 '18 at 7:50
  • I didn't get your point Lukas, can you explain please? Only list items could be displayed in my spfx web part but not library files – raju Feb 27 '18 at 7:04
1

You can use the get method to get the all the fields values from the Document library.

Code:

@autobind
private GetListItems(): void {       
    this.props.spHttpClient.get(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items?$select=fieldNames`,
        SPHttpClient.configurations.v1,
        {
            headers: {
                'Accept': 'application/json;odata=nometadata',
                'odata-version': ''
            }
        })
        .then((response: SPHttpClientResponse): Promise<{ value: IListItem[] }> => {
            return response.json();
        })
        .then((response: { value: IListItem[] }): void => {
            //Write your logic to form the json object from response
        }, (error: any): void => {
            this.setState({
                status: 'Loading all items failed with error: ' + error,                 
            });
        });
}

Once you formed the json object, you can use the "material-ui-datatables" to achieve the sorting, filtering and paging functionality. You have to just pass the JSON object to this component.

Please find the reference below

material-ui-datatables

1
pnp.sp.web.getFolderByServerRelativeUrl("/sites/dev/Shared Documents/test").getItem().then(item => {

    console.log(item);
});

pnp.sp.web.getFolderByServerRelativeUrl("/sites/dev/Shared Documents/test").getItem("Title", "Modified").then(item => {

    console.log(item);
});

pnp.sp.web.getFolderByServerRelativeUrl("/sites/dev/Shared Documents/test").getItem().then(item => {

    // you can also chain directly off this item instance
    item.getCurrentUserEffectivePermissions().then(perms => {

        console.log(perms);
    });
});

References:

  • Hi Goshky, I like this approach suggested by you. As I'm beginner in SPFx, how can I read document library and do check-out/check-in in the spfx webpart. Any suggestions? I don't know where to start. – raju Feb 28 '18 at 5:58
  • Look at the link above. – Goshky Feb 28 '18 at 7:37
  • Thanks, any idea on how to display doc icons and check in, check out status. I am using reactjs and typescript – raju Jul 25 '18 at 7:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.