Configure Custom Viewers

Note: This section assumes that you are familiar with the JavaScript, AngularJS, and HTML programming languages. You must also be familiar with creating the web deployment package using Visual Studio. It is recommended to create a Web deployment package using Visual Studio, to enable smooth deployment to the Web server.

AngularJS is a JavaScript framework that is designed for creating a single page application (SPA). The Directive, a core component of AngularJs is used to integrate a custom viewer into Dashboard. A directive enables you to attach custom HTML, JavaScript in the application, and allow the AngularJS's compiler to assemble everything together.

For information about AngularJS and Web Deploy, refer to:

• https://docs.angularjs.org/guide

• https://learn.microsoft.com/en-us/iis/publish/using-web-deploy/introduction-to-web-deploy

Registering a MIME Type

Important: While configuring viewers for a file type, you must proceed in the following hierarchy:

1. The basic installation defaults, hard-coded.

2. The configuration provided in the JavaScript for each viewer plug-in, prioritizing the last installed higher than that installed earlier.

   Note: This overrides the basic installation defaults.

3. Finally, an override file, configured in XML that overrides the previous two.

The Accusoft Viewer is configured to open various file types. This configuration can be altered by modifying the AccusoftViewer.js available in the following default location: C:\inetpub\Dashboard\App\custom\Accusoft

Note: If any MIME type is added to the file for viewing the document in the Accusoft Viewer, then the same MIME type must also be added to the GlobalConfig.js file available in the following default location: C:\inetpub\Dashboard\App\global_resources\GlobalConfig.js

For any customized configurations, including that for the viewers or CSS, you must use the "custom" directory, located at the root of the AIM Dashboard website. To overwrite the AIM Dashboard configuration to use the default viewers, you can use either of the following methods:

• Registering the file mapping in JavaScript.

• Adding the file mapping into an XML file.

Using an XML File to Configure Custom Viewer

To use an XML file to configure custom viewer:

4. Create an HTML file, and then save this file to the custom folder located here:

   App\custom\myViewer

   Note: Make sure that the folder for the viewer has a unique name.

5. Create an XML file, and name it as:

   Viewer.xml

6. Save the XML file in this directory:

   App\custom

7. If you want to render multiple files through the same viewer, use ; to separate the MIME types specified.

8. Type the HTML file path in the template located here:

   \App\custom\Viewer

   For example,

   <viewers>

   <viewer>

   <mimeType>application/jpeg;text/plain</mimeType>

   <template>App/custom/Viewer/myviewer.html</template>

   </viewer>

   </viewers>

9. Reset IIS.

Using JavaScript to Configure Custom Viewer

The Register MIME Type function conveys to the application at start up, to use a particular MIME type against a viewer. A module in AngularJS is a container that enables you to organize your application into different parts.

The module "aveva.dashboard.custom" in the Dashboard application, manages customized configurations. Hence, during configuration:

10. The HTML for the directive is defined in the first line.

11. The Module is defined in the second line.

12. The configuration input "FileViewerConfigProvider" to the module is defined in the third line.

13. The following should be mapped for a particular MIME type:

    1. The function of the configuration provider, "register"

    2. The two parameters:

       • mimetype

       • directive

14. The following example shows how to register a mimetype, while mapping a PDF to the custom viewer:

    var myViewerHtml = '<div data-my-custom-viewer=\"\" data-file=\"file\"></div>';

    angular.module('aveva.dashboard.custom')

    .config([

    'FileViewerConfigProvider', function(FileViewerConfigProvider) {

    FileViewerConfigProvider.register('application/pdf', myViewerHtml);

    }

    ]);

Creating an AngularJS Directive

To create an AngularJS Directive:

15. In the custom folder, create a new folder with the name of your viewer.

    Note: For example, myviewer. All the custom viewer files should be placed in this folder.

16. Organize the custom viewer files in the folder, following this structure:

    custom\myviewer\img - images used by the viewer

    custom\myviewer\css – style sheets

    custom\myviewer\src – AngularJS directive, controllers, etc.

    custom\myviewer\js - viewer specific code

17. See the following example of a directive for a custom viewer:

    (function (angular) {

      'use strict';

      angular.module('aveva.dashboard.custom')

    .directive('myCustomViewer', function () {

      return {

      restrict: 'A',

      scope: {

      file: "=file"

      },

      replace: false,

      template: "<div id='customViewer'><div>",

      link: function (scope, element, attr) {

      var viewerElement = element.find('id')[0];

      var url = scope.file;

      viewerElement.loadCustomViewers.height = "100%";

      viewerElement.loadFile(url);

      scope.$watch('file', function (newValue, oldValue) {

      if (newValue !== oldValue) {

      // file has changed - load new file

      viewerElement.loadFile(url);

      }

      });

      }

      }

    }

    );

    }(angular));

18. As in the example above:

    3. The module name should be defined in the first line.

    4. The name of the directive "myCustomViewer" should be defined in the second line.

    The following table describes the properties of the directive:

Property	Description
Restrict	Indicates that the directive is an element.
Scope	Creates a new isolate scope object.
File	A property of the scope object that represents the InfoLocator attribute. It also contains watch function on the scope, to monitor and respond to any changes for an object. It monitors the file property, and whenever the file changes, the viewer will load the new file.
Replace	If the value is false, it indicates that the directive is appended to the current element.
Template	Inline HTML template as a string. Note: It is recommended to use a separate HTML file, unless it's quite small.
Link	A function that modifies the DOM elements and sets up data binding.

Important: The Link function must contain all the code, required to initialize the viewer. It is recommended to use a controller, while revealing an API to the other directives.

The following table describes the three arguments of the link function:

Modifying AVEVA Asset Information Management Dashboard web.config for Smooth Upgrade

Changes to how AIM 5.0.2 or later handles MIME type mappings can cause problems when upgrading the application if the implementation uses Virtual Directories or hosts ASP.NET Webforms in the AIM Dashboard.

To enable the use of a Virtual Directory that resides below the AIM Dashboard in IIS:

19. Remove the following sections from the AIM Dashboard web.config file (by default located at C:\inetpub\Dashboard):

    * <system.webserver> -> <staticContent>

    * <system.webserver> -> <handlers> -> <clear>

    * <system.webserver> -> <httpProtocol> -> <customHeaders> -> <add name="X-FRAME-OPTIONS" value="SAMEORIGIN" />

    Note: Removing this entry creates a security vulnerability. It means content from AIM can be hosted in an <iframe> HTML element on any website from any domain.

To enable the hosting of ASP.NET Webforms in the AIM Dashboard:

20. Remove the following sections from the AIM Dashboard web.config file (by default located at C:\inetpub\Dashboard):

    * <system.webserver> -> <staticContent>

    * <system.webserver> -> <handlers> -> <clear>

Refining the File Received from CMIS Based on Its Kind

A rendition from a CMIS system may be categorized by its kind. The CMIS repository assigns kinds to renditions, including custom kinds.

A single file object of in a CMIS system can be associated with multiple kinds or custom kinds, so the ObjectId remains the same but its types may be different.

If a file object has a kind associated with it in CMIS, then it can be refined in AIM based on its InfoType that is specified in the file configuration as shown in the following example:

In the above example, the custom InfoType provided is d4pdf, which is specified as a rendition of the file object 090000658002690e.

A rendition of a custom kind from a CMIS system can only be viewed in the Accusoft Viewer and the MIME Type must be registered for the Accusoft Viewer..