DocuVieware HTML5 Viewer and Document Management Kit Integration with Electron

Add the capabilities of DocuVieware HTML5 Viewer and Document Management Kit into your Electron-based web application in a few easy steps

1. What is Electron?
2. Prepare your environment
3. Create your Electron sample
4. Integrate DocuVieware
5. Add the switch language feature
6. Add the custom signature field feature
7. Run it!

1. What is Electron?

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Experimenting with Chromium and Node.js in its binary, Electron allows you to maintain a JavaScript codebase and build cross-platform applications that run on Windows, MacOS, and Linux - no native required.

2. Prepare your environment

In order to create an Electron Sample, you will need to have DocuVieware(opens in a new tab), Node JS(opens in a new tab), and Electron (opens in a new tab)installed on your machine. We recommend that you use the latest LTS version available.

Also, DocuViewer needs at least the .NET Framework 4.6 or .NET Core 3.0 to run properly.

3. Create your Electron sample

At the end of this tutorial, you will have an Electron app with DocuVieware embedded within. The application will let you use DocuVieware’s default features, choose the language of the viewer, and dynamically create a custom signature field and sign it.

Create a new folder, “DocuVieware-electron-sample” and within, another one called “Client.”Once the folder is created, launch the CMD at its path and run the “npm init'' command. Set the package name and the information asked by NodeJS.This command creates a package.json file for your project’s frontend. A package.json file is a file that contains information about the project’s packages and dependencies. It also contains metadata for the project, such as version number, author, and description.Once it’s done, launch “npm i --save-dev electron.” It will add the third-party package to the package's development dependencies.In the package.json, under “scripts”, add "start": "electron .", it sets node scripts to run.Change the “main” parameter to "app/server.js.”

Create an “app” folder, and add an index.html file with this HTML code to give your application a nice loading screen.

Create a server.js file within the app folder, and add this code to create the default window:

Now, in the “Client” folder, run the “npm i dotenv” command in the CMD.At this step, if you run the npm start, the app should load with the DV image.

4. Integrate DocuVieware

Create a “Server” folder beside the “Client” one, and create a Visual Studio project within.Run Visual Studio and click on “Create a new project.”

Choose the “ASP.NET Core Empty” project.

Give your project a name and choose the “Server” folder as a location, then click “next.”

Choose a target framework (4.6 or upper) and click on “create.”

Now, add the reference to GdPicture.NET.14.WEB.DocuVieware.Core.dll that is found in: [INSTALLATION FOLDER]RedistDocuVieware (.NET Core 3.0)

It is also required to add Microsoft.AspNetCore.Mvc.NewtonsoftJson with NuGet manager:

Now that the references are properly set, you need to create a Controllers folder and add a DocuVieware3Controller.cs file in your project to add some mandatory imports and handle the licensing part and the configuration part of DocuVieware™ as well.

DocuVieware3Controller.cs

In the Startup.cs file, add the following application URI and the DocuVieware basic configuration.

It is also needed to enable Cors:

Create a Models folder, then create a DocuViewareConfiguration class in it to manage the SessionId and ControlId:

Create a DocuViewareRESTOutputResponse class in the model folder, and declare the HtmlContent that will be communicated between the client and the server:

Create a new controller “DocuViewareController”:

Create a new class file called “Globals” and add these lines:

Create a .env file, and set your hostname and port:

You will also need to add this line in the first line of the server.js file:

Add this object in the BrowserWindow constructor (server.js):

Add a preload.js file and add this lines to manage the preload process of your application:

Now, create an index.js file and add this code to wait until the end of the preload script to launch the application and let Electron execute the javascript:

Note: we need the evalpagescripts method because when we add raw HTML within the DOM, Electron does not evaluate them. So we need to implement the evalpagescript to make it work.

Create an “asset” folder and copy-paste the min-js/min-css from the redist.

In the head of index.html, add:

At this point, if you run the server through Visual Studio and the client by running it through the command “npm start'' in the CMD, the DocuVieware control should be displayed in the electron’s window.

5. Add the switch language feature

Go to the DocuViewareConfiguration class in the DocuViewareConfiguration.cs file, and add this property:

In the GetDocuViewareControl method, add this line:

In the DocuViewareController.cs file, add a method that returns the supported DocuVieware language:

In order to send simple request, we will install electron-fetch tough this command : npm i --save electron-fetchIn the createwindow method in the Server.js file, add this method after the “win” affectation. It will get the available DocuVieware’s language list sent by the previous method.

Add this code in the index.js file to get the event of a language change:

To support the language management on the client-side, replace the loadControl method by this one:

Run both server and client, and a new menu should be displayed and offer to change the Docuvieware language.

6. Add the custom signature field feature

On the server-side, in the Startup.cs file, add a CustomActionHandler event to let your client communicate with a custom server method.

And then, add the method in the Global.cs file with the custom creation of a Signature field:

In order to define the area where the signature field should be placed, you will need to create a custom class:

7. Run it!

You’re done! Launch your sample by running the server through Visual Studio, and launch the “npm start” through the CMD on the Electron project.

You can find the complete sample in the installation folder of DocuVieware on your machine.

Let us know how you get on!