Using the VIZIT_SETTINGS Configuration Object

Steps to Customize VIZIT_SETTINGS

Quick note: These steps describe how to apply VIZIT_SETTINGS to a single page only. Instructions for how to apply it globally can be found here: http://support.vizit.com/entries/22344378-Apply-VIZIT-SETTINGS-Globally The VIZIT_SETTINGS code will be essentially the same for both procedures though so we advise you test it on an individual page before deploying globally.

  1. Open the page for editing: Under Site Actions, click "Edit Page." This requires the user to have edit permissions for the page.
  2. Add Vizit Web Part:  If the Vizit Web Part isn't already on the page, click the "Add a Web Part" box on the page.  In the Vizit group, select the "Vizit" Web Part, then click "Add". 
  3. Edit the Vizit Web Part: On the Vizit Web Part, click the drop-down triangle, then "Edit Web Part."  Check the "Advanced" box, then select Customize. 
  4. Edit VIZIT_SETTINGS:  In this box, create a variable called VIZIT_SETTINGS, and customize it with the settings you want.  See below for more information on syntax, as well as examples.
  5. Close and save: In the current box, click "OK", then "Apply" to the right.  Select the "Page" tab at the top of the screen, then "Stop Editing".  When the page reloads, Vizit should behave with the new settings.  If the settings appear unchanged, or if they revert to default, there may be a mistake in your VIZIT_SETTINGS.

All VIZIT_SETTINGS objects require the following format:

var VIZIT_SETTINGS = {
apiVersion: 2
//add properties here
//when adding properties, make sure to follow proper JSON syntax--add a comma after the "2" above!
};

For more information about VIZIT_SETTINGS, see the KB here: http://support.vizit.com/entries/20403587-vizit-client-library

Configuration Options

There are a number of options available for configuration via VIZIT_SETTINGS, categorized here depending on which aspects of Vizit they affect:

NOTE: All of the examples shown in the options below are the default values for VIZIT_SETTINGS. When creating your configuration profile for VIZIT_SETTINGS, any options you do not explicitly include will default to these values.

Settings which affect the overall appearance of the Vizit Essential Viewer

 External controls whether the Vizit Essential Viewer is embedded in the SharePoint library view or opens in a separate window. Here is an example:

external:false

width and height define the size of the viewer. Here is an example:

    width:475,
    height:400

maximized toggles whether the viewer will open in a fullscreen embedded mode, or at the size defined by width and height. If "external" is true, "maximized" will not affect the size of the view. "Maximized" also ignores autoShow. Here is an example:

    maximized:false,

fullScreenHUDMessage controls the message that appears when the user toggles the fullscreen mode of the viewer. Change the string to change the message that is displayed. Here is an example:

fullScreenHUDMessage:'Press ESC to exit full screen mode.',

id controls the unique string that refers to the Vizit Essential Controller window that is created by VIZIT_SETTINGS. Here is an example:

   id:"default",

autoShow controls whether to show the floating document panel when it is rendered. Here is an example:

   autoShow:false,

takeOverLinks controls whether or not clicking links to documents should open those documents in Vizit Essential or perform the default action (generally, downloading the file). Here is an example:

   takeOverLinks:true,

initAtPage controls which page to open the provided document to. It is zero based (ie: The first page is 0). The default is 0. Here is an example:

   initAtPage:0,

defaultZoomWidth controls the zoom level that documents have when they open in Vizit Essential. For this to work, the display mode must be set to manual.

   defaultZoomWidth: 800,
displayMode: 'manual',

Settings which affect the appearance of the toolbars of the Vizit Essential Viewer

 

In all of these toolbar options, the examples include all the possible options that can be displayed in them. To remove a button from a toolbar, simply edit the list to contain only the buttons that you want to show. This will tell Vizit Essential to only load those buttons. Please see the bottom of this article for a visual reference of toolbar location.

 

mainbarActions controls the options that appear in the menu bar at the top of the viewer. Here are the possible buttons:

mainbarActions:[
'ZoomOut',
'ThumbView',
'ZoomIn'
]

 bottomBar controls the options that appear on the left and right sides of the bottom toolbar. Here are the possible buttons:

