SharePoint Web Part Sample with Edit Button for non-Microsoft Office Documents Editing

This sample demonstrates a SharePoint web part that displays Edit button for non-MS Office documents. Using this button can open Adobe Acrobat PDF and other non-MS Office documents for editing. To open documents this web part utilizes SharePointEditDocument() JavaScript function provided with IT Hit Edit Any Document SDK.

See also the getting started with building web parts on Microsoft website.

Follow the guide below to run the sample.


This sample requires Node.js v4+.

Unzip a sample

Unzip the sample contents to the ITHitSpsWebPart-DetailsList folder.


Install the dependencies.

$ cd ITHitSpsWebPart-DetailsList 
$ npm install

Configure your SharePoint site URL

Open src\webparts\ITHitDetailsList\components\ITHitDetailsList.tsx and edit private _listTitle: string variable. Point it to your SharePoint list title.

Run the sample

Build and run the sample in the debug mode:

$ gulp serve

Opening documents for editing

  • Open a SharePoint's hosted workbench from the following URL:
  • Add web part on the web page. Press the + button and select the ITHit-DetailsList component.
  • Select the Edit button next to any non-MS Office document to open it for editing. The dialog asking for protocol application installation will appear.
  • Install the protocol application and activate the web browser extension. Find more about the web browser extension activation in this article.
  • Now click the Edit button again. This time the web browser protocol warning dialog will appear. Confirm the document opening. The document will open in the desktop application that is associated with the file extension on the client machine. 

Next Article:

SharePoint List View Sample with Edit Button on a Ribbon Bar for non-Microsoft Office Documents Editing