Edit Documents in Collaboration Mode in PDF Viewer

January 19 2021

As telecommuting's cultural shift continues, it is increasingly important for technology to grow, allowing collaboration in online/real-time environments. Over the past few decades, the number of people choosing to telecommute has grown substantially. According to the American Psychological Association, telecommuting has increased by 115% between 2005 and 2015 and now includes 26 million employees in the US alone.

As workers become independent, and the culture of remote working rises, the need for collaboration tools grows. We will touch on these and other issues related to telecommuting and collaboration in this article.

With the new and updated GrapeCity Documents v4 release, GcPdfViewer, a fast JavaScript-based client-side PDF viewer, adds a collaboration feature, so editing PDF documents in real-time while collaborating with others is easy and seamless, thus reducing time and errors in data collection and processing.

Introduction to Collaboration Mode using GcPdfViewer

As more teams become geographically disbursed, in-person interaction is on the decline. However, the sharing of information can’t always wait. Online collaboration is the key, as it increases productivity, improves problem-solving, and helps with cost reduction.

With the new collaboration feature, GcPdfViewer allows a document author or editor to control access to a document at a granular level. From view-only to full editing and authoring capabilities, the document author/administrator grants rights to various collaborators simultaneously and in real-time.

Through this feature GcPdfViewer delivers instant engagement within the viewer, enabling an in-person work session. This is done by implementing new options in GcPdfViewer API.

Collaboration Features in GcPdfViewer

To help facilitate the easy implementation of the GcPdfViewer and its associated tools aiding collaboration, several samples below explain the API and the workings of the UX and how the API works behind the scenes.

To deliver real-time co-authoring, GcPdfViewer adds a new sharing option to the toolbar.

Sharing a Document

A new 'Share document' button is added to the toolbar for Annotation and Form editors. Clicking this button will display the ‘Share Document’ dialog box.

To add the ‘Share document’ button to the GcPdfViewer toolbar, use the following code:

viewer.toolbarLayout.viewer.default = ["open", "save", "share"];
viewer.applyToolbarLayout();

Once the ‘Share document’ button is clicked, the ‘Share dialog box’ will appear. The ‘Show dialog' box shows a list of the people the document is being shared.

Editing Permissions or Stop Sharing

After document-sharing is enabled on the back end and the "Share Document" button is clicked, a "Manage Access" dialog box is displayed, allowing permission levels of associated users to be set or edited by the administrator of the document.

To define/edit the permissions, select a user and set their permissions to any of the following options:

1) Select View and change if you want the user to view and edit the file

2) Select View only if you only want the user to only be able to view the file and not be able to make any changes

3) Select Stop sharing to remove access to a document for a specific user

Important Note: Only the document owner/editor can add, change, or revoke permissions for other users.

Download Now!

GcPdfViewer Manage access example screenshot by GrapeCity

Shared Documents List Panel

A new ‘Shared documents’ panel has been added to the sidebar panel. This new panel lists all documents the current user has shared and has access to, with information about the access mode.

New Shared Documents panel in GcPdfViewer by GrapeCity

Add the ‘Shared document’ panel to the side panel using the addSharedDocumentsPanel method:

var viewer = new GcPdfViewer("#root", { supportApi: 'api/pdf-viewer'} );
viewer.addSharedDocumentsPanel();

Real-time Co-authoring

To collaborate in real-time, open a shared document using the ‘Shared documents’ list panel, or share the current document using the ‘Share document’ button. Once the document is opened in shared mode, the 'shared mode' label appears in the viewer's upper right corner.

Shared mode indicator example using GcPdfViewer and collaboration mode by GrapeCity

The shared mode label indicates that the document being edited has collaborators who have access to this document. Therefore, any time any collaborators make a change in the document in this mode, you will see their presence and the changes they have made.

Collaboration mode example showing multiple users and multiple states using GcPdfViewers collaboration mode by GrapeCity

Steps to Configure GcPdfViewer for Real-time Collaboration

Configuring GcPdfViewer for real-time Collaboration involves two broad steps:

Server-Side Configuration
GcPdfViewer Configuration

1. Server-Side Configuration

The steps below describe how to configure a server-side service to handle collaboration and editing of multiple users:

A. Setup the Project

Setup the project for editing PDF documents using the steps mentioned at /documents-api-pdf/docs/online/edit-pdf.html

SupportApi projects include new Nuget package dependencies: Microsoft.AspNetCore.SignalR for ASP.NET Core version and Microsoft.AspNet.SignalR.Core for ASP.NET/OWIN self-host version. These dependencies are already included in the project.
Using SupportApi in ASP.NET Core projects requires ASP.NET Core 3.0 or later.

