Document Viewer - Akumina Community

Document Viewer

The Akumina Document Viewer Control is a search-based document listing solution that combines a folder tree view, document list and search filters/refiners into one easy to use interface. Because it is a search-based control, it has 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 a search-based control, 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:

DocumentViewerTree Widget


  • 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 = Greg Clukey “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 the shown “Category”)

Document Viewer Installation and Configuration

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.  The following are the areas of configuration:


  • selectfields – the data fields to be used in the display
  • libraryname – the name of the SharePoint document library to display from
  • pagesize – 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
  • displayfields – 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″}
  • latestimeperiod – 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.
  • latestnumber – the maximum number of files to display in the Pending Uploads area

To edit the list of fields shown

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:

“title”: “Title”,
“id”: “FileName”,
“cssclass”: “large-4”,
“defaultsort”: true,
“sortdirection”: “ascending”
“title”: “Last Modified”,
“id”: “LastModifiedTime”,
“cssclass”: “large-3”
“title”: “Last Modified By”,
“id”: “EditorOWSUSER”,
“cssclass”: “large-2”
    “title”: “Item Id”,
    “id”: “ListItemID”,
    “cssclass”: “large-2”

Creating a Direct Link to a specific folder in the Document Viewer

In the case where you want to have a user click on a link and be navigated to the Document Viewer with a specific folder in the document library selected, you can use the following URL structure to do so:

https://[Full path to the document viewer page]?selectedfolder={relative path to the desired folder]

Example: I want to navigate the user to the “Sub2” folder in the document viewer when they click on a link:

Views: 424