Introduction
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.
- .NET Core / MVC
- PHP
- Java
- React/Angular Application
- Angular JS
Adding the netDocShare content browser component
Add the netDocShare content browse component to a particular path in your .NET or react or Angular project.
Example
Add tenant list to use netDocShare
In netDocShare admin app need to allow the netDocShare web app or netDocShare content browser hosted web app origin to use netDocShare.
Use netDocShare views in web application
To use the netDocShare views (Normal view, tree view, my recent documents, my favorites and go to client matter) in web application follow the below.
Sample code for .Net core
- Get all JS files in netDocShare package
@{
var netDocSharePackage = System.IO.Path.Combine(Directory.GetCurrentDirectory(), “wwwroot”, “js”, “netDocShare”);
var jsFiles = Directory.EnumerateFiles(netDocSharePackage, “*.js”)
.Select(file => System.IO.Path.GetFileName(file));
} - Render netDocShare JS files
@foreach (var file in jsFiles)
{
<script src=”~/js/netDocShare/@file”></script>
} - Get the appconfig from json file
@{// Get the appconfig from JSON file
var configPath = System.IO.Path.Combine(Directory.GetCurrentDirectory(), “wwwroot”, “appConfig”, “normalView.json”);
var jsonString = await System.IO.File.ReadAllTextAsync(configPath);
var appConfig = JsonSerializer.Deserialize<Object>(jsonString)
} - Set the appconfig json to the variable
<script type=”text/javascript”>
var appConfig = @Html.Raw(appConfig);
</script> - Render the netDocShare UI based on the appConfig
<netdocshare-app-root id=”normalview”></netdocshare-app-root>
<script>
// Set appConfig attribute in netdocshare-app-root
var normalview = document.getElementById(“normalview”);
if (normalview) normalview.setAttribute(‘appconfig’, JSON.stringify(appConfig));
//Render the UI
function loadAngularBootstrap() {
try {window[“bootstrapAngular”]();
} catch (e) {
setTimeout(loadAngularBootstrap, 1000);
}
}loadAngularBootstrap();
</script>
Mapping the netDocShare content browser component to a button
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 inwindow.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>
netDocShare content browser component path
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/”;
Configuration
The config is used to setup sources, base URL, asset path, show and hide the buttons in content browser component. Users can update the config in 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’,
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,
allowMultiSelection: true,
showContent: ‘all’,
showGotoWorkspace: false,
workSpaceContentDisplay: ‘ShowSummaryOrListView’,
actionButtons: [‘search’,’filter’,’refresh’,’export’,’download’, ‘listview_summaryview’, ‘upload’]
}
config-explanation
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”.
- 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 s 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 deploy. 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 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 logout on the top right. showSearchBox hides or shows the search box.
- actionButtons are optional properties that show or hide action buttons based on configuration.
- allowMultipleSelection property is used to allow user to select multiple selection or single selection if allowMultipleSelection is true it’s allowed to multiselecting otherwise it’s single selection.
- showContent property is used to show only documents or show only folders or show both. If show content is “folders” it’s show only if showContent is “files” it will show only files if showContent is “all” it will show both files and folders.
- workspaceContentDisplay property is used to show workspace content folders and documents in separate view, this property has two options ‘ShowSummaryOrListView’ and ‘ShowAll’.
Enable summary or list view for Workspace
In workspace source users can be able to show folders and documents as 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 separate view.
- “ShowAll” option is used to show folders and documents in same view
Selected id collection
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.
