Displays a search-based document listing with a folder tree view, document list and search filters/refiners.

• • Displays all the files associated with the document library in the folder selected in the Document Viewer Tree
  • Includes a search field which filters the current list to display the matching results.  This filtering uses both the document title AND document content for matches to the entered search term (at least three letters are required to begin filtering)
  • Allows for sorting by FileName or LastModified columns (Note: displayed columns are configurable by modifying the widget properties)
  • Includes a Download link () as well as a View link ( ) for each entry.  Note: Depending on your browser configuration, clicking on the file name will either download or open the file.
  • Supports paging for efficient display of results.  The number of items per page is configurable.
  • NOTE:  Supports file names including the following special characters ,.;{}'!@#$^&()_-+= in file types ppt, doc, pdf, txt, jpg, png, and OneNote.  File names containing special characters of * : < > ? / | are not supported.

• • Widget Name: DocumentViewerWidget
  • Available With:  Release 4.0 and above
  • Content App Type:  N/A
  • Content Type:  N/A
  • Content App Name:  N/A
  • List Name:  N/A
  • Recommended Images Sizes: N/A
  • Dependencies:  SharePoint

Document Viewer is search-based and maintains the capacity and performance to search, filter and display libraries with tens of thousands of documents, while still providing the ability to upload, edit and share documents.

IMPORTANT: Since the Document Viewer is search-based, once a change is made to a document it will not appear for other users until AFTER the next search index update (crawl). This includes not only additions to the document, but new versions added and changes in the document's permissions as well.

 

The Document Viewer is actually comprised of three widgets that are designed to work together to provide the solution. Expand the following topics for more information:

• Displays the entire folder structure in the mapped document library
• Linked to the Document Viewer grid display to provide navigation through the document library
• Also includes an “All Files” link which causes the grid to display a flat list of all files in the mapped document library
• Includes a horizontal scroll bar (not shown) to handle situations where the folder structure/folder names exceed the allocated widget width

 

• Displays all the files associated with the document library in the folder selected in the Document Viewer Tree
• Includes a search field which filters the current list to display the matching results.  This filtering uses both the document title AND document content for matches to the entered search term (at least three letters are required to begin filtering)
• Allows for sorting by FileName or LastModified columns (Note: displayed columns are configurable by modifying the widget properties)
• Includes a Download link () as well as a Preview link () for each entry.  Note: Depending on your browser configuration, clicking on the file name will either download or open the file.
• Supports paging for efficient display of results.  The number of items per page is configurable.

 

Document Upload

The Document Viewer supports uploading of files using a drag/drop/wizard based interface.  To start the process, drag one or more files from your local folder to the document listing area for the target upload folder.  You will see the listing area outline in yellow to show that it is ready to drop the files.

A wizard based flow will prompt for any required metadata fields, as well as require the user to check-in the files if versioning is enabled on the document library.  No more accidentally leaving files checked out!

 

 

Once the wizard is complete, the uploaded file(s) will appear in a “Pending Uploads” area.  This area, specific to each folder, will appear when files have been added via drag/drop but have not yet been indexed by search.  Once indexed by search, they will appear in the document listing area.  If there are no Pending Uploads, that section is not displayed for the folder (see Configuration Options for the Document Viewer for setting the timing for files in the Pending Uploads area)

 

Document Viewer Preview/Edit

When clicking on the Preview icon for a document a modal preview window is opened.

 

• Provides a preview of the document (dependent on document type and whether the correct viewer is installed in your server or tenant).  Microsoft Word, Excel, PowerPoint and PDF files leverage Office Online for preview.
• Includes a link that can be copied and shared for access to the file (for users with correct permissions)
• Integrates the following functions for all file types
  • Checkin/Checkout – if enabled for the document library
  • Open – opens the document in the browser
  • Share – opens a dialog to enable sharing of the document link with one or more users
  • Follow – opens a dialog to “follow” the document and be notified of any updates
  • Delete – deletes the document (current user must have delete permissions for the library)
