How To Open Selected Document In File Viewer (Word, Excel, PowerPoint And PDF) In SharePoint Modern Sites - Part One

Introduction 

 
In my previous article, I already explained how to open Office apps (Word, Excel, and PowerPoint) files and view in an iframe (classic mode).
 
Here, let us see about using modern web parts, and how we can view the selected document without any customization using File Viewer. 
 

Scenario 

 
Users may not be able to open documents on their client machine. Unfortunately, the default content provides a link which only allows users to download the document and provides a link back to the document file and open in the new tab of the browser window. We must find the downloaded document in a manual fashion. 
 
The requirement is to open the selected document without downloading on a local machine and open it in a new tab of the browser window and this should be achieved using Modern in OOB web parts. 
 

Objective 

 
The below OOB web parts will be used in this solution.
  1. Document library - Show document library files 
  2. File Viewer - The web part will allow users to view files directly in the page without needing to open the file. 
Follow the below steps.
 
Step 1
 
Navigate to your SharePoint 2013 site -> Create Modern Page in Site Pages.
 
Step 2
 
From this page,
  • Edit the page.
  • Hover over the canvas where you would like to add layout section.
  • Click on the “+” Sign.
  • Add New section “Two Column” from the Section layout.

    How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites
Step 3
 
You will see two sections to add web parts,
 
How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites
  • In the first column-section1,
  • Click on the “+” sign.
  • Select “Document library” from the web part toolbox.
  • Select relative document library; then the below screen appears.

    How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites
  • After the final selection of your selected Document library, the below screen will appear.

    How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites
Step 4
  • In the second column-section2,
  • Click on the “+” sign.
  • Select “File Viewer” from the web part toolbox.

    How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites

  • After you select the File Viewer Modern Web part, the below screen appears. Edit the File Viewer Web part
  • Click on the How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites sign on right upper corner of file viewer web part toolbox.
  • Then, click on the “Connect to Source” button.

    How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites
  • Select the same document library name from the dropdown which we had selected in the first section web part.
  • Click on "Republish" button.

    How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites
Final Step
  • Select any File from the left side document library
  • The file should be opened in the right side File viewer web part

Without Selected File Screen

 
How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites
 

With Selected File Screen

 
How Open Selected Document In File Viewer (Word, Excel, Power Point And PDF) In SharePoint Modern Sites