B. Collaboration Mode Setup

The collaboration mode in GcPdfViewer is designed to work only with persistent client connections. So, use the SignalR package to establish persistent connections between viewer clients and SupportApi. For example, when any collaborator modifies a shared document, the server-side SupportApi code instantly pushes the changes to connected clients as soon as they become available for the SupportApi.

To support persistent client connections for collaboration mode, the web application must be additionally configured as follows:

For the ASP.NET Core version, edit Startup.cs class:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)  
{  
           app.UseEndpoints(endpoints =>  
           {  
                  endpoints.MapRazorPages();  
                  // Map SignalR hub:  
                  endpoints.MapHub<SupportApi.Connection.GcPdfViewerHub>("/signalr");  
           });  
}

public void ConfigureServices(IServiceCollection services)  
{  
           services.AddRazorPages();  
           // Enable routing:  
           services.AddMvc((opts) => { opts.EnableEndpointRouting = false; });  
           services.AddRouting();  
           // Add SignalR service to the services collection:  
           SupportApi.Connection.GcPdfViewerHub.ConfigureServices(services);  
}

For ASP.NET/WebForms version, add Startup.cs to the project root if you haven't already:

[assembly: OwinStartup(typeof(SupportApiDemo_WebForms.Startup))]  
namespace SupportApiDemo_WebForms { 

 public class Startup {

    public void Configuration(IAppBuilder app) {  
      // ... the rest of the code goes here  
      SupportApi.Connection.GcPdfViewerHub.Configure(app);             
    }  
  }  
}

C. Collaboration Storage

By default, the documents shared across the users will be stored in the server's memory. So, when the server is restarted, the documents disappear.

Also, by default, the documents are cleared in memory after 8 hours. However, GcPdfViewer allows changing the lifetime for the shared documents.

To change the lifetime for shared documents to 24 hours, use the following code snippet in the Configure method of Startup.cs file:

GcPdfViewerController.Settings.Collaboration.Storage.UseMemory(24);

By using GcPdfViewer, it is possible to define the storage location for the shared documents like a local folder, cloud, etc. This can be done by configuring GcPdfViewerController.Settings.Collaboration.Storage property.

For example, using the below code in the Configure method of Startup.cs file will use the file system to store shared documents and define the lifetime for shared documents to 8 hours:

GcPdfViewerController.Settings.Collaboration.Storage  
    .UseFileSystem(Path.Combine(env.ContentRootPath, "LocalStorage"), 8);

2. GcPdfViever Configuration

To perform a client-side configuration, follow the below steps:

A) Copy JS files from "GcPdf-{$version}\GcPdfViewer\build" to "wwwroot\lib\gcpdfviewer"

B) Add a reference to required JS scripts at the top of the Index.cshtml page

<script src="[https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.0/signalr.min.js](https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.0/signalr.min.js)" integrity="sha512-ktPnERrVwYTf4LgWInsccl9OsKyZsUEv4y4GkWAkXUqlpCQlP2W/f2A+4ix03il0M5OMwT3SstzAILmeLHT0wg==" crossorigin="anonymous">  
</script>  
<script src="~/lib/gcpdfviewer/gcpdfviewer.js" asp-append-version="true"></script>

C) Use the "sharing" option to configure sharing options for the viewer. The "sharing" option is used only when the document is open in collaboration mode using the Share dialog box or from the Shared documents panel and use the following code in Views\Home\Index.cshtml file for GcPdfViewer control:

<style>  
    #viewer {  
        height:600px;  
    }  
</style>  
<div id="viewer"></div>  
<script>  
    var viewer = new GcPdfViewer("#viewer", {  
        supportApi: {  
            apiUrl: 'SupportApi/GcPdfViewer',  
            token: 'support-api-demo-net-core-token-2020',  
            reconnectInterval: 1000  
        },  
        sharing: {  
            //set knownUsers to show in list  
            knownUserNames: ["Jaime Smith", "Jane Smith","Anonymous"],  
            disallowUnknownUsers: true,  
        },  
        userName: 'Anonymous'  
    });  
    viewer.addDefaultPanels();  

    // add panel for Share and collaboration  
    viewer.addSharedDocumentsPanel();  

    // customize the Toolbar  
    viewer.toolbarLayout.viewer.default = ["open","save","share"];  
    viewer.applyToolbarLayout();  
    viewer.open("./Pdfs/Test.pdf?ts="+new Date().getTime());  
</script>

Once the above steps are implemented, running the project GcPdfViewer should appear in a web browser and should show the sharing feature allowing users to collaborate in real-time.

Example of real time collaboration tool in action using GcPdfViewer by GrapeCity