1

I am try to convert this old school example. It was drop 3, now I need to convert it to SPFx RC version;

private createItem(): void {
    this.getListItemEntityTypeName()
      .then((listItemEntityTypeName: string): Promise<Response> => {
        const body: string = JSON.stringify({
          '__metadata': {
            'type': listItemEntityTypeName
          },
          'Title': `Item ${new Date()}`
        });
        return this.props.httpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`, {
          headers: {
            'Accept': 'application/json;odata=nometadata',
            'Content-type': 'application/json;odata=verbose',
            'odata-version': ''
          },
          body: body
        })

only diff is shape of post. changed to;

private createItem(): void { 
    this.getListItemEntityTypeName()
      .then((listItemEntityTypeName: string): Promise<Response> => {

        return this.props.httpClient.post(`${this.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`, 
        SPHttpClient.configurations.v1,
        "https://mydomain.sharepoint.com/sites/test14jan"
      })
  }

method simple adding an item to list in domain. myweb part running in server(https://mydomain.sharepoint.com/_layouts/15/workbench.aspx) each time I refresh the page this error seems in console(before call any method) enter image description here

"403 forbidden" can you help me to solve this please? I am pretty sure this cause my problem because I am able to get items from list via this get method;

this.props.httpClient.get(`${this.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items?$select=Title,Id`, 
        SPHttpClient.configurations.v1)

so something wrong with post. using oldschool header object not works with spfx RC.0 as you know

EDITED: Here is exception; enter image description here

1 Answer 1

1

I think there is nothing to do with javascript error you mentioned (suiteserviceproxy.aspx), because this error doesn't related to SPFx. For example I'm also see this error on my dev tenant on many different pages (not only workbench.aspx). I tend to think this is some misconfiguration with other Office 365 services, but for dev tenant that's OK.

For you question, I think you need to fix two things:

  1. Use SPHttpClientConfigurations instead of SPHttpClient (like they mentioned under release notes for RC0)
  2. You didn't provide request body for post, which is required if you want to update an item.

So you updated code will be:

import required modules:

import {SPHttpClient, SPHttpClientConfigurations} from '@microsoft/sp-http'; 

 private createItem(): void {
    this.getListItemEntityTypeName()
      .then((listItemEntityTypeName: string): Promise<Response> => {
        const body: string = JSON.stringify({
          '__metadata': {
            'type': listItemEntityTypeName
          },
          'Title': `Item ${new Date()}`
        });
        return this.props.httpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`, SPHttpClientConfigurations.v1, {
          headers: {
            'Accept': 'application/json;odata=nometadata',
            'Content-type': 'application/json;odata=verbose',
            'odata-version': ''
          },
          body: body
        }) 

UPD
I guess you are not using latest version of npm packages and typescript definitions. Consider screen from my env (post accepts three arguments):

enter image description here

When migrating to RC0 I found it MUCH easier to run everything from scratch and then add missing files. Otherwise you might have total mess (like I had) with different versions of modules and ts errors.

First of all you need to update yo generator for SPFx:
npm install -g @microsoft/generator-sharepoint

Then in a clean folder run yo @microsoft/sharepoint. Select your template (React or No JS framework).
Then start adding missing files and check if it works now.

5
  • Hello, ty for response. I edited post as you said but its not match with new signature post method of RC. Did you tried this before ? How did you make it work ? Jan 23, 2017 at 8:27
  • @TyForHelpDude: Please take a look at the update Jan 23, 2017 at 8:40
  • 1
    You didn't copy my code correctly. Take a note, that the last third parameter should be enclosed with { }, on your screen it doesn't enclosed. Jan 23, 2017 at 11:28
  • Yes You are rigth, I mistype the headers paramters now it works. Thanks :) Jan 23, 2017 at 11:28
  • Hi Sergei, please check this post when you are available; sharepoint.stackexchange.com/questions/206043/… Jan 25, 2017 at 9:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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