0

I have an SPFX client web part that opens a dialog box containing a couple of textboxes, and when the user clicks Ok, I want the contents of that dialog box added to a list as a new list item. The list itself is stored on another site collection.

Here is a summary of my code

import { Web, ItemAddResult } from "@pnp/sp";

private async _addErrorItem(){
    let web = new Web("https://tenancy.sharepoint.com/sites/hubsite");

    web.get().then(w => {
        console.log("Web details: ", w);
        w.lists.getByTitle("Page Errors").items.add({
            Title: "Title",
            Description: "Description",
            Url: this.props.pageContext.site.serverRequestPath
        }).then((iar: ItemAddResult) => {
            console.log(iar);
            this.setState({hideDialog:true});
        })
        .catch((error:any) => {
            console.log("Error: ", error);
        });
    });
}

The _addErrorItem() is called when the Ok button is clicked on the dialog box. When this happens, I get the following error:

Uncaught (in promise) TypeError: Cannot read property 'getByTitle' of undefined

In other words, it does not see the "lists" property of my web object that is returned from the get() promise.

Can anyone suggest what's wrong with this code?

Incidentally, where I write the web details to the console, I can see an object that looks somewhat like a SharePoint object (it contains properties such as WelcomePage and WebTemplate), but crucially doesn't appear to have the properties I need, such as lists.

  • Is the code executing in the same site / site collection in which the “Page Errors” list exists? – A.k.A. Fritz Sep 24 '19 at 16:08
  • in first A sync query web.get() , you will receive only web properties not the lists. you need to explicitly call to receive the list information and then do items.add – vinit kumar Sep 24 '19 at 16:57
2

The issue is that you're requesting a web and then use the retrieved object to get a list. Just use the original web create with the Web contructor:

import { Web, ItemAddResult } from "@pnp/sp";

private async _addErrorItem(){
    let web = new Web("https://tenancy.sharepoint.com/sites/hubsite");
    web.lists.getByTitle("Page Errors").items.add({
            Title: "Title",
            Description: "Description",
            Url: this.props.pageContext.site.serverRequestPath
        })
        .then((iar: ItemAddResult) => {
            console.log(iar);
            this.setState({hideDialog:true});
        })
        .catch((error:any) => {
            console.log("Error: ", error);
        });

}
| improve this answer | |

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.