How to get the URL for a selected document in a sharepoint framework extension spfx

Question

How can I obtain the URL for a selected document in a sharepoint framework extension?

e.g. a friendly url or unique reference that a user can use to open the selected document;

https://mysite.sharepoint.com/sites/test/documents/mydocument.pdf

I'm trying to create a new item in the ECB menu 'Open in my application' that will get the url for selected document, insert a prefix, and pass the url to the browser;

    protocol-handler://MyPrefixhttps://mysite.sharepoint.com/sites/test/documents/mydocument.pdf

I'm having difficulty obtaining the URL for the document using the sharepoint framework, I'm unsure if it's even possible. I've looked in the api reference for objects like sp-page-context but was unable to see any methods or properties that would return the URL for the selected document.

In the past this has been possible using Sharepoint Apps (e.g. {SiteUrl}{ItemUrl}), but I don't believe these are compatible with Sharepoint Online. What would be the correct approach to achieve this in Sharepoint Online?

Useful references;

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview https://docs.microsoft.com/en-us/javascript/api/overview/sharepoint

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/migrate-from-ecb-to-spfx-extensions

Answer 1

You can make use of the .spItemUrl property or FileRef to get the absolute URL of the document in a document library.

So modifying the example present in the link you have mentioned, modify your onExecute method as below to get the absolute URL of the document in the document library:

@override
  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'ShowDetails':

          //sharepoint doc lib url
          const documentServerRelativeUrl = event.selectedRows[0].getValueByName('FileRef');

          //form the absolute url
          const documentAbsUrl = "protocol-handler://MyPrefixhttps://" + `$https://mysite.sharepoint.com${documentServerRelativeUrl}`;

          //pass the documentAbsUrl to redirect code, something as below
          window.location.replace(documentAbsUrl);      
        break;  
      default:
        throw new Error('Unknown command');
    }
}

If however, you want to redirect a user so that it can be accessible outside of SharePoint as well without any authentication, use .spItemUrl as below:

@override
  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'ShowDetails':          
          //one drive absolute url which can be opened anonymously
          const documentUrl = event.selectedRows[0].getValueByName('.spItemUrl') + '&[email protected]';

          const oneDriveUrl = "protocol-handler://MyPrefixhttps://" + documentUrl;

          //pass the oneDriveUrl to redirect code        
          window.location.replace(oneDriveUrl);
        break;  
      default:
        throw new Error('Unknown command');
    }
}

Answer 2

I was hoping to find a call that would provide the an entire absolute url to the document, including the site.

e.g.

https://mysite.sharepoint.com/sites/Test/MyDocument.pdf

It appears such a call doesn't exist. The .spItemUrl is interesting, though I'm not sure if this type of URL will work with the application I'm passing the url to (it's a custom application that opens documents using WebDAV protocol)

It looks like parts of the URL can be obtained separately and pieced together to form the full URL.

e.g.

    //e.g. https://mysite.sharepoint.com/sites/Test
    const siteAbsUrl = this.context.pageContext.site.absoluteUrl;

    //e.g. /sites/Test
    const siteRelUrl = this.context.pageContext.site.serverRelativeUrl;

    //sites/Test/Shared Documents/MyDocument.pdf
    const docRelativeUrl :string = event.selectedRows[0].getValueByName('FileRef');

    //form the absolute url
    const absUrl = "my-protocol://PREFIX" + `${siteAbsUrl}` +`${docRelativeUrl.substr(siteRelUrl.length)}`;


    window.location.replace(`${absUrl}`);

It looks like this will work, though I'm still considering how best to handle spaces in the url and whether they should be url encoded as %20. e.g. .../Shared%20Documents/...