bottomBar: {
        leftActions:[
'CreateFootnote',
'PageNumber'
],
        rightActions:[
'Print',
'Download',
'FullScreen'
]
    }

 sidebarActions controls the options that appear on the sidebar on the left of the viewer. Here are the possible buttons:

    sidebarActions:[
'ToggleSocial',
'ToggleProperties',
    'ToggleSearchTerm'
]

socialActions controls which options are available for Vizit Social to use. Here are the possible buttons:

socialActions:[
'DrawRectangle',
'DrawEllipse',
'FILL',
    'ToggleMarks'
]

socialIsEnabled controls whether the social features of Vizit are enabled. Here is an example:

socialIsEnabled:true,  

Settings which affect how Vizit display thumbnails, previews, hover previews, etc.

buttons controls the instant previews (also known as thumbnails) that appear to the left of list items in the SharePoint library, and the Open in Essential and Open in Pro buttons that appear to the left of list items. Here are the possible options:

    buttons: [
'InstantPreview',
'OpenInEssential',
'OpenInPro'
]

instantPreviewSize controls the size of the instant preview thumbnails. Here is an example:

    instantPreviewSize:80

previewHoverSize controls the size of the thumbnails that appear when you hover over the instant preview, Open in Pro, Open in Essential, or file type icon in the SharePoint library. Here is an example:

    previewHoverSize:300

 previewOnEssentialHover, previewOnProHover, and previewOnInstantPreviewHover control whether hovering over each of these items in the SharePoint library will cause a hover preview to appear. One or two may be present without requiring all three to be defined--if one option is not explicitly defined, it will default to the value shown in the example. Here is an example:

    previewOnEssentialHover:false,
    previewOnInstantPreviewHover:true,
    previewOnProHover:false

 Writing custom keyboard actions for controlling Vizit

keyBoardActions can define a number of keyboard shortcuts for the Vizit Essential Viewer. The following is the default list of actions that Vizit Essential uses, which can be edited by redefining them in VIZIT_SETTINGS or added to using similar syntax:

keyboardActions:[{
action:'PageNumber',
        key:['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight',
                'nine', 'zero', 'num_one', 'num_two', 'num_three',
                'num_four', 'num_five', 'num_six', 'num_seven',
                'num_eight', 'num_nine', 'num_zero']
    },{
action:'FullScreen',
        key:'esc',
        handler:function() {
            if(!this.IsMaximized()) {
                this.Hide();
                return false;
            }
         }
},{
action:'FullScreen',
        key:'f',
        ctrl:true,
        shift:true,
        stopEvent:true,
        handler:function() {
            if (this.IsMaximized()) return false;
        }
    },{
action:'NextPage',
        key:['down', 'right']
    },{
action:'PrevPage',
        key:['up', 'left']
    },{
action:'ZoomIn',
        key:'num_plus',
        ctrl:true,
        stopEvent:true
    },{
action:'ZoomOut',
        key:'num_minus',
        ctrl:true,
        stopEvent:true
    }]

Examples

Default Settings: shows the complete default VIZIT_SETTINGS.  These do not need to be added in; however, any setting you define will be overwritten.  For example, if you define your own keyboardActions, the default keyboardActions will no longer function. 

Example 1: changes the toolbar buttons in Vizit.  To know which toolbar is which, see the Toolbar Locations figure at the end of this article. A list of actions in 5.0 can be found here: http://files.vizit.com/public/docs/5.0/symbols/Vizit.Essential.Actions.html  A list of actions in 4.0 can be found here:   http://files.vizit.com/public/docs/4.0/symbols/Vizit.Essential.Actions.html

Example 2: moves and resizes the window, so Vizit always opens on the right-hand side of the page, as well as making the preview images smaller.

Example 3: adds new keyboard actions.

Example 4: combines all the previous examples. 

Note: The order of the properties does not matter. 

Default Settings

