Monday, November 6, 2023

How to update the choice field in PnP js react JS SPFx Sharepoint?

 If you want to update a SharePoint list item's choice field (yes/no field) to "Yes" (1) using PnPjs in SharePoint Framework (SPFx), you can follow these steps:


1. Connect to your SharePoint site using PnPjs.

2. Update the item by setting the choice field to `true` or `1` to indicate "Yes."


Here's an example:


```typescript

import { sp } from '@pnp/sp';


export default class YourComponent extends React.Component<{}, {}> {

  private listName: string = 'YourListName'; // Replace with your list name

  private itemIdToUpdate: number = 1; // Replace with the item ID you want to update


  public componentDidMount(): void {

    // Connect to the SharePoint site using PnPjs

    sp.setup({

      spfxContext: this.context

    });


    // Update the choice field for the specified item

    this.updateChoiceField();

  }


  private async updateChoiceField(): Promise<void> {

    try {

      const itemToUpdate = {

        field_10: true, // Set to `true` or `1` to indicate "Yes"

      };


      await sp.web.lists.getByTitle(this.listName).items.getById(this.itemIdToUpdate).update(itemToUpdate);


      console.log(`Choice field updated for item with ID: ${this.itemIdToUpdate}`);

    } catch (error) {

      console.error('Error updating choice field:', error);

    }

  }


  public render(): React.ReactElement<{}> {

    return (

      <div>

        {/* Your component's content */}

      </div>

    );

  }

}

```


In this example:


- We connect to the SharePoint site using PnPjs.


- The `updateChoiceField` function updates the choice field of an item by setting the `field_10` to `true`, which represents "Yes" or `1`. You can set it to `false`, `0`, or `null` to represent "No" or an empty choice.


- Make sure to replace `'YourListName'` with the actual name of your SharePoint list and update the `itemIdToUpdate` with the ID of the item you want to update.

No comments:

Post a Comment