How to get the document ID's from the selected documents in SPFx listView extension?

Question

I have a folder with documents and a SharePoint listView extension.

I want to be able to retrieve the Document ID's after selecting documents in the folder in order to perform Graph API requests with them later on. How do I do that? Currently I have this:

private async handleCommand(selectedItems: any[]): Promise<void> {
    try {
      if (selectedItems && selectedItems.length > 0) {
        const results: string[] = [];

        for (const selectedItem of selectedItems) {
          const fileName = selectedItem.getValueByName('FileLeafRef');
          const folderPath = '<path>';

          try {
            const item = await sp.web.getFolderByServerRelativeUrl(folderPath + fileName).getItem<{
              Id: number,
              Title: string
            }>('Id', 'Title');

            console.log(`Id: ${item.Id} -- ${item.Title}`);

            await item.getCurrentUserEffectivePermissions().then(perms => {
              console.log(perms);
            });
          } catch (error) {
            console.error(`Error getting item for ${fileName}:`, error);
            results.push(`Error getting item for ${fileName}: ${error.message}`);
          }
        }

        // Display the combined results in a single alert
        await Dialog.alert(`Selected documents:\n${results.join('\n')}`);
      } else {
        // No items selected, handle accordingly
        await Dialog.alert('No items selected.');
      }
    } catch (error) {
      console.error('Error handling command:', error);
      await Dialog.alert(`Error handling command: ${error.message}`);
    }
  }

I tried this code but it gives me a 403 error.

Is this the correct way of doing this?

I used the documentation of https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Files but it's not clear to me on how to implement it.

Answer 1

If you are looking to getting the internal Id of the List Item you do not have to perform a SharePoint Request.

You can get fetch the Id column from the ReadonlyArray<RowAccessor> list.

It can be located from the event: IListViewCommandSetExecuteEventParameters object.

In the below code of onExecute function:

public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
  case 'COMMAND_1':
    console.log(event.selectedRows.map(item => item.getValueByName('ID')));
    console.log(event.selectedRows);
    break;
  default:
    throw new Error('Unknown command');
   }
}

You can see that we can map the selectedRows property so that it returns an array of the IDs of the selected Items. A screenshot of this can be seen below:

There are also plenty of other properties that are carried alongside the view of the list, some of which are the below:

Keep in mind, that if a column is not included in the values or if the getValueByName function is returning null, you should include the column in the selected View. Also, the repo that you are looking at is deprecated and archived. I would recommend you take a look at the newer versions of the library here.