Quick Tip: Add a Document Title to the Brava Viewer

Photo by Will Myers on Unsplash

Brava Viewer is coming to the end of its life and is soon to be replaced with Intelligent Viewer. And with that, I wanted to have a go at fixing some of my bugbears with the viewer.

Standard Disclaimers

Changing files directly on the Content Server will not be supported by OpenText — if you choose to implement these changes you are doing so at your own risk.

So what are we changing?

So what are we changing — well there are a few things I would like to change about the viewer — but for this, we will keep it simple and just add a Document Title to the viewer.

This generally affects the Classic UI of the Content Server — however, if you are integrating into other systems (like Salesforce) you might be forced to use this.

Adding a Document Title

This is a small bugbear, but if you have many documents open in a viewer you want to be able to recognise which document you have open.

However, when a document is opened using the Brava Viewer in the Classic UI the document title is never set. Thus making it hard to distinguish between one document and another

No Document Title

I know customers that have raised this with OpenText, but with most of the development happing over with the Intelligent VIewer, this is unlikely to be fixed any time soon.

The fix

To fix this we will be updating viewer-custom-ui.js. This is located in the [OTHOME]\support\brava\HTML\viewer.

And in the file find the following line

options.clientType = options.clientType || “2D”;

Under that, we will add the following line -this will be to a new function that we will add.

dlGetDocumentTitle(options);

Now we will need to add two functions — our main function and a function to fetch data via the rest API.

function dlGetDocumentTitle(options){
  const checkDocumentTitle = document.title; 
  if (!checkDocumentTitle) { // Check if there is no Document Title 
    document.title = 'Loading....'; // Set a default value

    const ticket = options.requestHeaders.OTCSTicket; // OTDS Ticket
    let documentid;
    const baseurl = '/otcs/llisapi.dll';

    // Get Document ID from URL
    const optionsArray = decodeURI(options.signedConfigUrl).split('&');

    for (let index = 0; index < optionsArray.length; index++) {
      const element = optionsArray[index];
      if (element.includes('nodelist')) {
        let splitURL = element.split('{');
        documentid = splitURL[1].slice(0,splitURL[1].length -1 ); // Document ID set
      }
    }

    // Fetch Data from Rest API
    dlFetchData(baseurl, ticket, documentid)
      .then(function(result){
          let res = JSON.parse(result).results.data;
          document.title = res.properties.name;
       })
      .catch(function(error) {
          console.error(error);
      });
   } // End If

}

And this is the dlFetchData function

function dlFetchData(baseurl, ticket, nodeid){
    return new Promise((ok, fail) => {
        const xhr = new XMLHttpRequest();
        const url = `${baseurl}/api/v2/nodes/${nodeid}?fields=properties{name,parent_id}`;
        xhr.open('GET', url);
        xhr.setRequestHeader('OTCSTicket', ticket);
        xhr.onload = function () {
            if (xhr.status == 200) {
                ok(xhr.response);
            }
            else {
                console.error('fetchData', xhr.statusText);
                fail(xhr.statusText);
            }
        };

        xhr.onerror = function () {
            console.error('fetchData', xhr.statusText);
            fail(xhr.statusText);
        };
        xhr.send();
    });
}

Now the end result is a Brava Viewer with the document correctly set 🤟

Brava Viewer with the document title set

Connect with Driver Lane on Twitter, and LinkedIn, or directly on our website.