var VIZIT_SETTINGS = {
    apiVersion: 2,
    external:false,
    id:"default",
    instantPreviewSize:80,
    previewHoverSize:300,
    previewOnEssentialHover:false,
    previewOnInstantPreviewHover:true,
    previewOnProHover:false,
    takeOverLinks:true,
    
    mainbarActions:[
'ZoomOut',
'ThumbView',
'ZoomIn'
],
    bottomBar: {
        leftActions:[
'CreateFootnote',
'PageNumber'
],
        rightActions:[
'Print',
'Download',
'FullScreen'
]
    },
    sidebarActions:[
'ToggleSocial',
'ToggleProperties',
    'ToggleSearchTerm'
],
    socialActions:[
'DrawRectangle',
'DrawEllipse',
'FILL',
    'ToggleMarks'
],

buttons: [
'InstantPreview',
'OpenInEssential',
'OpenInPro'
],

    initAtPage:0,
    width:475,
    height:400,
    maximized:false,
    autoShow:false,
    fullScreenHUDMessage:'Press ESC to exit full screen mode.',
    socialIsEnabled:true,
    
    keyboardActions:[{
action:'PageNumber',
        key:['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight',
                'nine', 'zero', 'num_one', 'num_two', 'num_three',
                'num_four', 'num_five', 'num_six', 'num_seven',
                'num_eight', 'num_nine', 'num_zero']
    },{
action:'FullScreen',
        key:'esc',
        handler:function() {
            if(!this.IsMaximized()) {
                this.Hide();
                return false;
            }
         }
},{
action:'FullScreen',
        key:'f',
        ctrl:true,
        shift:true,
        stopEvent:true,
        handler:function() {
            if (this.IsMaximized()) return false;
        }
    },{
action:'NextPage',
        key:['down', 'right']
    },{
action:'PrevPage',
        key:['up', 'left']
    },{
action:'ZoomIn',
        key:'num_plus',
        ctrl:true,
        stopEvent:true
    },{
action:'ZoomOut',
        key:'num_minus',
        ctrl:true,
        stopEvent:true
    }]
};

Example 1

 var VIZIT_SETTINGS = {
    apiVersion: 2,
    id:"VizitExample1",
    mainbarActions:['CreateFootnote', 'ThumbView', 'DrawRectangle'],
    bottomBar: {
        leftActions:['PageNumber'],
        rightActions:['ZoomIn', 'SPACER', 'ZoomOut']
    },
    sidebarActions:['FullScreen', 'ToggleSocial', 'ToggleProperties',
    'ToggleSearchTerm'],
    socialActions:['FirstPage', 'PrevPage', 'SEPARATOR',
'NextPage', 'LastPage','FILL', 'ToggleMarks']
};

Example 2

 var VIZIT_SETTINGS = {
    apiVersion: 2,
    id:"VizitExample2",
    instantPreviewSize:50,
    previewHoverSize:150,
    width:450,
    height:740,
    initAtPoint: {
        X:1000,
        Y:100
    }
};

Example 3

 var VIZIT_SETTINGS = {
    apiVersion: 2,
    id:"Example3",

    keyboardActions:[
        {action:'FullScreen',
         key:'f'
        },
        {action:'FirstPage',
         key:'esc',
         stopEvent:true
        },
        {action:'Print',
         key:'p',
         ctrl:true,
         stopEvent:true
        },
        {action:'LastPage',
         key:'l',
         shift:true,
         handler:function() {
             if (this.IsMaximized()) return false;
         }
        }
    ]
};

Example 4

 var VIZIT_SETTINGS = {
    apiVersion: 2,
    id:"Example4",
    instantPreviewSize:50,
    previewHoverSize:150,
    width:450,
    height:740,
    initAtPoint: {
        X:1000,
        Y:100
    },

    mainbarActions:['CreateFootnote', 'ThumbView', 'DrawRectangle'],
    bottomBar: {
        leftActions:['PageNumber'],
        rightActions:['ZoomIn', 'SPACER', 'ZoomOut']
    },
    sidebarActions:['FullScreen', 'ToggleSocial', 'ToggleProperties',
    'ToggleSearchTerm'],
    socialActions:['FirstPage', 'PrevPage', 'SEPARATOR',
'NextPage', 'LastPage','FILL', 'ToggleMarks'],

    keyboardActions:[
        {action:'FullScreen',
         key:'f'
        },
        {action:'FirstPage',
         key:'esc',
         stopEvent:true
        },
        {action:'Print',
         key:'p',
         ctrl:true,
         stopEvent:true
        },
        {action:'LastPage',
         key:'l',
         shift:true,
         handler:function() {
             if (this.IsMaximized()) return false;
         }
        }
    ]
};

 Toolbar Locations

EssentialWithSocial_annotated.png

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk