Deployment Guide – netDocShare Content Browser

netDocShare content browser is an add-on that can be used to view and interact with NetDocuments content inside your custom project. This document outlines how users can set up and configure the netDocShare content browser component.

netDocShare content browser component can be added to the following

  • .NET Core / MVC
  • PHP
  • Java
  • React/Angular Application
  • Angular JS

Learn how to map the netDocShare content browse component to the button.

Setup the configuration for workspace and folder sources.

Add the netDocShare content browse component to a particular path in your .NET or react or Angular project.

Example

Add the netDocShareLicenseKey.txt in this location “/netDocShare/assets/images/foldericons/”.

netDocShare automatically runs license checks every time our webparts are loaded. License checking requires an internet connection to verify with our servers.

If you see an error message which reads “Unable to locate license key” this means that netDocShare was unable to find your license key, contained in netDocShareLicenseKey.txt. Please ensure that this file is in the correct directory path.

If you see an error message which reads “Invalid License”, this means that netDocShare was able to find the key in your system, however, validating the key with our server has failed. This could be caused by anything from server outage to local internet issues to the expiry of the license.

Please contact netDocShare support if either of these messages are encountered and you are unable to resolve the issue.

You can program netDocShare to activate via a button by adding a button with a specific ID to your Html content. Add the button with the id entitled “netDocShareContentBrowse_In_iframe” Or “netDocShareContentBrowse_In_window”.

Using ” netDocShareContentBrowse_In_iframe” will open the content browser component in an iframe popup and using “netDocShareContentBrowse_In_window” will open the content browser component in window.

Example buttons:

<button id=”netDocShareContentBrowse_In_iframe” type=”button”> Browse by iframe </button>
<button id=”netDocShareContentBrowse_In_window” type=”button”> Browse by window</button>

Add the script to load the netDocShare content browse component JS file.
Example script:

<script src=”~/js/netDocShare/netDocShare.js”></script>

Add the path of netDocShare content browse component in the variable “NETDOCSHARE_PATH”. Which is used to get the path of the browse component inside the project.
Example: NETDOCSHARE_PATH = “/js/netDocShare/”;

The config is used to set up sources, base URL, asset path, show and hide the buttons in the content browser component. Users can update the config on any page using the variable NETDOCSHARE_CONFIG. This variable must have the below JSON format which is used to load the browser component.

Config Example:
NETDOCSHARE_CONFIG = {
viewType: ‘browse’,
netDocsClientId: ‘AP-v0VO4sCA’,
netDocsClientSecret: ‘122neL4s4DfcMaUX2piUWkMzg4ggurwyr2xMCsf’,
netDocsBaseUrl: ‘https://api.vault.netvoyage.com/v2’,
CDNBaseUrl: ‘https://services.klobot.ai/playground/netdocsharecontentbrowse/’,
AuthSuffix: ‘https://services.klobot.ai/apps/live/netdocshare/srvc/auth’,
assetPath: ‘https://services.klobot.ai/playground/netdocsharecontentbrowse/js/netDocShare/assets/images/foldericons’,
sources: [
{ id: ‘4840-8329-8181’, type: ‘workspace’ },
{ id: ‘4821-7117-1787’, type: ‘filtersearch’ },
{ id: ‘4824-8325-7608’, type: ‘savedsearch’ },
{ id: ‘4846-3725-4171’, type: ‘folder’ },
{ id: ‘4820-3844-3397’, type: ‘folder’ },
{ id: ‘4837-1722-6497’, type: ‘savedsearch’ },
{ id: ‘4830-4108-5418’, type: ‘sharedspace’ }
{ id: ‘ myNDHomePage ‘, type: ‘ myNDHomePage ‘}
],
TableDisplayDocsOnly: false,
clickBehavior: ‘openND’,
showLogo: false,
showLogout: false,
searchBehavior: ‘searchAll’,
showSearchBox: true,
ndThread: false,
ndTasks: false,
showUpload: false,
showDownload: false,
showRefresh: false,
showFilter: false,
showExport: false,
allowMultiSelection: true,
showContent: ‘all’,
showFavoriteWorkspaces: true,
showRecentWorkspaces: true
showGotoWorkspace: false,
workSpaceContentDisplay: ‘ShowSummaryOrListView’
}

Config values that are not mentioned in this section can be safely removed from the config as they do not have an effect in this specific case.

  • viewType is mandatory and there is no need to change the value “browse”.
  • netDocsClientId, netDocsClientSecret, and netDocsBaseUrl are needed to access the NetDocuments Rest API. Omitting these values will cause the webpart to fail authentication.
  • CDNBaseUrl should be the root URL of your project. This URL must end with a forward slash: ‘/’
  • The NetDocsBaseUrl is the root URL used to retrieve API content from the API servers. For example. The US URL is: https://api.vault.netvoyage.com/v2 and https://api.eu.netdocuments.com/v2 for our EU/UK clients. Please follow the EU format for other regions.
  • AuthSuffix should be the URL https://services.klobot.ai/apps/live/netdocshare/srvc/auth. Which is used to authenticate NetDocuments.
  • assetPath is the full path where static assets are stored and must be obtained during deployment. This config is mandatory as it is also used to determine licensing information.
    Your asset Path might look like the following:
    {path of netDocShare content browse component}/assets/images/folderIcons/
  • sources property is used to add the multiple sources (using NetDocuments IDs) to display in the browse window
  • showLogo, showLogout, showSearchBox, ndThread, ndTasks, showUpload, showDownload, showRefresh, showFilter, showExport, showGotoWorkspace are optional properties that show or hide specific features from view. showLogo controls whether a netDocShare logo is displayed on the top left. showLogout, when turned on, will display a User greeting and the option to log out on the top right. showSearchBox hides or shows the search box.
  • allowMultipleSelection property is used to allow a user to select multiple selections or single selection if allowMultipleSelection is true it is allowed to multi selecting otherwise it is a single selection.
  • showContent property is used to show either documents or folders, else both. In the case of “folders”, showContent property will show only the files within a particulate folder, whereas in the case of “all” will show both files and folders.
  • workspaceContentDisplay property is used to show workspace content folders and documents in a separate view In configuration add the type and id as “myNDHomePage”, which is used to show the logged-in user home page content from NetDocuments.

In configuration add the type and id as “myNDHomePage”, which is used to show the logged-in user home page content from NetDocuments.
For example, { id: ‘ myNDHomePage ‘, type: ‘ myNDHomePage ‘ }

Go to workspace is used to show the specific workspace contents based on client and matter, also able to control go to workspace button based on configuration.
For example, showGotoWorkspace: false to hide the go to workspace button

When clicking the go to workspace button it will open the popup window and it shows cabinet, client, and matter fields once selected all the fields and click ok means it will open the selected workspace.

In workspace source, users can show the folders and documents as a separate view called summary view and list view using the property “workSpaceContentDisplay”

  • WorkSpaceContentDisplay property has two options called “ShowSummaryOrListView” and “ShowAll”.
  • “ShowSummaryOrListView” option is used to enable the summary or list view which is used to show folders and documents in a separate view.
  • “ShowAll” option is used to show folders and documents in the same view

Users can select 1 or more items and click the save button. this will save the selected content ids as a collection in the “NETDOCSHARE_SELECTEDCONTENTS” variable.