Getting Started with IT Hit AJAX File Browser

In this article

Getting Started with IT Hit AJAX File Browser

Download the tar.gz archive here and unpack it. The AJAX Browser is fully functional and does not have any limitations. However, the trial period is limited to 1 month. After the trial period expires the AJAX Browser will stop working. The license file is NOT required to activate the product (neither trial nor paid version).

Adding AJAX File Browser on a Web Page

The steps below are valid for Ajax Browser v2.1 and later. For earlier versions please refer to this page. Please also see this step-by-step guide about how to upgrade your initialization code from previous versions.

To add IT Hit AJAX Browser on a web page follow this steps:

  1. Add <script> tag referencing ITHitAJAXFileBrowserLoader.js on your web page:  
    <script src="/ITHitAJAXFileBrowserLoader.js" type="text/javascript"></script>
  2. Add HTML tag with the ID that will contain AJAX Browser and apply ih_style CSS class to this tag. Note that all themes provided with Ajax Browser are using the same CSS class -ih_style:  
    <div id="AjaxFileBrowserContainer" class="ih_style" style="width: 100%; height: 100%"></div>
  3. Create the AJAX BrowserSettings object:  
    var settings = {    

    // (required) path to ajax browser files (this folder contains ITHitAJAXFileBrowserLoader.js)
    BasePath: '/',

    // (required) ID of the HTML control in which Ajax Browser will be created
    Id: 'AjaxFileBrowserContainer',
    
    // (required) the root folder to be displayed in Ajax Browser
    Url: 'http://webdavserver.com/dav/',
    
    // (required) always provide size of the control
    Style: 'height: 500px; width: 700px',
    
    // folder to be selected, same as SetSelectedFolderAsync call
    SelectedFolder: 'http://webdavserver.com/dav/Sales/',
    
    // path to MS Office templates, always specify full path
    MsOfficeTemplatesPath: 'http://webdavserver.com/dav/templates/',
    
    // theme name (folder name under /themes/ folder, for examle 'clean', 'golden', 'lumina', etc)
    ThemeName: 'windows_8',
    
    // icon size in desktop mode (available options are: 16, 24, 32, 48, 64, 72)
    IconsSize: 16,
    
    // display UI optimized for desktop or for touch screens ('desktop', 'mobile', 'auto')
    Platform: 'auto'
};
    Using Settings object you can customize the AJAX Browser appearance. The full description of this object could be found here. At a minimum in this object, you must specify the path to the folder where Ajax Browser files are located, the parent object ID, WebDAV server URL and the size of the control. Usually, you will also specify selected folder, path to Microsoft Office templates, theme and toolbar icons size. Here are descriptions of each property: 

    • BasePath - Path to the folder where AJAX Browser files are located.

      Important! In case your Ajax Browser files are located on the server that is different from the one on which the page with Ajax Browser is located your server must enable CORS requests. Alternatively you can include .js and .css files directly on a web page as described here.

    • Id - HTML object or tag ID in which AJAX Browser will be created.

    • Url - WebDAV server URL. It will be displayed as a root node in AJAX Browser. 

      Important! If your WebDAV server is located on a different domain or on a different port the server must enable CORS requests. Find more details here.

    • Style - HTML style. At a minimum, you must provide the size of the control here. 

      Important! If your page runs in XHTML mode and you set height of the control to 100% all parent controls including HTML and BODY tags must be set to 100%:
      <style type="text/css"> html, body { height: 100%;} </style>

    • SelectedFolder - specifies node to be selected in a tree. If this property is specified, the AJAX Browser will load files and folders list in Files Panel and will automatically expand necessary tree nodes if required.

    • MsOfficeTemplatesPath - path to the folder where Microsoft Office templates are located. You must always specify full URL with the domain. To verify that your server meets all Microsoft Office requirements read the this article. This property is required only if you run AJAX Browser in IE and want to create Microsoft Office Word, Excel and PowerPoint documents.

    • ThemeName - theme name. This is must be the name of the folder under /themes/.

    • IconsSize - toolbar icons size in desktop mode.

    • Platform - forces Ajax Browser to display UI optimized for desktop or for touch screens.

     

  4. Create the control loader, passing Settings object as a parameter and start loading Ajax Browser files:  
    var ajaxFileBrowserLoader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
ajaxFileBrowserLoader.oninit = function(ajaxFileBrowser) {
    // This event is fired when control is loaded and created.
    // Your code here... 
};
ajaxFileBrowserLoader.LoadAsync();  // starts loading Ajax Browser files asynchronously 
  5. Add a viewport meta tag on a web page, this will provide the best visual representation in mobile web browsers. You may also wish to force IE to run in latest rendering mode:  
    <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

  Here is how your HTML code will finally look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>IT Hit AJAX Browser</title>
    
    <style type="text/css">
        html, body {margin: 0px; padding: 0px; width: 100%; height: 100%;}
    </style>
    <script src="ITHitAJAXFileBrowserLoader.js" type="text/javascript"></script>
    <script type="text/javascript">
        function InitAjaxFileBrowser() {
            var webDavServerPath = 'http://webdavserver.com/dav/';
 
            var settings = {
                BasePath: '/',                      
                Id: 'AjaxFileBrowserContainer',     
                Url: webDavServerPath,              
                Style: 'height: 100%; width: 100%', 
                MsOfficeTemplatesPath: webDavServerPath + '/templates/', 
                SelectedFolder: webDavServerPath,   
                ThemeName: 'windows_8',             
                IconsSize: 16                       
                //Platform: 'mobile'                
            };
            var ajaxFileBrowserLoader = new ITHit.WebDAV.Client.AjaxFileBrowserLoader(settings);
            ajaxFileBrowserLoader.oninit = function(ajaxFileBrowser) {
                // This event is fired when control is loaded and created.
                // Your code here... 
            };
            ajaxFileBrowserLoader.LoadAsync();
        }
    </script>
</head>
<body onload="InitAjaxFileBrowser()">
<div id="AjaxFileBrowserContainer" class="ih_style" style="width: 100%; height: 100%"></div>
</body>
</html>