• For Office Online type documents (Word, Excel, PowerPoint) also includes the ability for users to “Edit” the document either in the browser or within their local app.

 

When editing a document, be sure to “Checkout” the document while editing, and then “Checkin” the document once finished.  This will ensure that other users see your changes.

 

• Configurable to support any number of Refiners (Author, File Type and Last Modified default)
• Selecting a refiner filters the current set of documents (all documents in the folder selected in the Document Viewer Tree)
• Supports a logical “Or” within a refiner (Example: txt “or” docx) and a logical “And” between refiners (Example: Author = Heather Shuck“AND” File Type = pdf or txt)
• Automatically adjusts the choices in each refiner based on the current document set properties
• Can configure any pertinent column within the document library as a refiner (including taxonomy based columns such as “Category”)

There are a couple of steps which are required for proper operation of the Document Viewer

Add a New Managed Property

• Add a new managed property named "ImageParentLink" to the Site Collection Search Schema
• The property should have "searchable", "queryable" and "retrievable" checked
• The property should have "Token Normalization" and "Complete Matching" checked
• And finally, should be mapped to the "ows_ParentURL" crawled property

For EACH Document Library that uses the Document Viewer

• Access the Library Settings and click on the “Indexed Columns” link
• Add “Content Type” and “Created” as two indexed columns using the “Create a new index”

 

Configuration Options for the Document Viewer

The Document Viewer can be configured using the Widget Manager or the front-end Widget Edit modal.  All configuration is done through editing of the Document Viewer widget.

To edit the list of property fields

It is first necessary that the field be in the search schema - see {tenanturl}/_layouts/15/listmanagedproperties.aspx. With that in place, in our example we will use the ListItemID property to show how to add a new column to the widget.

We first ensure the property is in the comma separated list for the selectfields property; if it is not, then add it. Ex: Title,Path,FileLeafRef,Size,Author,FileExtension,ListItemID

Next, we edit the displayfields property, by adding another entry for the field we want to show. Our entry will use the title "Item Id" and use the ListItemID property. Note, we use the large-2 class to style the column (it is based on a 12 column grid such as foundation or bootstrap):

,{"title":"Item Id","id":"ListItemID","cssclass":"large-2"}

We can then see our column in the list:

The full displayfields property, formatted for ease of viewing:

Selected List Columns / Select Fields	Columns in the SharePoint list that the widget is utilizing
Library Name	The name of the SharePoint document library to display from
Page Size	The number of items/page for paging
Refiners	The list of refiners to be displayed.  The format of this string is a comma separated list with each refiner formatted as follows: {"title":"Refiner display name","id":"List column name"} Example: {"title":"Author","id":"DisplayAuthor"} Note: the taxonomy column refiner { "title":"Category","id":"owstaxidmetadataalltagsinfo"} will take ALL tags from all columns and merge them into a single refiner
Display Fields	The fields to display within the Document Viewer file listing grid. The format of this string is a comma separated list with each refiner formatted as follows: {"title":"display name","id":"List column name","cssclass":"if applicable"} Example: {"title":"File Name","id":"FileName","cssclass":"large-5"}
Latest Time Period	The time (in minutes) files remain in the Pending Uploads section after uploading.  MINIMUM SETTING is 10 with a maximum of 100. If a value less than 10 is set, it will default to 10 mins. This setting should be set to the same interval as the search index frequency so that files disappear from Pending once they are indexed.
Latest Number	The maximum number of files to display in the Pending Uploads area.
Folder Row Limit	The maximum number of folders being filtered. Defaulted to 1000 folders.
Default Items Open Setting	Set to true by default. Folders display open with list of files.
Optional Columns	Additional user specified fields to display within the document viewer listing grid. Optional column field can be left blank if no additional columns are needed to display.
Callback Method	Name of the function called before the view has been rendered to the screen to edit properties of the view.

 

View Name:  Document Viewer View Description:  Displays a vertically stacked list of files, that’s complete with a widget title, a file search and a folder creation button View Preview: