Vizit Client Library

The Vizit™ Client Library is a javascript API for configuring and working with Vizit Essential™ and buttons in Document Libraries in SharePoint.


6.3 Object Model:

6.2 Object Model:

6.1 Object Model:

6.0 Object Model:
5.3 Object Model:
5.2 Object Model:
5.1 Object Model:
5.0 Object Model:
4.1 Object Model:
4.0 Object Model:

In the documentation, you'll find 3 different ways to integrate with Vizit Essential™ and those buttons: Vizit.Write, VIZIT_SETTINGS, and the Vizit namespace. The examples below highlight various aspects of the API available in the latest release of Vizit.

Vizit.Write and Vizit.WriteImage

Vizit.Write is replacing link decoration in version 4.1 of Vizit™. To provide better performance, Vizit™ no longer crawls the page to find links where Vizit™ should be applied. Instead, Vizit.Write can be called to place buttons, instant previews, and links to documents that open in Vizit Essential™ on the page as it is rendered. Vizit.Write is the simplest way to open documents in Vizit Essential™. Here are two example links that use this functionality:

// This example will write the configured buttons to the page for the document URL provided.

// This example will write a link to the page. Clicking the link will open the document in Vizit Essential™.
// Any configured buttons will be displayed next to the link as well.
Vizit.Write("http://path/to/file.ext", "Click Here");

// If no buttons were configured for the page, the globally defined defaults will be used.

// This example will write an instant preview to the page regardless of the 
// globally configured or globally defined VIZIT_SETTINGS.
Vizit.Write("http://path/to/file.ext", { buttons: [ "InstantPreview" ] }); 

In 5.0, Vizit.WriteImage was added to offer a way to render frames of documents without the surrounding button-HTML provided by Vizit.Write. Here's an example of Vizit.WriteImage:

// This example will write an img tag that renders the first frame 
// of the supplied document with a maximum width and height of 300 pixels.
// These are the only required parameters.
Vizit.WriteImage("http://path/to/file.ext", 300);

// This example will write an img tag that renders the second frame
// (0-based indexing -- frame at index 1). The image's aspect ratio
// will be maintained, but it will be fit into a 300 x 400 rectangle.
// The last parameter is a hashtable of key-value attribute pairs.
// In this example, the img tag will have a CSS class of 'cssClassName'
// and the style will include padding information.
Vizit.WriteImage("http://path/to/file.ext", 300, 400, 1, {
class: 'cssClassName', style: 'padding: 5px;'

// Just like Vizit.Write, Vizit.WriteImage's first parameter can be
// a docRef as well as a fully qualified URL to the document. This
// can be useful if information such as the list Guid and item ID
// are available, but the URL is not.
"list": "D67DDE0E-73B3-4968-B657-A2BF44D3C052", "item": 5
}, 300);

The VIZIT_SETTINGS Configuration Object

By placing a VIZIT_SETTINGS JavaScript object on the page, you can configure the size and position of the Vizit Essential™ window, what actions are available in the toolbar, any keyboard actions, as well as many other options. You can also configure which buttons appear next to document links in document libraries and whether or not Instant Previews are shown on a given page. VIZIT_SETTINGS provides much of the power found in the full Vizit™ JavaScript namespace in a simple package.

Here's an example of how to use VIZIT_SETTINGS to specify the buttons that should appear next to document links on the SharePoint page, the width and height of Vizit Essential™, as well as a specific set of actions that should appear in the toolbar. Any configuration options that are not specified have a default that can be found in the documentation. Because of this, all the default keyboard actions will continue to work as expected.

apiVersion: 2,
buttons: [ 'OpenInEssential' ],
width: 400,
height: 300,
mainbarActions: [

VIZIT_SETTINGS is effectively a combination of configuration parameters from Vizit.Essential.Controller and buttons: 'OpenInEssential', 'OpenInPro', and 'InstantPreview'.

More Reading

Using the VIZIT_SETTINGS Configuration Object
Deploying the VIZIT_SETTINGS Object 

Links with #vizit

Links that open a document in Vizit can be created by adding #vizit to the end of the URL. For example: 

<a href="http://path/to/file.ext#vizit">Click Here</a>

Please note that the "Open Documents in Vizit Essential" checkbox must be checked in Vizit's "Configure Settings" section in Central Administration for #vizit to work properly.

The Vizit Namespace

The Vizit JavaScript Namespace provides full access to Vizit Essential™ and the buttons including a full eventing model and other utilities. One way this could be used would be to programmatically control Vizit Essential™'s behavior from outside of the main Vizit Essential™ window and toolbar.

<div id="viewer" style="width:500px; height:400px;"></div>
<img src="path/to/icon.png" onclick="MyNamespace.Viewer.PreviousPage();" />
<img src="path/to/icon2.png" onclick="MyNamespace.Viewer.NextPage();" />

<script type="text/javascript">
var MyNamespace = {};

Vizit.OnReady(function() {
var controller = new Vizit.Essential.Controller({
renderTo: 'viewer'

MyNamespace.Viewer = controller.GetDocumentPanel();

Any delegates passed to Vizit.OnReady will be called as soon as the Vizit Client Library is fully loaded on the page and any required resources are available. If Vizit™ is ready when the delegate is passed to Vizit.OnReady, the delegate will be called immediately. It is because of this, that we recommend you wrap any initialization code inside a Vizit.OnReady delegate to ensure that Vizit™ is available when calls to the client library are made.

More Reading

Using the Vizit JavaScript Namespace


Vizit External is a dedicated page that contains Vizit Essential. By passing the appropriate query string parameters, you can configure Vizit to open a specific document as well as have a desired set of functionality. This URL can also be used in an iFrame to embed Vizit on a page. This is a different approach to embedding Vizit on the page (like by using Vizit.Essential.Controller object or VIZIT_SETTINGS), but the effect is similar. 

To create a URL to open the Vizit External page, use the following URL syntax:


In the above example, the docRef provided is a URL-based docRef. Please see the documentation for Vizit.Essential.Controller.Open for more information about docRefs.

In addition to opening Vizit External to a specific document, you can also provide configuration parameters to adjust the available actions:


The cfg parameter is a Vizit.Essential.Controller configuration object. It is limited in that it cannot contain JavaScript delegates. This means that more advanced options, such as event listeners, cannot be used. To attach to event listeners, it is recommended that an embedded window or an external Vizit window is created via Vizit.Essential.Manager.Create using the renderTo configuration parameter and the external method parameter, respectively.

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk