OCE DocViewer CCA for VBCS

This blog will demonstrate how the component facilitates the integration of "UI API V2 for Oracle Content Management" with VBCS, enabling users to select and download files from OCE, along with executing other file-related tasks as needed for business operations.

Features

Using this component users can view files from OCE and perform different operations provided by OCE.

Pre-requisites

There are a couple of pre-requisites to be done before you can use the component:

• We need to enable embedded content in the Oracle Content Management administration interface (on the Security tab in the System area).

• The JS Lib to be added to the VBCS index.html file. Use Embed UI API V2 for Oracle Content Management documentation for more details.
• In VBCS, define OCE Backend and Service connection to fetch applinks of a fileid.

  

Technical Details

Input Parameters

Creating the Component

You can create the oce-docviewer component directly in Visual Builder under the resources->component of your application click to create a new component.

To learn more about the role of each one of the files check out this blog.

Here is the content of the files for the component:

oce-docviewer-view.html

<div class="oj-flex oj-sm-flex-direction-column">
 <div id="ocm-doc-container"></div>
</div>

oce-docviewer-viewModel.js

define([
  'knockout',
  'ojs/ojcontext',
  "vb/helpers/rest"
], (
  ko,
  ojContext,
  Rest
) => {
  'use strict';

  class OceDocviewerComponentModel {
    constructor(context) {
      let self = this;
      var busyContext = ojContext.getContext(context.element).getBusyContext();
      var options = { 'description': 'Component Startup - Waiting for data' };
      this.busyResolve = busyContext.addBusyState(options);
      this.composite = context.element;
      this.properties = context.properties;
      self.ocmBaseUrl = "";
      
      this.messageText = ko.observable('Hello from Example Component');
      self.setUcmBaseUrl = function () {
        let rest = Rest.get("ocmRestApi/postApplinksFileId");
        rest.toUrl().then(function (result) {
          self.ocmBaseUrl = "https://" + result.split("/")[2];
        });
      };
      self.setUcmBaseUrl();

      ko.computed(function () {
        if (self.properties.fileId) {
          self.embedOcmFile(self.properties.fileId);
        }
      });
      self.getAppLinkFromOcm = function (docId) {
        let body = {
          "assignedUser": this.properties.assignedUser,
          "role": this.properties.role //values can be used are [“default”, “viewer”, “downloader”,“contributor”]
        };

        let params = {
          "fileId": this.properties.fileId
        };

        try {
          let rest = Rest.get("ocmRestApi/postApplinksFileId").body(body).parameters(params).initConfiguration({});
          return rest.fetch();
        } catch (e) {
          return null;
        }
      };

      self.embedOcmFile = function (ocmDocId) {
        let promise = self.getAppLinkFromOcm(ocmDocId);
        promise?.then(function (result) {
          var appLinkInfo = result.body;

          OracleCEUI.oceUrl = self.ocmBaseUrl;
          var frameElement = OracleCEUI.documentViewer.createFrame(self.getOcmDocViewerOptions(ocmDocId, appLinkInfo));
          frameElement.width = "100%";
          frameElement.height = "666px";
          frameElement.style = "border:none";

          let myNode = document.getElementById("ocm-doc-container");
          while (myNode.firstChild) {
            myNode.removeChild(myNode.lastChild);
          }
          myNode.appendChild(frameElement);
        });
      };

      self.getOcmDocViewerOptions = function (docId, appLinkInfo) {
        return {
          documentViewer: {
            id: docId,
            appLink: appLinkInfo,
            header: {
              hide: false,
              annotate: true,
              fullScreen: true,
              close: true
            },
            breadcrumb: {
              hide: false,
              back: true,
              nextprev: true
            },
            actions: {
              view: {
                o365: true
              },
              edit: {
                web: true,
                o365: true
              },
              download: true,
              uploadNewVersion: true,
              favorite: true,
              shareLink: true,
              rename: true,
              reserve: false,
              versionHistory: true,
              properties: false
            },
            controls: {
              fit: "default",
              zoom: true,
              fitOriginal: true,
              fitPage: true,
              fitWidth: true
            },
            thumbnails: {
              hide: false,
              expand: true
            },
            sidebar: {
              expand: false,
              active: undefined,
              conversation: true,
              customProperties: true
            },
            videoControls: {
              hide: false,
              autoplay: false,
              loop: true,
              mute: true
            }
          }
        };
      };

      // Once all startup and async activities have finished, relocate if there are any async activities.
      this.busyResolve();
    }
  }
  return OceDocviewerComponentModel;
});

oce-docviewer-styles.css

oce-docviewer:not(.oj-complete) {
  visibility: hidden;
}

oce-docviewer {
  min-height: 50px;
  width: 50px;
}

loader.js

define([
    './oce-docviewer-viewModel',
    'ojs/ojcomposite',
    'text!./oce-docviewer-view.html',
    'text!./component.json',
    'css!./oce-docviewer-styles'
], (
    viewModel,
    Composite,
    view,
    metadata) => {
        'use strict';

        Composite.register('oce-docviewer', {
            view: view,
            viewModel: viewModel,
            metadata: JSON.parse(metadata)
        });
    }
);

component.json

{
  "name": "oce-docviewer",
  "displayName": "oce-docviewer",
  "description": "A description of oce-docviewer.",
  "version": "1.0.0",
  "jetVersion": ">= 9.0.0",
  "properties": {
    "assignedUser" : {
      "type" : "string"
    },
    "role" : {
      "type" : "string"
    },
    "fileId" : {
      "type" : "string",
      "writeback" : true
    }
  },
  "methods": {},
  "events": {},
  "slots": {}
}

Once defined the component would be available in the component palette and you can add it to your page and set its properties.

UI Results

LOV dropdown which shows all the files from a OCE Folder. This LOV is being populated from OCE Rest API

<<OCE Base URL>>/documents/api/1.2/folders/{folderId}/items.

On selection of a file the component will render the file in OCE Viewer.